最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
纯JS实现轮播图
时间:2017-04-29 编辑:简简单单 来源:一聚教程网
这几天一直在看js动画,今天又get到了一个轮播图,使用纯js实现的,但是没有美化哈,需要的小伙伴自己美化喔
如下代码:
代码如下 | 复制代码 |
* { margin: 0; padding: 0; text-decoration: none; } body { padding: 20px; } #container { position: relative; width: 600px; height: 400px; border: 3px solid#333; overflow: hidden; } #list { position: absolute; z-index: 1; width: 4200px; height: 400px; } #list img { float: left; width: 600px; height: 400px; } #buttons { position: absolute; left: 250px; bottom: 20px; z-index: 2; height: 10px; width: 100px; } #buttons span { float: left; margin-right: 5px; width: 10px; height: 10px; border: 1px solid#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; }
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 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 (function(i){ buttons[i].onclick=function(){ varclickindex= parseInt(this.getAttribute('index')); varoffset = 600*(index-clickindex); animate(offset); index = clickindex; buttonsshow(); } })(i); } } |
相关文章
- js实现音乐播放器代码展示 10-12
- js实现图片查看器代码展示 10-12
- JS中switch的四种写法介绍 10-12
- js实现新闻轮播效果教程 10-11
- JS实现简单的图片切换功能教程 10-11
- js实现下拉刷新和上拉加载解析 09-28