本文实例为大家分享了js实现简单无缝轮播效果的具体代码,供大家参考,具体内容如下
*{ margin: 0; padding: 0; } #box{ width: 500px; height: 200px; padding: 5px; margin: 50px auto; border: 1px solid #999999; } .inner{ width: 500px; height: 200px; overflow: hidden; position: relative; } ul,ol{ list-style: none; position: absolute; } ul{ width: 3000px; height: 200px; } li{ float: left; } ol{ right: 20px; bottom: 20px; } ol>li{ width: 25px; height: 25px; line-height: 25px; text-align: center; background-color: #fff; border-radius: 50%; margin-right: 10px; cursor: pointer; } ol>li.current{ background-color: orange; color: white; } .control{ display: none; } .control>span{ position: absolute; top: 50%; margin-top: -20px; display: inline-block; width: 25px; height: 40px; line-height: 40px; background-color: rgba(0,0,0,0.3); color: white; font-size: 20px; cursor: pointer; text-align: center; } .right{ right: 0; }
<div id="box"> <div class="inner"> <ul> <li><img src="/UploadFiles/2021-04-02/1.jpg">var box=document.getElementById("box"); var ul=box.getElementsByTagName("ul")[0]; var ol=box.getElementsByTagName("ol")[0]; var olLiArr=ol.children; var control=box.getElementsByClassName("control")[0]; ul.appendChild(ul.children[0].cloneNode(true)); var index=0; var circleIndex=0; var timer=setInterval(autoPlay,2000); //鼠标移入移出 box.onmouseover=function () { clearInterval(timer); control.style.display="block"; }; box.onmouseout=function () { timer=setInterval(autoPlay,2000); control.style.display="none"; }; //小圆点 for (var i=0;i<olLiArr.length;i++) { olLiArr[i].index=i; olLiArr[i].onclick=function () { if(index===5){ ul.style.left=0; index=0; } for (var i=0;i<olLiArr.length;i++){ olLiArr[i].removeAttribute("class"); } this.setAttribute("class","current"); animate_constSpeed_x(ul,-this.index*500); index=this.index; circleIndex=this.index; } } //左右点击 control.children[1].onclick=function () { autoPlay(); }; control.children[0].onclick=function () { index--; if (index<0){ ul.style.left=-2500+"px"; index=4; } animate_constSpeed_x(ul,-index*500); circleIndex--; if (circleIndex<0){ circleIndex=4; } for (var i=0;i<olLiArr.length;i++) { olLiArr[i].removeAttribute("class"); } olLiArr[circleIndex].setAttribute("class","current"); };//自动轮播封装 function autoPlay() { index++; if (index>5){ ul.style.left=0; index=1; } animate_constSpeed_x(ul,-index*500); circleIndex++; if (circleIndex>4){ circleIndex=0; } for (var i=0;i<olLiArr.length;i++) { olLiArr[i].removeAttribute("class"); } olLiArr[circleIndex].setAttribute("class","current"); } //匀速封装 function animate_constSpeed_x(ele,endX) { clearInterval(ele.timer); var step=(endX-ele.offsetLeft)>0"px"; console.log(1); if(Math.abs(endX-ele.offsetLeft)<=Math.abs(step)){ clearInterval(ele.timer); ele.style.left=endX+"px"; } },10) }以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
js,无缝轮播
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“js实现简单的无缝轮播效果”评论...
更新动态
20240626
20240626
- 瑞鸣音乐《中国音乐地图之听见河南豫剧经典唱段》2020[WAV分轨]
- 【伊比萨沙发】VA-2024-IbizaSpring2024(LoungeCocktailsfromtheHeart)[FLAC]
- 群星《世界顶级汽车音响试音王》4K金碟16CD[WAV+CUE]
- 群星-音效环绕天碟《极致环绕人声天碟天品》7CD[WAV]
- 泰拉克SACD古典试音碟7SACD-ISO
- 群星《红歌宝典》20CD[WAV/分轨]
- 《101系列:好歌101首 细听年代精选》[WAV+CUE][3.6GB]
- 《101系列 6CD 国语经典101首歌曲 张学友 王菲代表作》[APE+CUE][2.8GB]
- 《101系列:国语经典101 VOL2 6CD 精选最经典101首》[WAV+CUE][2.3GB]
- 群星《十年网络红歌》15CD[WAV分轨]
- 宝丽金-环球10周年至50周年经典金曲15CD[低速原抓WAV+CUE]
- FIM唱片《十大男伶》[低速原抓WAV+CUE]
- 《101系列:情歌101 6CD》[WAV+CUE][3.1GB]
- 庄心妍《降调版合集》[320K/MP3][52.96MB]
- 庄心妍《降调版合集》[FLAC/分轨][118.78MB]