原生js和css实现图片轮播效果
本文实例为大家分享了javascript图片轮播效果的具体代码,供大家参考,具体内容如下
<!DOCTYPEHTML> <htmllang="zh-CN"> <head> <metacharset="utf-8"> <title>图片轮播</title> <style> #box{ width:506px; height:306px; margin:20pxauto; border:3pxsolidblack; position:relative; background-color:orange; overflow:hidden; /*overflow:hidden;*/ } .pic{ position:absolute; width:500px; height:300px; line-height:300px; text-align:center; font-size:100px; color:white; bottom:0; } .red{ background-color:red; } .green{ background-color:green; } .blue{ background-color:blue; } .orange{ background-color:orange; } .move{ bottom:300px; transition:bottom3s;/*设置图片移动消耗的时间*/ } </style> </head> <body> <divid="box"> <divid="pic1"class="picred">1</div> <divid="pic2"class="picgreen">2</div> <divid="pic3"class="picblue">3</div> <divid="pic3"class="picorange">4</div> </div> <script> window.addEventListener('load',function(){ varpics=document.getElementsByClassName('pic'); //为每个pic元素设置z-index的值 for(leti=0;i<pics.length;i++){ pics[i].style.zIndex=pics.length-i; } //循环播放图片的函数 varloopPics=(function(){ varindex=0; returnfunction(pics,delay){ varrecall=function(pic){ //给图片增加move类,调用css的transition属性播放移动动画 pic.className+='move'; setTimeout(function(){ //取消图片的move类,图片返回原位 pic.className=pic.className.replace('move',''); //改变图片组的堆叠顺序。最外的图片放到最下面,其他图片依次向外移动 for(leti=0;i<pics.length;i++){ if(pics[i].style.zIndex==pics.length){ pics[i].style.zIndex=1; }else{ pics[i].style.zIndex=pics[i].style.zIndex*1+1; } } index++; if(index==pics.length)index=0; recall(pics[index]); },delay); }; recall(pics[index]); }; })(); //调用函数,循环播放。delay的时间需要大于等于css动画里设置的图片移动时间 loopPics(pics,4000); }); </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。