Html+CSS+JS轮播图：手动轮播，自动轮播

admin · 发表于 2022-1-12 12:57:12

演示效果

轮播图代码：
[mw_shl_code=applescript,true]<!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>
      .banner {
         width: 500px;
         height: 300px;
         position: relative;
         /* border: 1px solid red; */
         margin: 100px auto;
      }
      .banner .wrap {
         width: 100%;
      }
      .banner .wrap .item {
         width: 100%;
      }
      .item img {
         width: 500px;
         height: 300px;
         vertical-align: top;
         position: absolute;
      }
      .div1 {
         position: absolute;
         left: 0;
         top: 50%;
         transform: translatey(-50%);
         cursor: pointer;
         width: 41px;
         height: 69px;
         font-size: 30px;
         line-height: 70px;
         text-align: center;
         color: #D6D8D4;
         background-color: rgba(0, 0, 0, 0.3);
      }
      .div2 {
         position: absolute;
         right: 0;
         top: 50%;
         transform: translatey(-50%);
         cursor: pointer;
         width: 41px;
         height: 69px;
         font-size: 30px;
         line-height: 70px;
         text-align: center;
         color: #D6D8D4;
         background-color: rgba(0, 0, 0, 0.3);
      }
      .pagenation {
         position: absolute;
         /* border: 1px solid red; */
         left: 50%;
         transform: translateX(-50%);
         display: flex;
         bottom: 40px;
      }

      .pagenation>div {
         width: 10px;
         height: 10px;
         border-radius: 50%;
         background-color: white;
         margin-right: 10px;
         cursor: pointer;
      }
      .pagenation>div:last-child {
         margin-right: 0;
      }
</style>
</head>
<body>
<div class="banner">
      <div class="warp">
         <div class="item"></div>
         <div class="item"></div>
         <div class="item"></div>
         <div class="item"></div>
      </div>
      <div class="div1">
         <</div> <div class="div2 ">>
      </div>
      
      <div class="pagenation">
         <div id="pagenation-item0"></div>
         <div id="pagenation-item1"></div>
         <div id="pagenation-item2"></div>
         <div id="pagenation-item3"></div>
      </div>
</div>
<script>
      var index = 0; //定义初始下标
      var banner = document.getElementsByClassName("banner")[0];
      var itemList = document.getElementsByClassName("item");
      var pagenationList = document.querySelectorAll(".pagenation>div");
      var pagenation = document.querySelector(".pagenation");
      itemList[0].style.opacity = 1;
      pagenationList[0].style.background = "blue" //初始第一张图对应的小圆点的颜色为蓝色
      var up = document.getElementsByClassName("div1")[0];
      var next = document.getElementsByClassName("div2")[0];
      //下一张图片（封装方便下面自动播放定时器调用）
      function nextFn() {
         index = index >= itemList.length - 1 ? 0 : ++index; //判断点击到了最后一张图片再次点击返回到第一张图
         for (var i = 0; i < itemList.length; i++) {
            itemList.style.opacity = 0; //图片透明度为0图片隐藏
            pagenationList.style.background = "white " //图片没显现小圆点的颜色为白色
         }
         itemList[index].style.transition = "opacity 1s ease .2s"
         itemList[index].style.opacity = 1; //图片透明度为1图片显现
         pagenationList[index].style.background = "blue" //图片显现小圆点的颜色为蓝色
      }
      next.onclick = nextFn; //下一张（点击事件）点击切换下一张图片
      up.onclick = function () { //上一张（点击事件）点击切换上一张图片
         index = index <= 0 ? itemList.length - 1 : --index; //判断点击到了第一张图片再次点击返回到最后一张图
         for (var i = 0; i < itemList.length; i++) {
            itemList.style.opacity = 0;
            pagenationList.style.background = "white"
         }
         itemList[index].style.transition = "opacity 1s ease .2s" //增加过渡效果
         itemList[index].style.opacity = 1;
         pagenationList[index].style.background = "blue"
      }
      //设置定时器，自动向下播放图片
      var t1 = setInterval(nextFn, 2000)
      banner.onmouseover = function () {
         clearInterval(t1);
      }
      banner.onmouseout = function () {
         t1 = setInterval(nextFn, 2000)
      }
      // 事件委托
      pagenation.onclick = function (event) {
         event = window.event || event
         console.log(event);
         if (event.target.className == "pagenation") {
            console.log("点击的是父元素");
         } else {
            var id = event.target.id;
            var photoIndex = null;
            for (var i = 0; i < pagenationList.length; i++) {
                  pagenationList.style.background = "white"
                  if (id.indexOf(i) >= 0) {
                     photoIndex = i;
                  }
            }
            event.target.style.background = "blue"
            index = photoIndex; // 将小圆点对应的下标与图片下标对应
            for (var i = 0; i < itemList.length; i++) {
                  itemList.style.opacity = 0;
            }
            itemList[index].style.transition = "opacity 1s ease .2s"
            itemList[photoIndex].style.opacity = 1;
         }
      }
</script>
</body>

</html>
[/mw_shl_code]

		自动登录	找回密码
密码			立即注册