網(wǎng)上有很多的例子介紹，在這里我所做的無(wú)縫滾動(dòng)就是 通過(guò)改變?cè)氐膌eft值讓圖片呈現(xiàn)左右滾動(dòng)的效果。
我們首先看一下 div+css 的結(jié)構(gòu)樣式：
div+css代碼
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } ul,ol{ list-style: none; } /*消除圖片底部3像素距離*/ img{ vertical-align: top; } .scroll{ width: 500px; height: 200px; margin: 100px auto; border: 1px solid #ccc; padding: 7px; overflow: hidden; position: relative; } .box{ width: 500px; height: 200px; overflow: hidden; position: relative; } .box ul{ width: 600%; position: absolute; left: 0; top: 0; } .box ul li{ float: left; } .scroll ol{ position: absolute; right: 10px; bottom: 10px; } .scroll ol li{ float: left; width: 20px; height: 20px; background: pink; text-align: center; line-height: 20px; border-radius: 50%; background-color: pink; margin-left:10px ; cursor: pointer; } .scroll ol li.current{ background-color: purple; } </style> </head> <body> <div id="scroll" class="scroll"> <div id="box" class="box"> <ul id="ul"> <li><img src="images/1.jpg" width="500" height="200"></li> <li><img src="images/2.jpg" width="500" height="200"></li> <li><img src="images/3.jpg" width="500" height="200"></li> <li><img src="images/4.jpg" width="500" height="200"></li> <li><img src="images/5.jpg" width="500" height="200"></li> </ul> <ol id="ol"> <li class="current">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> </div> </div> </body></html>展示效果如圖：
接下來(lái)js代碼，再此之前我們要明白，小圓點(diǎn) 1 2 3 并不是寫(xiě)死的，它是根據(jù)ul li中的圖片張數(shù)來(lái)決定的 ，所以我們要先把div中ol li中的代碼去掉。
要實(shí)現(xiàn)無(wú)縫滾動(dòng)就需要多一張圖片才行 ，即克隆第一張圖片，放到最后面。此時(shí)css布局保留，div中只剩下：
<body> <div id="scroll" class="scroll"> <div id="box" class="box"> <ul id="ul"> <li><img src="images/1.jpg" width="500" height="200"></li> <li><img src="images/2.jpg" width="500" height="200"></li> <li><img src="images/3.jpg" width="500" height="200"></li> <li><img src="images/4.jpg" width="500" height="200"></li> <li><img src="images/5.jpg" width="500" height="200"></li> </ul> </div> </div> </body>
此時(shí)我們用js代碼生成小圓點(diǎn)
var scroll = document.getElementById("scroll"); // 獲得大盒子var ul = document.getElementById("ul"); // 獲得ulvar ulLis = ul.children;// 獲得ul的盒子 以此來(lái)生成ol中l(wèi)i的個(gè)數(shù)var liWidth = ul.children[0].offsetWidth;// 獲得每個(gè)li的寬度 // 操作元素 // 因?yàn)橐鰺o(wú)縫滾動(dòng)，所以要克隆第一張，放到最后一張后面 // 1. 克隆元素 ul.appendChild(ul.children[0].cloneNode(true)); // 2.創(chuàng)建ol 和li vaar ol = document.createElement("ol");//創(chuàng)建ol元素 scroll.appendChild(ol);// 把ol放到scroll盒子里面去 for (var i=0;i<ulLis.length-1;i++) { var li = document.createElement("li");// 創(chuàng)建li元素 li.innerHTML = i + 1;// 給li里面添加文字 1 2 3 4 5 ol.appendChild(li);// 將li元素添加到ol里面 }ol.children[0].className = "current";// ol中的第一個(gè)li背景色為purple此時(shí)ol li元素即小圓點(diǎn)創(chuàng)建完畢 我們接著用js做動(dòng)畫(huà)
動(dòng)畫(huà)部分包括：
1.鼠標(biāo)經(jīng)過(guò)第幾個(gè)小圓點(diǎn)，就要展示第幾張圖片，并且小圓點(diǎn)的顏色也發(fā)生變化
2.圖片自動(dòng)輪播，（這需要一個(gè)定時(shí)器）
3.鼠標(biāo)經(jīng)過(guò)圖片，圖片停止自動(dòng)播放（這需要清除定時(shí)器）
4.鼠標(biāo)離開(kāi)圖片，圖片繼續(xù)自動(dòng)輪播 （重新開(kāi)始定時(shí)器）
這里我們封裝了一個(gè)animate()動(dòng)畫(huà)函數(shù)
// 動(dòng)畫(huà)函數(shù) 第一個(gè)參數(shù)，代表誰(shuí)動(dòng) 第二個(gè)參數(shù) 動(dòng)多少// 讓圖片做勻速運(yùn)動(dòng)，勻速動(dòng)畫(huà)的原理是 當(dāng)前的位置 + 速度 即 offsetLeft + speed function animate(obj,target){ // 首先清除掉定時(shí)器 clearInterval(obj.timer); // 用來(lái)判斷 是+ 還是 - 即說(shuō)明向左走還是向右走 var speed = obj.offsetLeft < target ? 15 : -15; obj.timer = setInterval(function(){ var result = target - obj.offsetLeft;//它們的差值不會(huì)超過(guò)speed obj.style.left = obj.offsetLeft + speed + "px"; // 有可能有小數(shù)的存在，所以在這里要做個(gè)判斷 if (Math.abs(result) <= Math.abs(speed)) { clearInterval(obj.timer); obj.style.left = target + "px"; } },10); }定時(shí)器 函數(shù)
var timer = null; // 輪播圖的定時(shí)器 var key = 0;// 控制播放的張數(shù) var circle = 0;// 控制小圓點(diǎn) timer = setInterval(autoplay,1000);// 自動(dòng)輪播 function autoplay(){ /*自動(dòng)輪播時(shí),要對(duì)播放的張數(shù)key進(jìn)行一個(gè)判斷,如果播放的張數(shù)超過(guò)ulLis.length-1, 就要重頭開(kāi)始播放. 因?yàn)槲覀兛寺×说谝粡埐⑵浞旁谧詈竺?所以我們要從第二張圖片開(kāi)始播放*/ key++; // 先++ if(key > ulLis.length-1){// 后判斷 ul.style.left = 0; // 迅速調(diào)回 key = 1; // 因?yàn)榈?張是第一張，所以播放的時(shí)候是從第2張開(kāi)始播放 } // 動(dòng)畫(huà)部分 animate(ul,-key*liWidth); // 小圓點(diǎn)circle 當(dāng)顯示第幾張圖片是，對(duì)應(yīng)的小圓點(diǎn)的顏色也發(fā)生變化 /*同理,對(duì)小圓點(diǎn)也要有一個(gè)判斷*/ circle++; if (circle > olLis.length-1) { circle = 0; } // 小圓點(diǎn)顏色發(fā)生變化 for (var i = 0 ; i < olLis.length;i++) { // 先清除掉所用的小圓點(diǎn)類(lèi)名 olLis[i].className = ""; } // 給當(dāng)前的小圓點(diǎn) 添加一個(gè)類(lèi)名 olLis[circle].className = "current"; }好啦，這里我們展示了主要代碼，具體代碼，查看這里下載js實(shí)現(xiàn)輪播效果
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
