Js无缝轮播图

无缝轮播一：（精准版）

Js部分：

// 获得元素
    var slider = document.getElementById("slider");
    var ul = slider.children[0].children[0];  //
    var ullis = ul.children;  //所有的li

    // 1、动态复制最后一张图
    ul.appendChild(ullis[0].cloneNode(true));  //子节点一起克隆

    // 2、动态生成小圆点
    var ol = document.createElement("ol");
    slider.appendChild(ol);
    for (var i = 0; i < ullis.length - 1; i++) {
      var li = document.createElement("li");
      li.innerHTML = i + 1;
      ol.appendChild(li);
    }
    ol.children[0].setAttribute("class", "current");

    // 3、鼠标经过小圆点  圆点事件
    var ollis = ol.children;
    for (var i = 0; i < ollis.length; i++) {
      ollis[i].index = i; // 自定义属性
      ollis[i].onmouseover = function () {
        for (var j = 0; j < ollis.length; j++) { // 去掉所有小圆点的class
          ollis[j].removeAttribute("class");
        }
        ollis[this.index].setAttribute("class", "current"); // 保留当前小圆点的class

        // 图片动画
        animate(ul, -this.index * ullis[0].offsetWidth);

        key = point = this.index; // 从当前开始动画
      }
    }

    // 缓动动画函数
    var leader = 0;//缓动动画变量
    function animate(obj, target) {
      clearInterval(obj.timer); // 清除定时器
      /*定时任务，缓动轮播 30毫秒到target位置*/
      obj.timer = setInterval(function () {
        leader = leader + (target - leader) / 10;//缓动动画公式
        obj.style.left = leader + "px";
      }, 10);
    }

    // 4、轮播图定时器
    var timer = null;
    timer = setInterval(autoplay, 3000);
    var key = 0; // 控制播放张数
    var point = 0; // 控制小圆点
    function autoplay() {
      // 播放张数
      key++;
      if (key > ullis.length - 1) { // 判断是否播放完
        leader = 0; // 迅速跳回
        key = 1; // 下次播放第二张
      }
      animate(ul, -key * ullis[0].offsetWidth);


      // 小圆点
      point++;
      if (point > ollis.length - 1) {
        point = 0;
      }
      for (var i = 0; i < ollis.length; i++) { // 先清除所有的
        ollis[i].removeAttribute("class");
      }
      ollis[point].setAttribute("class", "current") // 再保留现在的
    }

    // 5、鼠标经过事件
    slider.onmouseover = function () {
      clearInterval(timer);
    }
    slider.onmouseout = function () {
      timer = setInterval(autoplay, 3000);
    }

div部分：

无缝轮播图二：（粗糙版）

Js部分：

var pre = document.getElementById("pre");
    var next = document.getElementById("next");
    var view = document.getElementById("view");
    var banner = document.getElementById("banner");

    function nextImg() {
        $_animation(banner, "marginLeft", -960, 1000, function () {
            banner.style.marginLeft = 0;
            banner.appendChild(banner.children[0]);
        })
    }
    var timer = setInterval(nextImg, 1000);

    // // 点击下一张
    var flag = true;
    next.onclick = function () {
        clearInterval(timer);
        if (flag) {
            $_animation(banner, "marginLeft", -960, 1000, function () {
                banner.style.marginLeft = 0;
                banner.appendChild(banner.children[0]);
                timer = setInterval(nextImg, 1000);
            })
            flag = false;
        }
    }


    // 上一张
    pre.onclick = function () {
        clearInterval(timer);
        if (flag) {
            $_animation(banner, "marginLeft", 0, 1000, function () {
                var len = banner.children.length - 1;
                banner.style.marginLeft = -960 + "px";
                banner.insertBefore(banner.children[len],banner.children[0]);
                timer = setInterval(nextImg, 1000);
            })
            flag = false;
        }  
    }

    banner.onmouseover = function(){
        clearInterval(timer);
    }
    banner.onmouseout = function(){
        timer = setInterval(nextImg, 1000);
    }

div部分：

        

            
            
            
            
            
        
    
    

        上一张
        下一张