简单轮播效果 js实现
2017-09-19 本文已影响0人
玲珑花
<html>
<head>
<style>
#demo{width: 100%;float: left;}
#demo a{display: none;}
#demo .play{display: block;height: 500px;}
#demo .yuantiao{background: rgba(0,0,0,0.2);width: 100%;height: 50px;text-align: center;}
#demo .yuantiao .yuan{background: #fff;height: 15px;border-radius: 15px;cursor: pointer;display: inline-block;width: 15px;margin-top: 15px;margin-left: 10px;}
#demo .yuantiao .play{background: red;}
</style>
</head>
<body>
<div id="demo">
<a class="play" style="background-color: #EED2EE;"><img src=""/></a>
<a style="background-color: #D1EEEE;"><img src=""/></a>
<a style="background-color: #B4EEB4;"><img src=""/></a>
<div class="yuantiao">
<span class="yuan play"></span>
<span class="yuan"></span>
<span class="yuan"></span>
</div>
</div>
<script type="text/javascript">
window.onload=function(){
function play(){
var demo=document.querySelectorAll("#demo a");
var yuan=document.querySelectorAll("#demo .yuantiao .yuan");
//记录当前显示的是第几个图片
playnumber=0;
for(var i=0;i<demo.length;i++){
if(demo[i].className=='play'){
playnumber=i;
break;
}
}
//如果图片是最后一个图片
if(playnumber==(demo.length-1)){
playnumber=-1;
}
//点击事件
for(var i=0;i<yuan.length;i++){
yuan[i].index=i;
yuan[i].onclick=function(){
//停止轮播
if(timer){
clearInterval(timer);
}
//显示点击的原点为 虹色
document.querySelector("#demo .yuantiao .play").className='yuan';
this.className='yuan play';
//显示点击原点对应的图片
document.querySelector("#demo .play").className='';
demo[this.index].className='play';
//继续轮播图片
timer=setInterval(play,3000);
return false;
}
}
//显示下一个图片
document.querySelector("#demo .play").className='';
document.querySelector("#demo .yuantiao .play").className='yuan';
demo[playnumber+1].className='play';
yuan[playnumber+1].className='yuan play';
}
//轮播替换图片 3s
timer=setInterval(play,3000);
}
</script>
</body>
</html>
Paste_Image.png
