JavaScript中怎么实现无缝轮播图

发布时间:2021-08-09 17:24:40 作者:Leah
来源:亿速云 阅读:114

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

html结构

<p class="wrapper">  <p class="inner">    <ul>      <li>页面1</li>      <li>页面2</li>      <li>页面3</li>      <li>页面4</li>      <li>页面5</li>      <li>页面1</li>    </ul>    <p class="circle">      <span class="current">1</span>      <span>2</span>      <span>3</span>      <span>4</span>      <span>5</span>    </p>    <p class="direction">      <span class="left"><</span>      <span class="right">></span>    </p>  </p></p>

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)}

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注亿速云行业资讯频道,感谢您对亿速云的支持。

推荐阅读:
  1. jq实现无缝轮播图效果的方法是什么
  2. js实现无缝轮播图特效的方法

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

javascript

上一篇:JavaScript中怎么实现中文实时时钟

下一篇:JavaScript中怎么实现计数排序

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》