JS实现动画特效1（自动/手动播放的轮播图，可实现点击索引的圆点后跳转到对应图）

本文链接：https://blog.csdn.net/weixin_44584059/article/details/108277495

JS实现动画特效——轮播图

基础——点击移动滑块
进阶——手动轮播图
轮播图自动播放

基础——点击移动滑块

HTML

   <!-- 点击移动滑块S -->
    <h1>点击移动滑块,实现轮播图奠基</h1>
    <div class="slider">
        <button id="slider_btn1">点击向右移动滑块400px</button>
        <div id="slider_demo1"></div>
        <button id="slider_btn2">点击向右移动滑块600px</button>
        <div id="slider_demo2"></div>
    </div>
    <script src="./js/script.js"></script>
    <!-- 点击移动滑块E -->

CSS

/* // 点击移动滑块s */
#slider_demo1 {
    width: 200px;
    height: 200px;
    margin-top: 20px;
    border: 1px solid blue;
    background-color: blue;
    /* 一定要加定位才能实现滑动 */
    position: absolute;
}

#slider_demo2 {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    background-color: red;
    /* 一定要加定位才能实现滑动 */
    position: absolute;
    top: 400px;
}

js

     // 点击移动滑块s
    var timer = null;
    var btn1 = document.getElementById("slider_btn1");
    var btn2 = document.getElementById("slider_btn2");
    var demo1 = document.getElementById("slider_demo1");
    var demo2 = document.getElementById("slider_demo2");

    btn1.onclick = function () {
        animate(demo1, 400);
    };
    btn2.onclick = function () {
        animate(demo2, 600);
    };

    function animate(obj, target) {
        // 清除计时,防止重复点击 重复计时
        clearInterval(obj.timer);
        // 开始计时
        obj.timer = setInterval(function () {
            var leader = obj.offsetLeft;
            var step = 10;
            if (leader < target) {
                leader = leader + step;
                obj.style.left = leader + "px";
            } else {
                // 清除计时
                clearInterval(obj.timer);
            }
        }, 15);
    }
    // 点击移动滑块E

效果图

在这里插入图片描述

注意

1.一定得给移动的滑块加上position:absolute才能实现滑动

2.将滑动的代码封装为animate函数，便于调用

进阶——手动轮播图

HTML

    <!-- 轮播图S -->
        <h1 style="margin-top: 600px;">轮播图</h1>
        <div class="slider_box" id="slider_box">
            <div class="sd_btn">
                <span>1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
            </div>
            <a href="javascript:;" class="arrow arrow_left">&lt;</a>
            <a href="javascript:;" class="arrow arrow_right">&gt;</a>

            <div class="sd_inner" style="left: -300px;">
                <img src="./img/tower.jpg" alt="">
                <img src="./img/NEUQ.jpg" alt="">
                <img src="./img/play.jpg" alt="">
                <img src="./img/triver.jpg" alt="">
                <img src="./img/tower.jpg" alt="">
                <img src="./img/NEUQ.jpg" alt="">
            </div>
            <script src="./js/script.js"></script>
        </div>
        <!-- 轮播图E -->

CSS


/* // 轮播图S */
.slider_box {
    position: relative;
    width: 300px;
    height: 400px;
    box-shadow: 0 0 5px pink;
    overflow: hidden;
}

.sd_inner {
    position: absolute;
    width: 1800px;
    height: 400px;
    z-index: 1;
}

.slider_box .sd_inner img {
    float: left;
    width: 300px;
    height: 400px;
}

.slider_box .sd_btn {
    position: absolute;
    left: 150px;
    bottom: 20px;
    widows: 100px;
    height: 10px;
    z-index: 2;
}

.slider_box .sd_btn span {
    margin-right: 5px;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: pink;
    color: aliceblue;
    text-align: center;
    cursor: pointer;
}

.slider_box .sd_btn span.on {
    background-color: rgb(189, 214, 79);
}

.slider_box .arrow {
    position: absolute;
    top: 35%;
    color: pink;
    padding: 0 14px;
    border-radius: 50%;
    font-size: 50px;
    z-index: 2;
    display: none;
}

.slider_box .arrow_left {
    left: 10px;
}

.slider_box .arrow_right {
    right: 10px;
}

.slider_box:hover .arrow {
    display: block;
}

.slider_box .arrow:hover {
    background-color: rgba(0, 0, 0, 0.2);
}

/* // 轮播图E */

JS


  
// 轮播图→手动轮播S

// 设置小圆点显示S
var index = 0;
var dots = document.getElementsByTagName("span");

function showCurrentDot() {
  for (var i = 0, len = dots.length; i < len; i++) {
    dots[i].className = "";
  }
  dots[index].className = "on";
}

// 设置小圆点显示E

var sd_inner = document.querySelector(".sd_inner");
var next = document.querySelector(".arrow_right");
var prev = document.querySelector(".arrow_left");

function next_pic() {
  var newLeft;
  if (sd_inner.style.left === "-1200px") {
    newLeft = -300;
  } else {
    newLeft = parseInt(sd_inner.style.left) - 300;
  }
  sd_inner.style.left = newLeft + "px";
  index++;
  if (index > 3) {
    index = 0;
  }
  showCurrentDot();
}

function prev_pic() {
  var newLeft;
  if (sd_inner.style.left === "0px") {
    newLeft = -1200;
  } else {
    newLeft = parseInt(sd_inner.style.left) + 300;
  }
  sd_inner.style.left = newLeft + "px";
  index--;
  if (index < 0) {
    index = 3;
  }
  showCurrentDot();
}
next.onclick = function () {
  next_pic();
};
prev.onclick = function () {
  prev_pic();
};
// 轮播图→手动轮播E

注意

1.实现无缝轮播，轮播4张图，需要6张一起轮播

2.sd_inner.style.left是一个字符串，所以要通过parseInt（）函数，将其转化为数字才能进行计算，再加上px成为一个字符串来设定sd_inner

3.实现无缝衔接，需要在JS中进行一个小计算，如当前是最后一张图，其left:-1200px,需要下一张图显示第一张图，则设置其newLeft = -1200;然后进行parseInt（）转换，第一张图向前调整同理。

4.onmouseenter实现用户放到图片后不再自动显示，onmouseleave实现继续自动播放。

实现效果

在这里插入图片描述

轮播图自动播放

1.实现轮播


// 轮播图→自动轮播S
var timer = null;

function autoPlay() {
  timer = setInterval(function () {
    next_pic();
  }, 1000);
}
autoPlay();
var slider_box = document.querySelector(".slider_box");
// 鼠标放上后停止自动轮播
slider_box.onmouseenter = function () {
  clearInterval(timer);
};
slider_box.onmouseleave = function () {
  autoPlay();
};

// 轮播图→自动轮播E

2.实现点击小圆点，显示对应图片

1.写一个显示当前图片显示的索引的函数

    function showCurrentDot() {
        for (var i = 0, len = dots.length; i < len; i++) {
            dots[i].className = "";
        }
        dots[index].className = "on";
    }

2.写一个闭包函数

for (var i = 0, len = dots.length; i < len; i++) {
  (function (i) {
    dots[i].onclick = function () {
      var dis = index - i;
      if (index == 3 && parseInt(sd_inner.style.left) !== -1200) {
        dis = dis - 4;
      }
      //和使用prev和next相同，在最开始的照片4和最终的照片1在使用时会出现问题，导致符号和位数的出错，做相应地处理即可
      if (index == 0 && parseInt(sd_inner.style.left) !== -300) {
        dis = 4 + dis;
      }
      sd_inner.style.left = parseInt(sd_inner.style.left) + dis * 300 + "px";
      index = i;
      showCurrentDot();
    };
    console.log(i);
  })(i);
}

3.分别在prev和next函数中加入index加减的代码，并调用 showCurrentDot();

//next函数
 index++;
        if (index > 4) {
            index = 0;
        }
        showCurrentDot();
//prev函数
index--;
        if (index < 0) {
            index = 4;
        }
          showCurrentDot();

在这里插入图片描述