如何用JS實現輪播圖效果

輪播圖現在在各大網站已經屢見不鮮了。今天來詳細講解一下輪播圖的實現效果。

1.序號輪播

1）可以根據ul中圖片個數的變化實時的改變序號個數

2）無縫滾動必須要動態創建

1）animate（需要滾動的dom元素，end）

2）通過序號的下標計算end值

（2）箭頭輪播

①鼠標移入移出

②動畫輪播

1）計數變量pic計算end值，pic表示被推出顯示窗口的圖片個數。

2）點擊右箭頭pic自加，點擊左箭頭pic自減。

3）利用pic計算end即可

（3）無縫滾動

①以右箭頭無縫滾動為例

（4）關聯序號輪播和箭頭輪播

①序號輪播關聯箭頭輪播

②箭頭輪播關聯序號輪播

（5）自動輪播

①每隔一段時間就向後走一張圖片

1）點擊右箭頭可以向後走一張圖片

2）設置間歇定時器

（6）鼠標移入/移出/——暫停/繼續

①當鼠標移入顯示輪播圖的DIV自動輪播暫停

1）鼠標移入事件，清除定時器

2）鼠標移出事件，定時器啟動

<title>

<style>

*{

margin:0;

padding: 0;

}

#box{

width:500px;

height: 250px;

border:1px #000 solid;

padding:5px;

margin:50px auto;

position: relative;

}

#banner{

width: 500px;

height: 250px;

overflow: hidden;

position: absolute;

}

ul{

list-style: none;

width:4000px;

float: left;

position: absolute;

}

ul li{

float: left;

}

ul li img{

height:250px;

width:500px;

}

.newImg{

height:250px;

width:500px;

}

#btn{

position: absolute;

z-index:3;

display:none;

}

#left{

position:absolute;

top:105px;

cursor:pointer;

}

#right{

position:absolute;

top:105px;

left:465px;

cursor:pointer;

}

ol{

position:absolute;

z-index: 3;

list-style:none;

bottom:15px;

right:10px;

}

ol li{

background:#fff;

float:left;

margin-right:10px;

width: 20px;

height: 20px;

text-align: center;

line-height:20px;

cursor:pointer;

}

.current{

background:lightpink;

color:#fff;

}

//獲取元素

var ul = document.querySelector("ul");

var ulLis = ul.children;

var ol = document.querySelector("ol");

var img = ulLis[0].children[0];

var imgWid = img.offsetWidth;

var box = document.querySelector("#box")

var btn = document.querySelector("#btn")

var right = document.querySelector("#right")

var left = document.querySelector("#left")

//創造動畫函數

//這是自己封裝的動畫函數

var timer = null;

var animate = function(obj,end){

//先清除定時器是因為防止序號輪播和箭頭輪播衝突

clearInterval(timer);

timer = setInterval(function(){

//每調用圖片一次走的距離

var step = 15;

//實時獲取起點位置

var leader = obj.offsetLeft;

//對圖片向右走還是向左走進行判斷

end > leader ? step = step : step = -step;

if(end != leader){

obj.style.left = leader + step + "px";

}

//如果最後剩餘的距離在step的範圍以內了就直接定位到

//終點吧,因為這時候再調用一次step會大於end終點位置

if(Math.abs(end - leader) < Math.abs(step)){

obj.style.left = end + "px"

clearInterval(timer);

}

},15)

}

//獲取元素,創造序號

//創造序號就一個要求,寫在克隆圖片前面就行

//否則在循環的時候克隆的圖片也會被循環進去

//後邊會有提到克隆圖片

for(var i = 0; i < ulLis.length; i++){

var olLis = document.createElement("li");

olLis.innerText = i + 1;

ol.appendChild(olLis);

}

//給序號添加鼠標經過事件

var olLis = ol.children;

for(var i = 0; i < olLis.length; i++){

//循環i在函數體內只能輸出最後循環完的值,

//所以先定義一個對象來接收一下每次循環

//的i的值

olLis[i].index = i;

olLis[i].onmouseover = function(){

//排他思想,網上有教程,不贅述

for(var j = 0; j < olLis.length; j++){

olLis[j].className = "";

}

//此時,this表示鼠標經過的哪個序號

this.className = "current";

//序號開始輪播

//將箭頭下標和序號進行聯動

pic = this.index;

//this其實也代表了每張輪播圖片的下標,

//想讓第幾張圖片出現,就讓第幾張圖片的下標

//乘以圖片的寬度就可以了,仔細想想,這個道理

//挺容易理解的…

//負號是因為圖片要向左走,左為負

var end = -this.index * imgWid;

//調用一開始封裝好的運動函數

animate(ul,end)

}

}

//箭頭添加鼠標經過事件

//顯示或者隱藏箭頭

box.onmouseover = function(){

btn.style.display = "block";

//當鼠標放在圖片上時,讓輪播暫停

//暫停也就是直接清除定時器就可以

clearInterval(timerr);

}

box.onmouseout = function(){

btn.style.display = "none";

//鼠標移出輪播圖片再次啟動定時器

timerr = setInterval(function(){

right.onclick();

},3000)

}

//克隆第一張片準備無縫滾動

//輪播圖為什麼要克隆第一張圖片

//百度一搜一堆解釋,這裡主要講代碼,不贅述

var newImg = ulLis[0].children[0].cloneNode(true);

newImg.setAttribute("class","newImg")

ul.appendChild(newImg);

//右箭頭點擊事件

//創建技術變量,類似充當下標使用

var pic = 0;

//第二遍輪播的時候,是沒有0這個下標的,這個跟

//克隆圖片之後無縫滾動的判斷有關係;

var square = 0;

//在輪播圖初始化的時候顯示第一張圖片,

//所以得手動點亮第一個序號

olLis[0].className = "current";

right.onclick = function(){

//如果已經顯示克隆圖片,就把輪播重新定位

//最開始的位置

//並把計數變量pic也歸零

if(pic == ulLis.length-1){

pic = 0;

ul.style.left = "0px"

}

//每點擊一次右箭頭都讓計數變量pic自加一次

pic++;

//將代表序號下標的變量和箭頭用的計數變量

//進行聯動;

//此時,聯動已經完成

//square==pic==序號輪播的用於接收循環i的值的

//this.index對象的值

square = pic;

var end = -pic * imgWid;

animate(ul,end)

//排他思想,跟上一個一樣的用法

for(var i = 0; i < olLis.length; i++){

olLis[i].className = "";

}

if(square == ulLis.length-1){

square = 0;

}

olLis[square].className = "current"

}

//左箭頭點擊事件

//跟右點擊事件一樣的性質

left.onclick = function(){

if(pic == 0){

pic = ulLis.length-1

ul.style.left = -pic * imgWid + "px";

}

pic--;

square = pic;

var end = -pic * imgWid;

animate(ul,end)

for(var i = 0; i < olLis.length; i++){

olLis[i].className = "";

}

olLis[square].className = "current";

}

//自動輪播

//每隔3秒自動調用一次右箭頭就可以

var timerr = setInterval(function(){

right.onclick();

},3000)

相信看到這裡各位大致已經知道怎麼去做輪播圖了，小編這裡整理了一些web前端的學習資料，感興趣的小可愛感覺行動起來吧，關注小編，私信【學習】，即可免費獲得哦！