純js實現(xiàn)：
要求：算了，還是先看圖吧
實現(xiàn)效果：
圖片自動輪播，鼠標移入停止，移出繼續(xù)輪播
點擊左右按鈕實現(xiàn)切換
點擊下標焦點實現(xiàn)切換
1、首先實現(xiàn)無縫滾動：
效果：
原理：
讓ul里的第一個 li 和最后一個 li 內(nèi)容相同；
通過改變left值，讓ul在box中移動；
當移動到最后一個的時候，在讓ul回到其實位置；
代碼實現(xiàn)：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>無縫滾動</title></head><style type="text/css"> *{ margin: 0; padding: 0; } .box{ background: red; width: 600px; height: 300px; overflow: hidden; margin:100px auto; position: relative; } img{ width: 600px; height: 300px; vertical-align: top;/*取消底邊的3px */ } ul{ width: 500%; height: 300px; list-style: none; position: absolute; left: 0; top: 0; } li{ float: left; }</style><body> <div class="box" id="box"> <ul id="inner-box"> <li><img src="banner/banner1.jpg"></li> <li><img src="banner/banner2.jpg"></li> <li><img src="banner/banner3.jpg"></li> <li><img src="banner/banner4.jpg"></li> <li><img src="banner/banner1.jpg"></li> </ul> <ol class=""> <li class="current">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> </div></body><script type="text/javascript"> var oBox = document.getElementById("box"); var oUl = document.getElementById("inner-box"); var a = 0; //定義一個變量用于設置left值 var timer = null; //定義一個計時器 var target = 500; timer = setInterval(autoPlay,10);// 定義計時器每25毫秒執(zhí)行一次 function autoPlay() { //執(zhí)行每次執(zhí)行函數(shù)，left值減1 a--; a <= -400 ? a = 0 :a; oUl.style.left = a+"%"; } oBox.onmouseover = function () { //移出時清除計時器 clearInterval(timer); } oBox.onmouseout=function(){ //移入時開始計時器 timer = setInterval(autoPlay,10); }</script></html>2、加入緩沖的勻速運動：
原里：改變每次變化的速度
代碼實現(xiàn)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>緩沖無縫滾動</title></head><style type="text/css">* { margin: 0; padding: 0;}.box { background: red; width: 600px; height: 300px; overflow: hidden; margin: 100px auto; position: relative;}img { width: 600px; height: 300px; vertical-align: top; /*取消底邊的3px */}ul { width: 500%; height: 300px; list-style: none; position: absolute; left: 0; top: 0;}li { float: left;}</style><body> <div class="box" id="box"> <ul id="inner-box"> <li><img src="banner/banner1.jpg"></li> <li><img src="banner/banner2.jpg"></li> <li><img src="banner/banner3.jpg"></li> <li><img src="banner/banner4.jpg"></li> <li><img src="banner/banner1.jpg"></li> </ul> </div></body><script type="text/javascript">var oBox = document.getElementById("box");var oUl = document.getElementById("inner-box");var cur = 0; //定義一個變量用于設置left值var timer = null; //定義一個計時器var target = 0;timer = setInterval(autoPlay, 2000); // 定義計時器每25毫秒執(zhí)行一次function autoPlay() { //執(zhí)行每次執(zhí)行函數(shù)，left值減1 if (target <= -400) { cur = 0; target = -100; } else { target -= 100; } var timer1 = null; timer1 = setInterval(autoPlay, 30); //設置定時器每30毫秒執(zhí)行一次 function autoPlay() { if (cur == target) { clearInterval(timer1) //大于目標值時，清空計時器 } else { speed = (target - cur) / 7; //計算速度 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //取整 cur = cur + speed; oUl.style.left = cur + "%"; } }}oBox.onmouseover = function() { //移出時清除計時器 clearInterval(timer);}oBox.onmouseout = function() { //移入時開始計時器 timer = setInterval(autoPlay, 2000);}</script></html>3、添加左右點擊按鈕
效果：
難點：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>緩沖無縫滾動</title></head><style type="text/css">* { margin: 0; padding: 0;}.box { background: red; width: 600px; height: 300px; overflow: hidden; margin: 100px auto; position: relative;}img { width: 600px; height: 300px; vertical-align: top; /*取消底邊的3px */}ul { width: 500%; height: 300px; list-style: none; position: absolute; left: 0; top: 0;}li { float: left;}.btn span{ width: 30px; height: 50px; background: #4a4a4a; display: inline-block; position: absolute; text-align: center; line-height: 50px; font-size: 24px; opacity: 0.4; cursor: pointer;}.btn span:hover{ opacity: 1; color: #fff;}.btn .left{ left: 0; top: 125px;}.btn .right{ right: 0; top: 125px;}</style><body> <div class="box" id="box"> <ul id="inner-box"> <li><img src="banner/banner1.jpg"></li> <li><img src="banner/banner2.jpg"></li> <li><img src="banner/banner3.jpg"></li> <li><img src="banner/banner4.jpg"></li> <li><img src="banner/banner1.jpg"></li> </ul> <div class="btn"> <span class="left" id="left"><</span> <span class="right" id="right">></span> </div> </div></body><script type="text/javascript">var oBox = document.getElementById("box");var oUl = document.getElementById("inner-box");var oLeft = document.getElementById("left");var oRight = document.getElementById("right");var cur = 0; //定義一個變量用于設置left值var timer = null; //定義一個計時器var target = 0;var timer1 = null;timer = setInterval(autoPlay, 2000); // 定義計時器每25毫秒執(zhí)行一次function autoPlay() { //執(zhí)行每次執(zhí)行函數(shù)，left值減1 if (target <= -400) { cur = 0; target = -100; } else { target -= 100; } sport(target);}oRight.onclick = function (argument) { if (target <= -400) { cur = 0; target = -100; } else { target -= 100; } sport(target);} oLeft.onclick = function (argument) { if (target > -100) { cur -= 400; target = -300; } else{ target += 100; } sport(target);} function sport(tar) { clearInterval(timer1); timer1 = setInterval(autoPlay, 30); //設置定時器每30毫秒執(zhí)行一次 function autoPlay() { if (cur == tar) { clearInterval(timer1) //大于目標值時，清空計時器 } else { speed = (tar - cur) / 7; //計算速度 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //取整 cur = cur + speed; oUl.style.left = cur + "%"; } }}oBox.onmouseover = function() { //移出時清除計時器 clearInterval(timer);}oBox.onmouseout = function() { //移入時開始計時器 timer = setInterval(autoPlay, 2000);}</script></html>4、添加底部焦點：
效果：在最上頭；一開始的地方
代碼實現(xiàn)：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>標準輪播圖</title></head><style type="text/css">* { margin: 0; padding: 0;}.box { width: 600px; height: 300px; overflow: hidden; margin: 100px auto; position: relative;}img { width: 600px; height: 300px; vertical-align: top; /*取消底邊的3px */}ul { width: 500%; height: 300px; list-style: none; position: absolute; left: 0; top: 0;}ul li { float: left;}.btn span{ width: 30px; height: 50px; background: #4a4a4a; display: inline-block; position: absolute; text-align: center; line-height: 50px; font-size: 24px; opacity: 0.4; cursor: pointer;}.btn span:hover{ opacity: 1; color: #fff;}.btn .left{ left: 0; top: 125px;}.btn .right{ right: 0; top: 125px;}ol{ position: absolute; bottom: 20px; left: 40%; list-style: none;}ol li{ width: 10px; height: 10px; border-radius: 10px; border: 1px solid #fff; float: left; margin: 0 4px;}</style><body> <div class="box" id="box"> <ul id="inner-box"> <li><img src="banner/banner1.jpg"></li> <li><img src="banner/banner2.jpg"></li> <li><img src="banner/banner3.jpg"></li> <li><img src="banner/banner4.jpg"></li> <li><img src="banner/banner1.jpg"></li> </ul> <ol id="ol"> <li></li> <li></li> <li></li> <li></li> </ol> <div class="btn"> <span class="left" id="left"><</span> <span class="right" id="right">></span> </div> </div></body><script type="text/javascript">var oBox = document.getElementById("box");var oUl = document.getElementById("inner-box");var oLeft = document.getElementById("left");var oRight = document.getElementById("right");var cur = 0; //定義一個變量用于設置left值var timer = null; //定義一個計時器var target = 0;var timer1 = null;var i = 0;timer = setInterval(autoPlay, 2000); // 定義計時器每25毫秒執(zhí)行一次function autoPlay() { //執(zhí)行每次執(zhí)行函數(shù)，left值減1 if (target <= -400) { cur = 0; target = -100; } else { target -= 100; } sport(target); btnBottom();}oRight.onclick = function (argument) { if (target <= -400) { cur = 0; target = -100; } else { target -= 100; } sport(target); btnBottom();} oLeft.onclick = function (argument) { if (target > -100) { cur -= 400; target = -300; } else{ target += 100; } sport(target); btnBottom();} // 增加下標顯示效果btnBottom(i)function btnBottom() { i = -(target/100); i == 4 ? i = 0 : i; var oOl = document.getElementById("ol"); var oLi = oOl.getElementsByTagName("li"); for( j=0 ; j<oLi.length ; j++){ oLi[j].style.background = ''; } oLi[i].style.background = '#fff';}// 加點擊事件var oOl = document.getElementById("ol");var oLi = oOl.getElementsByTagName("li");for( j=0 ; j<oLi.length ; j++){ oLi[j].index = j oLi[j].onclick = function() { target = -(this.index*100); sport(target); btnBottom() }}function sport(tar) { clearInterval(timer1); timer1 = setInterval(autoPlay, 30); //設置定時器每30毫秒執(zhí)行一次 function autoPlay() { if (cur == tar) { clearInterval(timer1) //大于目標值時，清空計時器 } else { speed = (tar - cur) / 7; //計算速度 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //取整 cur = cur + speed; oUl.style.left = cur + "%"; } }}oBox.onmouseover = function() { //移出時清除計時器 clearInterval(timer);}oBox.onmouseout = function() { //移入時開始計時器 timer = setInterval(autoPlay, 2000);}</script></html>百度云鏈接：http://pan.baidu.com/s/1mi14ijY 密碼：d84v
聯(lián)系客服
