js编写无缝轮播图代码示例

本篇文章小编给大家分享一下js编写无缝轮播图代码示例，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

提示：

请让最后一个img和第一个img是一张图片相同

且 li数目为img数目-1；

一、无缝轮播图

让第一张和最后一张相同

type:第一张和最后一张相同；

在最后一张向下一张切换时，立刻跳到第一张 然后向第二张正常切换

二、使用步骤

1.html代码

代码如下（示例）：

css代码

 *{
  margin:0;
  padding:0;
}
 .banner {
      position: relative;
      margin: auto;
      margin-top: 20px;
      
      
      border: 1px solid #000;
      overflow: hidden;
    }

    .banner ul {
      position: relative;
      
    }

    .banner ul li {
      
      height: 100%;
      float: left;
    }

    .banner ul img {
      
      height: 100%;
      object-fit: cover;
    }

    .banner>div {
      position: absolute;
    }

    .banner .qh {
      position: absolute;
      bottom: 0;
      right: 0;
      
      z-index: 1;
    }

    .banner .qh div {
      margin-right: 10px;
      
      
      background: transparent;
      border: 1px solid #f0f;
      border-radius: 5px;
      float: left;
      z-index: 1;
    }
    .left{
      top: 0;
      bottom: 0;
      margin: auto;
      
      
      background: #f0f;
      left: 0;
      z-index: 1;
    }
    .right{
      top: 0;
      bottom: 0;
      margin: auto;
      
      background: #f0f;
      
      right: 0;
      z-index: 1;
    }

2.js代码

代码如下：

startMove是一个运动框架 缓冲运动；当然你也可以用其他的

var odiv = document.querySelector(".banner");
var oul = document.querySelector(".banner_img");
var aimg = oul.querySelectorAll("img");
var oqh = document.querySelector(".qh")
var aqh_div = oqh.querySelectorAll("div");
var alist = aimg[0].offsetWidth;
var i=0;
    init();
    function init(){
      for (var j=0; j 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
          // 3. 检测所有运动是否到达目标
          if (objAttr != json[attr]) {
            bStop = false;
          }
          if (attr == "opacity") {
            obj.style.filter = 'alpha(opacity=' + (objAttr + iSpeed) + ')';
            obj.style.opacity = (objAttr + iSpeed) / 100;
          } else {
            obj.style[attr] = objAttr + iSpeed + 'px';// 需要又.属性名的形式改成[]
          }
        }
        if (bStop) { // 表示所有运动都到达目标值
          clearInterval(obj.timer);
          if (fn) {
            fn();
          }
        }
      }, 10);
    }


    /**
     * 获取行间/内联/外部样式，无法设置
     * @param obj
     * @param attr
     */
    function getStyle(obj, attr) {
      if (obj.currentStyle) {
        return obj.currentStyle[attr];
      } else {
        return getComputedStyle(obj, false)[attr];
      }
    }