时间:2021-05-25
本文实例为大家分享了javascript图片轮播效果的具体代码,供大家参考,具体内容如下
<!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>图片轮播</title> <style> #box { width:506px; height:306px; margin: 20px auto; border:3px solid black; position:relative; background-color:orange; 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:bottom 3s; } </style> </head> <body> <div id="box"> <div id="pic1" class="pic red">1</div> <div id="pic2" class="pic green">2</div> <div id="pic3" class="pic blue">3</div> <div id="pic3" class="pic orange">4</div> </div> <script> window.addEventListener('load',function(){ var pics = document.getElementsByClassName('pic'); //为每个pic元素设置z-index的值 for(let i=0;i<pics.length;i++){ pics[i].style.zIndex = pics.length-i; } //循环播放图片的函数 var loopPics = (function(){ var index=0; return function(pics,delay){ var recall = function(pic){ //给图片增加move类,调用css的transition属性播放移动动画 pic.className += ' move'; setTimeout(function(){ //取消图片的move类,图片返回原位 pic.className=pic.className.replace(' move',''); //改变图片组的堆叠顺序。最外的图片放到最下面,其他图片依次向外移动 for(let i=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>以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了JS实现简易图片轮播效果的方法。分享给大家供大家参考。具体如下:这里使用JS制作简易图片轮播效果:制作比较粗糙,使用的图片是width:660pp
本文实例为大家分享了js+html+css实现手动轮播和自动轮播的具体代码,供大家参考,具体内容如下原理:设置图片层的总长=单张图片长度*张数;在轮播层中利用o
原生js实现轮播图效果(无缝滚动),供大家参考,具体内容如下效果图:代码:Document*{margin:0;padding:0;}li{list-style
原生JS仿小米轮播图(最新版易懂),供大家参考,具体内容如下本次内容主要可实现的效果:自动轮播可点击上一张下一张进行图片的切换点击右下方小圆点进行图片切换代码部
本文实例讲解了js图片轮播效果的实现原理,分享给大家供大家参考,具体内容如下两种图片轮播实现方案,先来看效果对比:方案一:原理:将图片摆成一行,从左到右依次滚动