首页 > 代码库 > 分享一个轮播图匀速播放点击

分享一个轮播图匀速播放点击

 

 

技术分享      

 

 

技术分享

 




<div class="xinwen">
<div class="xinwen-left">
<div class="neirong9">
<div class="wai" id="lunbo">
<a class="img1" href="http://www.mamicode.com/#"></a>
<a class="img2" href="http://www.mamicode.com/#"></a>
<a class="img3" href="http://www.mamicode.com/#"></a>
<a class="img1" href="http://www.mamicode.com/#"></a>
</div>
<ul class="biaoji">
<li class="biaoji-neirong"><a id="biao1" onclick="lunbo1(2) "></a></li>
<li class="biaoji-neirong"><a id="biao2" onclick="lunbo1(4)"></a></li>
<li class="biaoji-neirong"><a id="biao3" onclick="lunbo1(6)"></a></li>
</ul>
</div>
</div>

  

.xinwen {
width: 1180px;
height: 215px;
position: absolute;
top: 722px;
margin-left: 50%;
left: -590px; }


.xinwen .xinwen-left { float: left; position: relative; width: 580px; height: 100%; } .xinwen .xinwen-left .neirong9 { width: 100%; height: 100%; overflow: hidden; position: relative; } .xinwen .xinwen-left .neirong9 .biaoji { position: absolute; bottom: 15px; left: 30px; height: 29px; z-index: 600; } .xinwen .xinwen-left .neirong9 .biaoji .biaoji-neirong { width: auto; height: 29px; float: left; margin-right: 10px; } .xinwen .xinwen-left .neirong9 .biaoji .biaoji-neirong a { display: block; width: 29px; height: 29px; background: url(http://res.gfxm.netease.com/pc/gw/15v2/img/icon3_5f803b4.png) center center no-repeat; } .xinwen .xinwen-left .neirong9 .biaoji .biaoji-neirong #biao1 { background: url(http://res.gfxm.netease.com/pc/gw/15v2/img/icon4_d756c84.png) center center no-repeat; } .xinwen .xinwen-left .neirong9 .wai { position: absolute; width: 400%; left: 0%; } .xinwen .xinwen-left .neirong9 a { display: block; float: left; width: 580px; height: 215px; } .xinwen .xinwen-left .neirong9 .img1 { background: url(https://fz.fp.ps.netease.com/file/57ba9ff5143cfaa160833d00TuXDxiE8) center center no-repeat; } .xinwen .xinwen-left .neirong9 .img2 { background: url(https://fz.fp.ps.netease.com/file/57ba9faa143cfaa7a5b4b5cflOwcBHOo) center center no-repeat; } .xinwen .xinwen-left .neirong9 .img3 { background: url(https://fz.fp.ps.netease.com/file/57ba9fcf96dee46c55ca57b9exSpdGvv) center center no-repeat; }

  

var num=1;
biao1 = document.getElementById("biao1");
biao2 = document.getElementById("biao2");
biao3 = document.getElementById("biao3");
lunbo = document.getElementById("lunbo");
setInterval(function(){
switch (num){
case 1:
lunbo.style.transition="none";
lunbo.style.left="0%";
//biao1.style.backgroundImage="url(img/icon4_d756c84.png)";
//console.log(2);
num=2;
break;
case 2:
lunbo.style.transition="none";
lunbo.style.left="0%";
//console.log(3);
num=3;
break;
case 3:
biao1.style.backgroundImage="url(http://res.gfxm.netease.com/pc/gw/15v2/img/icon3_5f803b4.png)";
biao2.style.backgroundImage="url(http://res.gfxm.netease.com/pc/gw/15v2/img/icon4_d756c84.png)";
lunbo.style.transition="all ease-in-out .5s";
lunbo.style.left="-100%";
//console.log(4);
num=4;
break;
case 4:
lunbo.style.transition="none";
lunbo.style.left="-100%";
//console.log(5);
num=5;
break;
case 5:
biao2.style.backgroundImage="url(http://res.gfxm.netease.com/pc/gw/15v2/img/icon3_5f803b4.png)";
biao3.style.backgroundImage="url(http://res.gfxm.netease.com/pc/gw/15v2/img/icon4_d756c84.png)";
lunbo.style.transition="all ease-in-out .5s";
lunbo.style.left="-200%";
//console.log(6);
num=6;
break;
case 6:
lunbo.style.transition="none";
lunbo.style.left="-200%";
//console.log(7);
num=7;
break;
case 7:
biao3.style.backgroundImage="url(http://res.gfxm.netease.com/pc/gw/15v2/img/icon3_5f803b4.png)";
biao1.style.backgroundImage="url(http://res.gfxm.netease.com/pc/gw/15v2/img/icon4_d756c84.png)";
lunbo.style.transition="all ease-in-out .5s";
lunbo.style.left="-300%";
//console.log(2);
num=2;

break;
default:
break;
}
},1000);

分享一个轮播图匀速播放点击