javascript實現(xiàn)圖片輪播簡單效果

第javascript實現(xiàn)圖片輪播簡單效果本文實例為大家分享了javascript實現(xiàn)圖片輪播簡單效果的具體代碼，供大家參考，具體內(nèi)容如下

這里是css樣式

*{

margin:0;

padding:0;

}

ul,

li{

list-style:none;

}

img{

display:block;

/*vertical-align:middle;*/

}

a{

text-decoration:none;

}

input{

outline:none;

}

.clearFix:after{

content:"";

display:table;

clear:both;

}

#box{

position:relative;

width:500px;

height:300px;

margin:50pxauto;

overflow:hidden;

}

#box.imglist{

position:absolute;

left:-500px;

top:0;

width:3500px;

height:300px;

}

#box.imglistli{

float:left;

width:500px;

height:300px;

}

#box.imglistliimg{

width:500px;

height:300px;

}

#boxspan{

position:absolute;

top:50%;

transform:translateY(-50%);

width:25px;

height:50px;

background-color:rgba(200,200,200,0.7);

font-size:20px;

text-align:center;

line-height:50px;

color:white;

opacity:0;

transition:opacity1s;

}

#box.left{

left:0;

}

#box.right{

right:0;

}

#box.btnlist{

position:absolute;

left:50%;

transform:translateX(-50%);

bottom:10px;

overflow:hidden;

}

#box.btnlistli{

float:left;

width:10px;

height:10px;

margin-right:10px;

border-radius:50%;

background-color:gray;

}

#box.btnlistli.current{

background-color:red;

}

這里是body里的div，我的圖片都是寬500px的，你也可以改其尺寸的，不過相應的js代碼也要更改

divid="box"

ul

liimgsrc="images/yaya5.jpg"http://li

liimgsrc="images/yaya1.jpg"http://li

liimgsrc="images/yaya2.jpg"http://li

liimgsrc="images/yaya3.jpg"http://li

liimgsrc="images/yaya4.jpg"http://li

liimgsrc="images/yaya5.jpg"http://li

liimgsrc="images/yaya1.jpg"http://li

/ul

span/span

span/span

ul

li/li

li/li

li/li

li/li

li/li

/ul

/div

這里是js代碼,代碼大部分地方都做了注釋

//元素對象

varleft=document.querySelector(".left");

varright=document.querySelector(".right");

varimglist=document.querySelector(".imglist");

varbox=document.querySelector("#box");

vardots=document.querySelectorAll(".btnlistli");

//變量區(qū)

varimgWidth=500;//圖片的寬度

vartime=500;//切換一張圖片耗費的時間

varsteps=50;//步數(shù)

varinterval=10;//定時任務的時間間隔

varcurrent_red=0;

//isMoving變量用于判斷當前是否正在切圖中

varisMoving=false;

//自動輪播定時任務的id值

varautoId;

//鼠標移入時顯示左右箭頭，移出時隱藏左右箭頭

box.addEventListener("mouseenter",function(e){

left.style.opacity=1;

right.style.opacity=1;

//鼠標移入到box時停止輪播

clearInterval(autoId);

});

box.addEventListener("mouseleave",function(e){

left.style.opacity=0;

right.style.opacity=0;

//鼠標移出box時開啟自動輪播

autoMove();

});

//對左右箭頭設(shè)置點擊事件

functionmove(e,direction){

//isMoving為true時表示正在切換圖片，不能再執(zhí)行move函數(shù)的代碼

if(isMoving){

return;

}

isMoving=true;

//獲取當前imglist的位置

varstart_x=imglist.offsetLeft;

varend_x;

//判斷direction的數(shù)據(jù)類型

if(typeofdirection==="number"){

end_x=direction;

vardelta_x=end_x-start_x;

}else{

//通過點擊的箭頭確定圖片移動的距離

vardelta_x=direction==="left"imgWidth:-imgWidth;

//計算要移動到的位置

end_x=start_x+delta_x;

}

//計算每一步移動的距離

varstep_dis=delta_x/steps;

varnext_inter_id=setInterval(function(){

varcurrent_x=imglist.offsetLeft;

current_x+=step_dis;

imglist.style.left=current_x+"px";

//條件成立表示完成了此次圖片的切換，清除定時器

if(current_x===end_x){

//current_x等于0表示此時顯示的是位置上的第一張圖片(第一個li)，我們要切換到倒數(shù)第二張去。

if(current_x===0){

imglist.style.left=-2500+"px";

//current_x等于-3000表示此時顯示的是位置上的最后一張(第七個li),我們要切換到第二張圖片去。

}elseif(current_x===-3000){

imglist.style.left=-500+"px";

}

clearInterval(next_inter_id);

//圖片切換完成時切換小圓點,傳入的參數(shù)是此時imglist的left屬性的值

changeDots(current_x);

//圖片切換完成，可以繼續(xù)點擊箭頭或小圓點切圖了

isMoving=false;

}

},interval);

}

right.addEventListener("click",function(e){

move(e,"right");

});

left.addEventListener("click",function(e){

move(e,"left");

});

/*

無限循環(huán)的實現(xiàn)思路：在首尾各添加一張圖片，首部添加第五張圖片，尾部添加第一張圖片

1、改變imglist的寬度

2、改變imglist元素中l(wèi)eft的值

3、在添加兩張圖片后，輪播到第一張和最后一張時實現(xiàn)切換。

*/

//小圓點的切換

functionchangeDots(current_x){

/*

current_x可能的取值：0-500-1000-1500-2000-2500-3000

除以-500：

0

1

2

3

4

5

6

整體減去1：

-1

0

1

2

3

4

5

*/

varindex=current_x/-500-1;

index=index===-14:index===50:index;

//console.log(index);

//把上一個小圓點紅色背景清除

dots[current_red].className="";

//把當前切換到的圖片對應的小圓點添加紅色背景

dots[index].className="current";

/