js -- 轮播图

轮播图

js -- 轮播图_第1张图片

思路

一:界面

js -- 轮播图_第2张图片

  1. 首先要有结构

    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>
  1. 样式

    实现轮播效果即让 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";
    
    1. 下方小圆点导航栏

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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实现功能

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

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

    1. 导航栏小圆点变色

      首先遍历所有小圆点让其都变成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)";
              
            };
      
    2. 实现自动播放功能

      开启定时器,每次定时器里面调用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>Documenttitle>
      <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>
    

你可能感兴趣的:(javascript,javascript,css3,css)