网页里比较常见的一种特效就是图片轮播，今天就来教大家自己来编写一个最简单的图片轮播特效。
工具/原料
html+css+js基础、notepadd编辑器或者记事本或者其他任意一款网页编辑器
几张张长方形美图和2个小图标
方法/步骤
1、新建项目文件夹如下图所示
2、编写index.html文件，代码如下：<DOCTYPEhtml>挢旗扦渌;<html><head媪青怍牙><metacharset="utf-8"/><title>lunbo</title><linkhref="css/style.css"rel="stylesheet"/><scriptsrc="js/lunbo.js"></script></head><body><divid="container"><divid="list"style="left:-600px;"><imgsrc="images/5.jpg"alt="5.pg"/><imgsrc="images/1.jpg"alt="5.pg"/><imgsrc="images/2.jpg"alt="5.pg"/><imgsrc="images/3.jpg"alt="5.pg"/><imgsrc="images/4.jpg"alt="5.pg"/><imgsrc="images/5.jpg"alt="5.pg"/><imgsrc="images/1.jpg"alt="5.pg"/></div><divid="buttons"><spanindex="1"class="on"></span><spanindex="2"></span><spanindex="3"></span><spanindex="4"></span><spanindex="5"></span></div><ahref="javascript:;"class="arrow"id="prev"><</a><ahref="javascript:;"class="arrow"id="next">></a></div></body></html>
3、编写style.css文件，代码如下：*{margin:0px;text-decoration:none;}body{margin-top:50px;}#container{width:600px;height:400px;position:relative;border:3pxsolid#333;overflow:hidden;margin:0auto;}#list{width:4200px;height:400px;position:absolute;z-index:1;}#listimg{float:left;}#buttons{position:absolute;height:10px;width:100px;z-index:2;bottom:20px;left:250px;}#buttonsspan{cursor:pointer;/*假超链接样式*/float:left;border:1pxsolid#fff;width:10px;height:10px;border-radius:10px;background:#333;margin-right:5px;}#buttons.on{background:orangered;}.arrow{cursor:pointer;display:none;line-height:39px;text-align:center;font-size:36px;font-weight:bold;width:40px;height:40px;position:absolute;z-index:2;top:180px; background-color:RGBA(0,0,0,.3);color:#fff;}.arrow:hover{background-color:RGBA(0,0,0,.7);}#container:hover.arrow{display:block;}#prev{left:20px;}#next{right:20px;}
4、编写control.js文件代码如下window.onload=functio艘绒庳焰n(){ varcontainer=docu罪焐芡拂ment.getElementById('container'); varlist=document.getElementById('list'); varbuttons=document.getElementById('buttons').getElementsByTagName('span'); varpre=document.getElementById('prev'); varnext=document.getElementById('next'); varindex=1; varanimated=false; vartimer; functionshowButton(){ for(vari=0;i<buttons.length;i++){ if(buttons[i].className=='on'){ buttons[i].className=''; break; } } buttons[index-1].className="on"; } functionanimate(offset){ animated=true; varnewleft=parseInt(list.style.left)+offset; vartime=300;//位移总时间 varinterval=10;//位移间隔时间 varspeed=offset/(time/interval);//每一次的位移量 functiongo(){ if((speed<0&&parseInt(list.style.left)>newleft)||(speed>0&&parseInt(list.style.left)<newleft)){ list.style.left=parseInt(list.style.left)+speed+'px'; setTimeout(go,interval); } else{ animated=false; list.style.left=newleft+'px'; if(newleft>-600){ list.style.left=-3000+'px'; } if(newleft<-3000){ list.style.left=-600+'px'; } } } go(); } functionplay(){ timer=setInterval(function(){ next.onclick(); },3000); } functionstop(){ clearInterval(timer); } next.onclick=function(){ if(index==5){ index=1; } else{ index+=1; } showButton(); if(animated==false){ animate(-600); } } pre.onclick=function(){ if(index==1){ index=5; } else{ index-=1; } showButton(); if(animated==false){ animate(600); } } for(vari=0;i<buttons.length;i++){ buttons[i].onclick=function(){ if(this.className=='on'){ return; } varmyIndex=parseInt(this.getAttribute('index')); varoffset=-600*(myIndex-index); index=myIndex; showButton(); if(animated==false){ animate(offset); } } } container.onmouseover=stop; container.onmouseout=play; play(); }
5、images文件的图片截图如下
6、运行效果截图如下：
