html京東自動輪播代碼生成器,基于JavaScript實作仿京東圖檔輪播效果

Document

*{margin:0;padding:0;list-style:none;}

a{text-decoration: none;color: #fff;}

#flash{width: 730px;height: 454px;margin: 100px auto;position: relative;cursor: pointer;}

#pic li{position: absolute;top: 0;left: 0;z-index: 1;display: none;}

#num{position: absolute;left: 40%;bottom: 10px;z-index: 2;cursor:default;}

#num li{float: left;width: 20px;height: 20px;border-radius: 50%;background: #666;margin: 3px;line-height: 20px;text-align: center;color: #fff;cursor: pointer;}

#num li.active{background: #f00;}

.arrow{height: 60px;width: 30px;line-height: 60px;text-align: center;display: block;position: absolute;top:45%;z-index: 3;display: none;}

.arrow:hover{background: rgba(0,0,0,0.7);}

#flash:hover .arrow{display: block;}

#left{left: 2%;}

#right{right: 2%;}

function $(id) {

return typeof id==='string'?document.getElementById(id):id;

}

window.οnlοad=function(){

var index=0;

var timer=null;

var pic=$("pic").getElementsByTagName("li");

var num=$("num").getElementsByTagName("li");

var flash=$("flash");

var left=$("left");

var right=$("right");

//單擊左箭頭

left.οnclick=function(){

index--;

if (index<0) {index=num.length-1};

changeOption(index);

}

//單擊右箭頭

right.οnclick=function(){

index++;

if (index>=num.length) {index=0};

changeOption(index);

}

//滑鼠劃在視窗上面，停止計時器

flash.οnmοuseοver=function(){

clearInterval(timer);

}

//滑鼠離開視窗，開啟計時器

flash.οnmοuseοut=function(){

timer=setInterval(run,2000)

}

//滑鼠劃在頁簽上面，停止計時器，手動切換

for(var i=0;i

num[i].id=i;

num[i].οnmοuseοver=function(){

clearInterval(timer);

changeOption(this.id);

}

}

//定義計時器

timer=setInterval(run,2000)

//封裝函數run

function run(){

index++;

if (index>=num.length) {index=0};

changeOption(index);

}

//封裝函數changeOption

function changeOption(curindex){

console.log(index)

for(var j=0;j

pic[j].style.display="none";

num[j].className="";

}

pic[curindex].style.display="block";

num[curindex].className="active";

index=curindex;

}

}

• 

• 

• 

• 

• 

• 

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6

<

>