原生JS写的幻灯片

学习PHP时期，为了练习Javascript而写的幻灯片函数，个人认为还算简单使用啊，兼容性也算可以
//幻灯片<br> <br>     //该幻灯片函数只需要html页面有一个有id的div即可,将id值和图片路径数组传入即可调用,其他参数有默认值,可按需传值<br>     function slide(sid,imgs,width,height,btn_w,btn_h,interval,speed){<br> <br>         //幻灯片的属性<br>         var sid=sid;//幻灯片容器div的id值<br>         var imgs=imgs;//幻灯片图片的路径数组<br>         var width=width||800;//幻灯片的宽度,默认800px<br>         var height=height||400;//幻灯片的高度,默认400px<br>         var btn_w=btn_w||30;//幻灯片图片的宽度,默认30px<br>         var btn_h=btn_w||30;//幻灯片图片的高度,默认30px<br>         var interval=interval||3;//每张图片停留的秒数,默认3秒<br>         var speed=speed||2;//图片滑动速度的档位,默认2档,可以1档,3档<br> <br>         var images=[];//用来存放图片对象的数组<br>         var imgQty=imgs.length;//图片的数量<br>         var curImg=0;//幻灯片当前不滑动图片的数组索引<br>         var nextImg=1;//幻灯片当前滑动的图片的数组索引<br> <br>         var btns=[];//用来存放幻灯片按钮对象的数组<br> <br>         var timer1=null;//用来储存幻灯片播放的超时调用方法<br>         var timer2=null;//用来存储滑动动画的超时调用方法<br> <br>         var isDone = false; //是否滑动完成<br>         <br>         //设置幻灯片的元素的方法<br>         function setElements(){    <br> <br>             //幻灯片容器<br>             var container=document.getElementById(sid);//通过幻灯片容器id得到幻灯片的div元素对象<br>             var btnRow=document.createElement('ul');//创建按钮容器ul<br>             container.appendChild(btnRow);//将按钮容器ul插入幻灯片容器中<br>             <br>             //为幻灯片容器添加事件<br>             container.onmouseover=function(){//鼠标划入停止播放<br>                 clearTimeout(timer1);<br>             }<br>             container.onmouseout=function(){//鼠标划出3秒后继续播放<br>                 timer1=setTimeout(play,3000);<br>             }<br> <br>             //图片和按钮<br>             for(var i=0;i<img qty alt="原生JS写的幻灯片" ></imgqty>                 //创建图片<br>                 images[i]=document.createElement('img');<br>                 //为图片添加src属性<br>                 images[i].src=imgs[i];<br> <br>                 //将图片节点添加到容器中<br>                 container.appendChild(images[i]);<br> <br>                 //创建按钮<br>                 btns[i]=document.createElement('li');//li标签作为图片按钮传入btns数组中<br>                 btns[i].innerHTML=i+1;//给按钮填入序号<br>                 btnRow.appendChild(btns[i]);//将按钮节点添加到按钮栏中<br> <br>                 //为按钮添加事件<br>                 btns[i].onmouseover = switchImg;<br>                 btns[i].onclick = switchImg;<br> <br>             }<br>             <br>             //为幻灯片的元素添加css属性<br>             var head=document.getElementsByTagName('head')[0];//获取头标签<br>             var style=document.createElement('style');//创建style标签<br>             head.appendChild(style);//将style标签插入头标签中<br>             //设置css字符串<br>             var css="#slide{position:relative;width:800px;height:400px;overflow:hidden;}ul{position:absolute;right:20px;bottom:10px;z-index:9;}img{width:800px;height:400px;left:0px;top:0px;position:absolute;}li{width:30px;height:30px;margin-right:10px;float:left;background:#ccc;list-style:none;text-align:center;line-height:30px;border-radius:50%;opacity:0.8}";<br>             //css样式兼容性设计<br>             try{<br>                 style.appendChild(document.createTextNode(css));//非IE<br>             }catch(e){<br>                 style.styleSheet.cssText=css;//IE<br>             }<br> <br>             //第一次加载默认的图片层级和滑动图片的位置<br>             images[0].style.zIndex=1;//播放开始让第一幅图片为不滑动图片,层级为1<br>             images[1].style.zIndex=2;//播放开始让第二幅图片为滑动图片,层级为2<br>             images[1].style.left=width+'px';//第二幅图的位置调整到容器的右侧准备滑动<br>         <br>         }<br> <br>         //将幻灯片的元素插入页面<br>         setElements();<br> <br> <br>         //幻灯片的方法<br> <br>         //切换图片的方法<br>         function switchImg(){<br> <br>             //触发该事件的按钮的索引<br>             var btnIndex = this.innerHTML - 1;<br> <br>             //滑动完成并且触发不同的按钮的事件才会执行变换<br>             if (isDone && btnIndex != curImg) {<br> <br>                 clearTimeout(timer2);//停止之前的图片滑动<br>                 //将滑动图片立即转换为当前不滑动图片<br>                 images[curImg].style.left='0px';<br>                 images[curImg].style.zIndex=1;<br>                 //将滑动图片对应的按钮立即转换为浅色<br>                 btns[nextImg].style.background='#ccc';<br>                 btns[nextImg].style.color='#000';<br>                 //将滑动图片的数组索引更改为当前按钮对应的图片的数组索引<br>                 nextImg=this.innerHTML-1;<br>                 // //将要滑动的图片移动到容器右侧,层级设为最高,准备滑动<br>                 images[nextImg].style.left=width+'px';<br>                 images[nextImg].style.zIndex=2;<br>                 //立即滑动<br>                 move();<br>             }<br>                         <br>         }<br> <br>         //让图片完整的滑动一次的方法<br>         function move(){<br>             //滑动开始<br>             isDone = false;<br>             //将上一张滑动图片的样式和下一张滑动图片的样式做一下改变<br>             btns[curImg].style.background='#ccc';<br>             btns[curImg].style.color='#000';<br>             btns[nextImg].style.background='#333';<br>             btns[nextImg].style.color='#fff';<br> <br>             if(parseInt(images[nextImg].style.left) > 0){//判断滑动图片的left是否达到0位置<br>                 images[nextImg].style.left=Math.floor((parseInt(images[nextImg].style.left)-(parseInt(images[nextImg].style.left)-0)/(30/speed)))+'px';//没到达则每次滑动剩下路程的25分之一<br>                 timer2=setTimeout(move,10);//超时调用slide,用递归加setTimeout模仿setInterval<br>             }else{//滑动图片的left到达0位置<br>                 clearTimeout(timer2);//销毁滑动的延时调用方法<br>                 //所有图片的层级重置为0<br>                 for (var i = 0; i                      images[i].style.zIndex = 0;<br>                 }<br>                 curImg = nextImg;//将滑动完的图片的数组索引赋给不滑动图片的数组索引变量<br>                 nextImg == (imgQty - 1) ? nextImg = 0 : nextImg ++;//判断滑动完的图片的是否最后一张,是则赋为0,否则加1<br>                 //重新设置新一轮的不滑动图片和滑动图片图片的定位和层级属性<br>                 images[curImg].style.left='0px';<br>                 images[curImg].style.zIndex=1;<br>                 images[nextImg].style.left=width+'px';<br>                 images[nextImg].style.zIndex=2;    <br>                 //滑动完成<br>                 isDone = true;                <br>             }<br>         }<br> <br>         //循环播放的方法<br>         function play(){<br>             move();<br>             timer1=setTimeout(play,interval*1000);//停留三秒钟<br>         }<br>         //立即播放<br>         play();            <br>     }

AD：真正免费，域名+虚机+企业邮箱=0元