基于JavaScript實現(xiàn)輪播圖原理及示例

更新時間：2021年10月19日 08:40:33 作者：diligentkong

這篇文章主要為大家詳細介紹了基于JavaScript實現(xiàn)輪播圖原理及示例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

網(wǎng)上有很多的例子介紹，在這里我所做的無縫滾動就是通過改變元素的left值讓圖片呈現(xiàn)左右滾動的效果。

我們首先看一下 div+css 的結構樣式：

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>

展示效果如圖：

接下來js代碼，再此之前我們要明白，小圓點 1 2 3 并不是寫死的，它是根據(jù)ul li中的圖片張數(shù)來決定的，所以我們要先把div中ol li中的代碼去掉。

要實現(xiàn)無縫滾動就需要多一張圖片才行，即克隆第一張圖片，放到最后面。此時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>

此時我們用js代碼生成小圓點

var scroll = document.getElementById("scroll"); // 獲得大盒子
var ul = document.getElementById("ul"); // 獲得ul
var ulLis = ul.children;// 獲得ul的盒子 以此來生成ol中l(wèi)i的個數(shù)
var liWidth = ul.children[0].offsetWidth;// 獲得每個li的寬度
 // 操作元素
 // 因為要做無縫滾動，所以要克隆第一張，放到最后一張后面
 // 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中的第一個li背景色為purple

此時ol li元素即小圓點創(chuàng)建完畢我們接著用js做動畫

動畫部分包括：

1.鼠標經(jīng)過第幾個小圓點，就要展示第幾張圖片，并且小圓點的顏色也發(fā)生變化
2.圖片自動輪播，（這需要一個定時器）
3.鼠標經(jīng)過圖片，圖片停止自動播放（這需要清除定時器）
4.鼠標離開圖片，圖片繼續(xù)自動輪播（重新開始定時器）
這里我們封裝了一個animate()動畫函數(shù)

// 動畫函數(shù) 第一個參數(shù)，代表誰動 第二個參數(shù) 動多少
// 讓圖片做勻速運動，勻速動畫的原理是 當前的位置 + 速度 即 offsetLeft + speed

 function animate(obj,target){
 // 首先清除掉定時器
 clearInterval(obj.timer);
 // 用來判斷 是+ 還是 - 即說明向左走還是向右走
 var speed = obj.offsetLeft < target ? 15 : -15;
 obj.timer = setInterval(function(){
 var result = target - obj.offsetLeft;//它們的差值不會超過speed
 obj.style.left = obj.offsetLeft + speed + "px";
 // 有可能有小數(shù)的存在，所以在這里要做個判斷 
 if (Math.abs(result) <= Math.abs(speed)) {
 clearInterval(obj.timer);
 obj.style.left = target + "px";
 }
 },10);
 }

定時器函數(shù)

var timer = null; // 輪播圖的定時器
 var key = 0;// 控制播放的張數(shù)
 var circle = 0;// 控制小圓點

 timer = setInterval(autoplay,1000);// 自動輪播
 function autoplay(){
 /*自動輪播時,要對播放的張數(shù)key進行一個判斷,如果播放的張數(shù)超過ulLis.length-1,
 就要重頭開始播放. 因為我們克隆了第一張并將其放在最后面,所以我們要從第二張圖片開始播放*/
 key++; // 先++
 if(key > ulLis.length-1){// 后判斷

 ul.style.left = 0; // 迅速調(diào)回
 key = 1; // 因為第6張是第一張，所以播放的時候是從第2張開始播放
 }
 // 動畫部分
 animate(ul,-key*liWidth);
 // 小圓點circle 當顯示第幾張圖片是，對應的小圓點的顏色也發(fā)生變化

 /*同理,對小圓點也要有一個判斷*/
 circle++;
 if (circle > olLis.length-1) {
 circle = 0;
 }
 // 小圓點顏色發(fā)生變化
 for (var i = 0 ; i < olLis.length;i++) {
 // 先清除掉所用的小圓點類名
 olLis[i].className = ""; 
 }
 // 給當前的小圓點 添加一個類名
 olLis[circle].className = "current";

 }

好啦，這里我們展示了主要代碼，具體代碼，查看這里下載js實現(xiàn)輪播效果

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: