纯JS实现轮播图
这几天一直在看js动画，今天又get到了一个轮播图，使用纯js实现的，但是没有美化哈，需要的小伙伴自己美化喔
如下代码：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>图片轮播的效果</title>
<styletype="text/css">
*{
margin:0;
padding:0;
text-decoration:none;
}
body{
padding:20px;
}
#container{
position:relative;
width:600px;
height:400px;
border:3pxsolid#333;
overflow:hidden;
}
#list{
position:absolute;
z-index:1;
width:4200px;
height:400px;
}
#listimg{
float:left;
width:600px;
height:400px;
}
#buttons{
position:absolute;
left:250px;
bottom:20px;
z-index:2;
height:10px;
width:100px;
}
#buttonsspan{
float:left;
margin-right:5px;
width:10px;
height:10px;
border:1pxsolid#fff;
border-radius:50%;
background:#333;
cursor:pointer;
}
#buttons.on{
background:orangered;
}
.arrow{
position:absolute;
top:180px;
z-index:2;
display:none;
width:40px;
height:40px;
font-size:36px;
font-weight:bold;
line-height:39px;
text-align:center;
color:#fff;
background-color:RGBA(0,0,0,.3);
cursor:pointer;
}
.arrow:hover{
background-color:RGBA(0,0,0,.7);
}
#container:hover.arrow{
display:block;
}
#prev{
left:20px;
}
#next{
right:20px;
}
</style>
</head>
<body>
<divid="container">
<divid="list"style="left:-600px;">
<imgsrc="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s018.jpg"alt="无缝滚动"/>
<imgsrc="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s018.jpg"alt="无缝滚动"/>
<imgsrc="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s019.jpg"alt="无缝滚动"/>
<imgsrc="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s020.jpg"alt="无缝滚动"/>
<imgsrc="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s021.jpg"alt="无缝滚动"/>
<imgsrc="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s022.jpg"alt="无缝滚动"/>
<imgsrc="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s022.jpg"alt="无缝滚动"/>
</div>
<divid="buttons">
<spanindex="1"class="on"></span>
<spanindex="2"></span>
<spanindex="3"></span>
<spanindex="4"></span>
<spanindex="5"></span>
</div>
<ahref="javascript:;"rel="externalnofollow"rel="externalnofollow"id="prev"class="arrow"><</a>
<ahref="javascript:;"rel="externalnofollow"rel="externalnofollow"id="next"class="arrow">></a>
</div>
<scripttype="text/javascript">
window.onload=function(){
varcontainer=document.getElementById("container");
varlist=document.getElementById("list");
varbuttons=document.getElementById("buttons").getElementsByTagName('span');
varprev=document.getElementById("prev");
varnext=document.getElementById("next");
varindex=1;
functionanimate(offset){
varnewLeft=parseInt(list.style.left)+offset;
list.style.left=newLeft+'px';
if(newLeft<-3000){
list.style.left=-600+'px';
}
if(newLeft>-600){
list.style.left=-3000+'px';
}
}
functionbuttonsshow(){
for(vari=0;i<buttons.length;i++){
if(buttons[i].className=='on'){
buttons[i].className='';
}
}
buttons[index-1].className='on';
}
prev.onclick=function(){
index-=1;
if(index<1)
{
index=5;
}
buttonsshow();
animate(600);
};
next.onclick=function(){
index+=1;
if(index>5){
index=1;
}
buttonsshow();
animate(-600);
};
//自动播放
vartimer;
functionplay(){
timer=setInterval(function(){
next.onclick();
},1000)
}
play();
functionstop(){
clearInterval(timer);
}
container.onmouseover=stop;
container.onmouseout=play;
for(vari=0;i<buttons.length;i++){
(function(i){
buttons[i].onclick=function(){
varclickindex=parseInt(this.getAttribute('index'));
varoffset=600*(index-clickindex);
animate(offset);
index=clickindex;
buttonsshow();
}
})(i);
}
}
</script>
</body>
</html>
以上所述是小编给大家介绍的纯JS实现轮播图，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！