js -- 轮播图

最新推荐文章于 2024-05-21 14:15:14 发布

追梦杰尼龟

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量130

点赞数

分类专栏： javascript 文章标签： javascript css3 css

本文链接：https://blog.csdn.net/czc1357618897/article/details/125266313

版权

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

轮播图

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZjoPPzAl-1655120641576)(C:\Users\Cai123\AppData\Roaming\Typora\typora-user-images\image-20220613190908097.png)]$

思路

一：界面

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6vIUWLDY-1655120641577)(C:\Users\Cai123\AppData\Roaming\Typora\typora-user-images\image-20220613191102431.png)]$

首先要有结构

outer作为容器，ul需要容纳下所有照片， li 里面放图片

    <!-- 最大的容器 -->
    <div id="outer">
      <!-- 放置图片 -->
      <ul id="imgList">
        <li><img src="game1.jpg" alt=""></li>
        <li><img src="game2.jpg" alt=""></li>
        <li><img src="game3.jpg" alt=""></li>
        <li><img src="game4.jpg" alt=""></li>
        <li><img src="game5.jpg" alt=""></li>
        <li><img src="game1.jpg" alt=""></li>
      </ul>
      <div id="navDiv">
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
      </div>
    </div>

样式

实现轮播效果即让 ul 的左偏移量不断地改变每一次改变都能切换到下一张图片

即ul绝对定位 outer盒子开启相对定位

为了让图片在一行上显示即给li设置浮动

ul需要容纳下所有的图片就需要计算 ul 宽度

* {
      padding: 0;
      margin: 0;
    }
    img {
      width: 360px;
      height: 225px;
    }
    #outer {
      position: relative;
      width: 380px;
      height: 225px;
      margin: 100px auto;
      padding: 10px 0px;
      background-color: aqua;
      overflow: hidden;
    }
    /* 通过ul向左移动实现图片的切换 */
    #imgList {
      /* 开启绝对定位利用偏移量进行移动 */
      position: absolute;
      left: 0;
      list-style: none;
      /* width: 1900px; */
    }
    #imgList li {
      float: left;
      margin: 0 10px;
    }

利用js计算 ul 所需的宽度

      //通过js让imgList的宽度自动随图片的变化而变化
      var imgList = document.getElementById("imgList");
      //获取imgList中图片的数量
      var imgArr = document.getElementsByTagName("img");
      //每个图片的宽度为360px + 20px（外边距）
      imgList.style.width = imgArr.length * 380 + "px";

下方小圆点导航栏

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ClUSgnX9-1655120641578)(C:\Users\Cai123\AppData\Roaming\Typora\typora-user-images\image-20220613191958514.png)]$

      <div id="navDiv">
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
      </div>

#navDiv {
      position: absolute;
      bottom: 15px;
      /* 定位在中间 */
      /* left: 50%;
      transform: translateX(-50%); */
    }
    #navDiv a {
      float: left;
      width: 16px;
      height: 16px;
      border-radius: 8px;
      background: rgba(0,0,0,.3);
      margin: 0 5px;
    }
    #navDiv a:hover {
      background: rgba(0,0,0,.5);
    }

利用js实现让导航栏居中

      //利用js设置navDiv水平居中
      var navDiv = document.getElementById("navDiv");
      var outer = document.getElementById("outer");
      navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth) / 2 + "px";

二：js实现功能

实现通过点击导航栏切换图片

那就需要给每个需要点击的按钮设置单击函数，
因为我们知道想要切换图片即改变该图片的左偏移量，那就需要知道当前图片的索引。
所以需要给allA[i]添加num属性来保存该图片的索引。然后修改偏移量即可。
这里是选择调用了之前写过的move函数。

导航栏小圆点变色

首先遍历所有小圆点让其都变成css一开始设置的样式。然后让选中的小圆点变色即可。

//功能1 ： 实现点击divDiv的小圆点导航栏切换图片
      //即需要给每一个小圆点设置单击相应函数
      for(var i=0; i<allA.length; i++)
      {
        //那么就需要知道当前点击的小圆点导航是第几个
        //给allA对象添加num属性，然后记住当前的编号
        allA[i].num = i;
        allA[i].onclick = function(){
          //点击切换时候 不让自动切换
          //即关闭自动切换的定时器
          clearInterval(timer);
          //给全局变量index 赋值
          index = this.num;
          //修改图片即修改偏移量
          // imgList.style.left = -380 * index + "px";
          //使用move函数让图片切换
          move(imgList , "left" , index * -380 , 25 , function(){
            //用户点击切换图片动画结束后再让自动播放
            autoChange();
          });
          setA();
        };
      }
      //创建一个方法用来让选中的navDiv变色
      function setA(){
        //判断最后一张
        if(index >= imgArr.length-1)
        {
          index = 0;
          //并且让当前left=0， 不让其回转
          imgList.style.left = 0;
        }
        for(i=0; i<allA.length; i++)
        {
          //遍历所有的a并且让背景颜色设置
          allA[i].style.background = "";
        }
        //让选中的变色
        allA[index].style.background = "rgba(0,0,0,.5)";
        
      };

实现自动播放功能

开启定时器，每次定时器里面调用move即可

      //功能2 ： 实现自动切换图片的功能
      autoChange();
      //定义定时器标识
      var timer;
      function autoChange(){
        //开启定时器，调用move函数来切换图片
        timer = setInterval(function(){
          index++;
          index %= imgArr.length;
          move(imgList, "left" , -380 * index ,  20 , function(){
            setA();
          });
        },3000);
      };
    };

完整代码

<!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;
    }
    img {
      width: 360px;
      height: 225px;
    }
    #outer {
      position: relative;
      width: 380px;
      height: 225px;
      margin: 100px auto;
      padding: 10px 0px;
      background-color: aqua;
      overflow: hidden;
    }
    /* 通过ul向左移动实现图片的切换 */
    #imgList {
      /* 开启绝对定位利用偏移量进行移动 */
      position: absolute;
      left: 0;
      list-style: none;
      /* width: 1900px; */
    }
    #imgList li {
      float: left;
      margin: 0 10px;
    }
    #navDiv {
      position: absolute;
      bottom: 15px;
      /* 定位在中间 */
      /* left: 50%;
      transform: translateX(-50%); */
    }
    #navDiv a {
      float: left;
      width: 16px;
      height: 16px;
      border-radius: 8px;
      background: rgba(0,0,0,.3);
      margin: 0 5px;
    }
    #navDiv a:hover {
      background: rgba(0,0,0,.5);
    }
  </style>
  <script src="tools.js"></script>
  <script>
    window.onload = function(){
      //通过js让imgList的宽度自动随图片的变化而变化
      var imgList = document.getElementById("imgList");
      //获取imgList中图片的数量
      var imgArr = document.getElementsByTagName("img");
      //每个图片的宽度为360px + 20px（外边距）
      imgList.style.width = imgArr.length * 380 + "px";
      //利用js设置navDiv水平居中
      var navDiv = document.getElementById("navDiv");
      var outer = document.getElementById("outer");
      navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth) / 2 + "px";
      //让第一个图片默认颜色为黑
      //获取所有的a
      var allA = document.getElementsByTagName("a");
      //索引
      var index = 0;
      allA[index].style.background = "rgba(0,0,0,.5)";

      //功能1 ： 实现点击divDiv的小圆点导航栏切换图片
      //即需要给每一个小圆点设置单击相应函数
      for(var i=0; i<allA.length; i++)
      {
        //那么就需要知道当前点击的小圆点导航是第几个
        //给allA对象添加num属性，然后记住当前的编号
        allA[i].num = i;
        allA[i].onclick = function(){
          //点击切换时候 不让自动切换
          //即关闭自动切换的定时器
          clearInterval(timer);
          //给全局变量index 赋值
          index = this.num;
          //修改图片即修改偏移量
          // imgList.style.left = -380 * index + "px";
          //使用move函数让图片切换
          move(imgList , "left" , index * -380 , 25 , function(){
            //用户点击切换图片动画结束后再让自动播放
            autoChange();
          });
          setA();
        };
      }
      //创建一个方法用来让选中的navDiv变色
      function setA(){
        //判断最后一张
        if(index >= imgArr.length-1)
        {
          index = 0;
          //并且让当前left=0， 不让其回转
          imgList.style.left = 0;
        }
        for(i=0; i<allA.length; i++)
        {
          //遍历所有的a并且让背景颜色设置
          allA[i].style.background = "";
        }
        //让选中的变色
        allA[index].style.background = "rgba(0,0,0,.5)";
        
      };
      //功能2 ： 实现自动切换图片的功能
      autoChange();
      //定义定时器标识
      var timer;
      function autoChange(){
        //开启定时器，调用move函数来切换图片
        timer = setInterval(function(){
          index++;
          index %= imgArr.length;
          move(imgList, "left" , -380 * index ,  20 , function(){
            setA();
          });
        },3000);
      };
    };
  </script>
</head>
<body>
    <!-- 最大的容器 -->
    <div id="outer">
      <!-- 放置图片 -->
      <ul id="imgList">
        <li><img src="game1.jpg" alt=""></li>
        <li><img src="game2.jpg" alt=""></li>
        <li><img src="game3.jpg" alt=""></li>
        <li><img src="game4.jpg" alt=""></li>
        <li><img src="game5.jpg" alt=""></li>
        <li><img src="game1.jpg" alt=""></li>
      </ul>
      <div id="navDiv">
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
      </div>
    </div>
</body>
</html>