原生Js 实现的简单无缝滚动轮播图的示例代码

   简单无缝滚动轮播图存在很多漏洞，就是后期增加图片时会很不方便，需要改动的地方也很多，耦合性也很强，只适用于一部分程序，所以我们可以通过改动图片结构和计算折算点的方式，升级代码。

      原简单的滚动轮播代码

   在

结构给ul新增的一个父级div，这样之后添加图片，后期通过获取ul宽度就可以了计算折算点
   1、折返点计算需要通过Js自动计算
   var back = -munit.offsetWidth;//元素左移，值为负数
   2、自动生成另一组对应的图片结构 li
   munit.innerHTML = munit.innerHTML + munit.innerHTML;//这样就会增加一组li标签，后期增加图片也会随之增加
修改部分代码，

css改写部分：
  /*给ul新增的一个父级div，这样添加图片后期获取ul宽度 就可以了 */
        .scroll .inner{
            position: relative;
            width: 5000px;
        }
        .scroll ul{
            position: absolute;
            height: 130px;
            top: 0;
            left: 0;
            list-style: none;


body改写部分：      

    

       

           

              

              

              

              

              

              

              

              

          
       
    

JS改写部分：

这样的代码耦合性低，也适合任意个数的li、任意大小的图片的加入

以上就是原生Js 实现的简单无缝滚动轮播图的示例代码的详细内容，更多关于Js 实现的简单无缝滚动轮播图的资料请关注脚本之家其它相关文章！