js实现简单轮播图上【2021.10.17】

最新推荐文章于 2022-11-24 15:09:55 发布

轻盈的风

最新推荐文章于 2022-11-24 15:09:55 发布

阅读量246

点赞数 1

分类专栏： javascript_笔记专栏文章标签： javascript vue.js html5

本文链接：https://blog.csdn.net/masierty/article/details/120783307

版权

javascript_笔记专栏专栏收录该内容

17 篇文章 1 订阅

订阅专栏

一、想要实现的功能

1.每隔2s切换一次图片

2.点击两边的按钮可以切换图片

我们先实现手动切换轮播图效果，而想要切换丝滑，就得使用视觉错觉

何为视觉错觉？正常情况下从最后一张切换到第一张是不是要滚动老远，看起来不连贯，而视觉错觉就是通过一些操作让用户感觉轮播图是连在一起的是一个完整的轮回。

if(index>2){
          setTimeout(() => {//先过渡0.5s的克隆图，然后用延时器立马到第一张
            imagesBox.style.transition="none";
          index=0;
          imagesBox.style.left=-index*imgWidth+"px";
          }, 500);
      }
      imagesBox.style.transition="0.5s ease";

首先是从最后一张切换到第一张，我们可以先复制第一张并放到list的最后，然后先用复制图度过前0.5s，然后马上切换到第一张并取消过渡动画，一定要取消动画，切换完后把过渡动画在加回来。

然后是第一张切换到最后一张，这个和上面的又不同了，需要用到setTimeout()为异步语句，也就是浏览器内核的定时器触发线程（计时完成添加到任务队列中，等待js引擎处理），简单来说就是后执行。所以我们先取消过渡动画并跳到最后一张图片，然后给延时器设置一个0s后打开过渡动画。

if(index==0){
            imagesBox.style.transition="none";
            index=3;//变到最后一张，也就是复制的第一张,也等于length-1
            imagesBox.style.left=-index*imgWidth+"px";
    setTimeout(() => {
            imagesBox.style.transition="0.5s ease";
            index=2;
            imagesBox.style.left=-index*imgWidth+"px";
    }, 0);
  }else{
      index--;
      imagesBox.style.left=-index*imgWidth+"px";
  }

二、手动轮播图代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        body{
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .leftBut{
            transform: rotate(180deg);
            position: absolute;
            left: 5px;
            top: 48%;
            z-index: 2;
            width: 48px;
        }
        .rightBut{
            position: absolute;
            right: 5px;
            top: 48%;
            z-index: 2;
            width: 48px;
        }
        #imagesBox li{
            list-style: none;
        }
        .maxDiv{
            width: 80%;
            height: 65%;
            border: 1px black solid;
            position: relative;
            overflow: hidden;
        }
        #imagesBox{
            display: flex;
            position: relative;
            left: 0;
            transition: 0.5s ease;
        }

    </style>
</head>
<body>
    <div class="maxDiv">
        <ul id="imagesBox">
            <li><img src="../images/轮播图1.jpg"/></li>
            <li><img src="../images/轮播图2.jpg"/></li>
            <li><img src="../images/轮播图3.jpg"/></li>
        </ul>
        <a href="#"><img class="leftBut" src="../images/白向右.png"></a>
        <a href="#"><img class="rightBut" src="../images/白向右.png"></a>
    </div>
</body>
<script>
    //获取元素和初始化index以及初始化节流锁
     let maxDiv = document.getElementsByClassName("maxDiv")[0];
     let imagesBox = document.getElementById("imagesBox");
     let images = imagesBox.children;
     let leftBut = document.getElementsByClassName("leftBut")[0];
     let rightBut = document.getElementsByClassName("rightBut")[0];
     let imgWidth=maxDiv.offsetWidth;
     let index = 0;
     let lock = true;
     //修改图片大小
    function funLunBo(){
        for(var i =0;i < images.length;i++){
           images[i].style.width=imgWidth+"px";
        }
    }
    funLunBo();

    //右按钮点击事件
    let clonImg=images[0].cloneNode(true);//克隆第一张图片
    imagesBox.appendChild(clonImg);
    rightBut.onclick=function(){
      if(!lock)return;//判断节流锁打开状态
      index++;
      imagesBox.style.left=-index*imgWidth+"px";
      if(index>2){
          setTimeout(() => {//先过渡0.5s的克隆图，然后用延时器立马到第一张
            imagesBox.style.transition="none";
          index=0;
          imagesBox.style.left=-index*imgWidth+"px";
          }, 500);
      }
      imagesBox.style.transition="0.5s ease";
      lock=false;//运行完一次点击后关锁

      //500毫秒之后开锁
      setTimeout(() => {
          lock=true;
      }, 500);
    }//点太快了会有卡顿，等下加个限制

    //左按钮点击事件
    leftBut.onclick=function(){
        if(!lock)return;
        if(index==0){
            imagesBox.style.transition="none";
            index=3;//变到最后一张，也就是复制的第一张,也等于length-1
            imagesBox.style.left=-index*imgWidth+"px";
    setTimeout(() => {
            imagesBox.style.transition="0.5s ease";
            index=2;
            imagesBox.style.left=-index*imgWidth+"px";
    }, 0);
  }else{
      index--;
      imagesBox.style.left=-index*imgWidth+"px";
  }
  lock=false;
  setTimeout(() => {
     lock=true; 
  }, 500);
}
</script>
</html>

三、使用到的图片

用的浪琴官网的图片，侵权立删

四、自动轮播图代码展示

在上面手动轮播的基础上加上下面这一段即可

 //自动播放,每1.8s动一次
    let timer = setInterval(funTimer,2800);//第一个参数不能加括号哦!
    function funTimer(){
    index++;
    imagesBox.style.left=-index*imgWidth+"px";
    if(index>2){
          setTimeout(() => {//先过渡0.5s的克隆图，然后用延时器立马到第一张
          imagesBox.style.transition="none";
          index=0;
          imagesBox.style.left=-index*imgWidth+"px";
          }, 500);
      }
      imagesBox.style.transition="0.5s ease";
    }