JavaScript中怎么实现无缝轮播图-创新互联

JavaScript中怎么实现无缝轮播图，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

成都创新互联公司是一家专注于网站设计制作、成都网站制作与策划设计,上蔡网站建设哪家好?成都创新互联公司做网站,专注于网站建设10年,网设计领域的专业建站公司;建站业务涵盖:上蔡等地区。上蔡做网站价格咨询:18982081108

html结构

js代码

//获取页面元素 var ul = document.getElementsByTagName("ul")[0]; var inner = document.getElementsByClassName("inner")[0]; var circle = document.getElementsByClassName("circle")[0]; var spanArr = circle.children; var direction =document.getElementsByClassName("direction")[0]; var dirChid=direction.children; var innerWidth = inner.offsetWidth; //两个定时器（一个记录图片，一个记录小圆球） var dindex = 0; var span = 0; //var ulNewLi = ul.children[0].cloneNode(true); // ul.appendChild(ulNewLi); for(var i = 0;i<spanArr.length;i++){ //给每个span绑定index，为了和ul中的页面联动 spanArr[i].index = i; spanArr[i].onmouseover = function () { //点击分页小球，添加current类，current类定义了小球的背景颜色 for (var j = 0; j<spanArr.length ;j++) { spanArr[j].className = ""; } this.className = "current"; dindex = span = this.index; //调用缓动函数，传入参数：移动元素，目标距离 animation(ul,-this.index*innerWidth); } } //为左箭头绑定事件 //dindex 记录图片的索引，span记录小球的索引，图片个数为6，小球的个数为5 dirChid[0].οnclick=function (event) { //每次点击左切换，图片的索引减一，小球的索引减一 dindex--; //图片的索引<0时，设置ul的位置为第五个图片的位置 if(dindex<0){ ul.style.left= -innerWidth*spanArr.length+"px"; dindex= spanArr.length-1; } animation(ul,-dindex*innerWidth); //小球的索引减一 span--; //当小球索引小于0时，设置它的索引为4 if(span<0){ span= spanArr.length-1; } //点亮小球 for(var i= 0 ; i<spanArr.length;i++){ spanArr[i].className = ""; } spanArr[span].className = "current"; } //为右箭头绑定事件， dirChid[1].οnclick=function () { dindex++; //图片的索引大于小球长度个数时，设置ul的位置为第1张图片的位置 if(dindex>spanArr.length){ ul.style.left=0; dindex=1; } animation(ul,-dindex*innerWidth); span++; if(span>spanArr.length-1){ span= 0; } for(var k= 0 ; k<spanArr.length;k++){ spanArr[k].className = ""; } spanArr[span].className = "current"; } //封装缓动动画函数 function animation(ele,target) { clearInterval(ele.timer); ele.timer=setInterval(function () { //获取起使位置 leader= ele.offsetLeft; //获取缓动动画步长 var step = (target-leader)/10; //支持不同方向的移动，所以步长有正有负 step = step >0? Math.ceil(step):Math.floor(step); //当前位置= 盒子的位置+步长 leader = leader +step; ele.style.left = leader+"px"; if(ele.offsetLeft === target) { clearInterval(ele.timer); } },30)}

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注创新互联行业资讯频道，感谢您对创新互联网站建设公司，的支持。

网站名称：JavaScript中怎么实现无缝轮播图-创新互联
文章位置：https://www.cdcxhl.com/article10/dhjcgo.html

成都网站建设公司_创新互联，为您提供品牌网站制作、域名注册、App设计、面包屑导航、网站导航、外贸网站建设

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容