js -- 轮播图

轮播图

思路

一：界面

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>

2. 样式

   实现轮播效果即让 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";
   

   3. 下方小圆点导航栏

   

         <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函数。

   2. 导航栏小圆点变色

      首先遍历所有小圆点让其都变成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)";
              
            };
      

   3. 实现自动播放功能

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

---