轮播图（淡入淡出切换）

Posted 2021-02-21 strongerpian

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了轮播图（淡入淡出切换）相关的知识，希望对你有一定的参考价值。

实现效果：点击序列号切换图片；点击上下箭头切换图片；每3s自动切换图片；鼠标移入停止自动切换，移出开始自动切换。

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5 <title></title>
  6 <style>
  7 * {margin:0; padding:0;}
  8 li{list-style:none; }
  9 
 10 #div1 {width:850px; height:500px; margin:50px auto; overflow:hidden; position:relative;}
 11 #div1 ul li{height:500px;opacity: 0;position: absolute;left: 0;top: 0;z-index: 0;transition: opacity 1.5s;}
 12 #div1 ul li.ac{z-index: 5;opacity: 1;}
 13 #div1 ol {position:absolute;right: 10%;bottom: 10px;z-index:6}
 14 #div1 ol li{width: 20px;height: 20px;background: #fff;margin-left: 5px;float: left;line-height: 20px;text-align: center;cursor: pointer;}
 15 #div1 ol li.ac{background: red;color: #fff;}
 16 #div1>a{text-decoration: none;position: absolute;top: 50%;margin-top: -10px;height: 40px;line-height: 32px;text-align: center;width: 40px;font-size: 40px;vertical-align: middle;color: #fff;background: rgba(0,0,0,0.5);z-index:6;}
 17 #goPrev{left: 0;}
 18 #goNext{right: 0;}
 19 img{width:850px; height:500px;}
 20 </style>
 21 </head>
 22 
 23 <body>
 24 <div id="div1">
 25     <ul>
 26         <li class="ac"><a href="javascript:alert(0);"><img src="1.jpg" /></a></li>
 27         <li><a href="javascript:alert(1);"><img src="2.jpg" /></a></li>
 28         <li><a href="javascript:alert(2);"><img src="3.jpg" /></a></li>
 29         <li><a href="javascript:alert(3);"><img src="4.jpg" /></a></li>
 30         <li><a href="javascript:alert(4);"><img src="5.jpg" /></a></li>
 31     </ul>
 32     <ol>
 33         <li class="ac">1</li>
 34         <li>2</li>
 35         <li>3</li>
 36         <li>4</li>
 37         <li>5</li>
 38     </ol>
 39     <a href="javascript:;" id="goPrev">&laquo;</a>
 40     <a href="javascript:;" id="goNext">&raquo;</a>
 41 </div>
 42 <script>
 43   var div = document.querySelector(‘#div1‘),
 44       imgs = div.querySelectorAll(‘ul li‘),
 45       btns = div.querySelectorAll(‘ol li‘),
 46       goPrev = document.querySelector(‘#goPrev‘),
 47       goNext = document.querySelector(‘#goNext‘)
 48 
 49   var index = 0 // 当前图片的下标，默认为0
 50   var lastIndex = 0 // 上一张图片的下标，默认为0
 51   var timer = null
 52 
 53   // 按钮切换
 54   Array.from(btns).forEach((btn, i) => {
 55     btn.onclick = function () {
 56       // 要让上一张图片去掉ac，再给当前图片加上ac
 57       // index的值应该更新成当前点击的下标
 58 
 59       // 把index先变成lastIndex，然后再把index赋值为当前的i
 60       lastIndex = index
 61       index = i
 62       change()
 63     }
 64   })
 65 
 66   // 向后切换
 67   goNext.onclick = function () {
 68     lastIndex = index
 69     index++
 70     // index的范围只能是0~length-1 所以一旦等于length代表超出了，那就回到0
 71     if (index === imgs.length) index = 0
 72     change()
 73   }
 74 
 75   // 向前切换
 76   goPrev.onclick = function () {
 77     lastIndex = index
 78     index--
 79     if (index < 0) index = imgs.length - 1
 80     change()
 81   }
 82 
 83   // 自动切换
 84   autoPlay() // 默认先自动播放起来
 85   function autoPlay () {
 86     timer = setInterval(() => {
 87       // 每阁3s触发一次向后按钮的点击事件
 88       // 给对象绑事件，可以直接作为函数来调用
 89       goNext.onclick()
 90     }, 3000)
 91   }
 92   
 93   div.onmouseenter = function () {
 94     clearInterval(timer)
 95   }
 96   div.onmouseleave = function () {
 97     autoPlay()
 98   }
 99 
100   // 通过index和lastIndex来切换图片和按钮
101   function change () {
102     // 上一张图片和上一个按钮去掉ac再给当前图片和当前按钮加上ac
103     imgs[lastIndex].classList.remove(‘ac‘)
104     imgs[index].classList.add(‘ac‘)
105     btns[lastIndex].classList.remove(‘ac‘)
106     btns[index].classList.add(‘ac‘)
107   }
108 </script>
109 </body>
110 </html>

以上是关于轮播图（淡入淡出切换）的主要内容，如果未能解决你的问题，请参考以下文章