绵阳梓潼网站制作公司

原生js怎么实现无缝轮播图-创新互联

这篇文章给大家分享的是有关原生js怎么实现无缝轮播图的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创新互联长期为上千余家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为常山企业提供专业的网站设计制作、成都做网站，常山网站改版等技术服务。拥有十年丰富建站经验和众多成功案例,为您定制开发。

具体内容如下

先上效果图

原生js怎么实现无缝轮播图

原理图

原生js怎么实现无缝轮播图

如图可见，是页面按顺序依次显示5张图片，包裹这五张图片的外层的盒子，我们叫ul，通过向左或右移动不同距离，实现在视图中显示的不同的图片，实现轮播，而同时下面的分页小球需要根据当前显示的内容进行点亮；

而无缝轮播图需要在第五张图片后面再加上第一张图片，这样通过右侧箭头，向右切换，当页面切换到第六张时，也就是最后一张图片，此时需要将ul的位置设置为第一张图的位置，然后从第一张图片滑动到第二张，形成一个无缝过渡；

同理，样通过左侧箭头，向左切换，已经显示到第一张图片时，再向左切换，ul会设置为到第五张图的位置，形成一个无缝过渡

html结构


 
  
    
   
  • 页面1
    • 
   
  • 页面2
    • 
   
  • 页面3
    • 
   
  • 页面4
    • 
   
  • 页面5
    • 
   
  • 页面1
    • 
  

  
   1
   2
   3
   4
   5
  
      <    >   
 

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;ispanArr.length){
   ul.style.left=0;
   dindex=1;
  }
  animation(ul,-dindex*innerWidth);
  span++;
  if(span>spanArr.length-1){
   span= 0;
  }
  for(var k= 0 ; k0? Math.ceil(step):Math.floor(step);
   //当前位置= 盒子的位置+步长
   leader = leader +step;
   ele.style.left = leader+"px";
   if(ele.offsetLeft === target) {
    clearInterval(ele.timer);
   }
  },30)
 
}

感谢各位的阅读！关于“原生js怎么实现无缝轮播图”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！


分享名称：原生js怎么实现无缝轮播图-创新互联
浏览地址：http://myzitong.com/article/cedejj.html

其他资讯