2408671535 轮播图-CSDN博客

本文介绍了一种使用HTML、CSS和JavaScript实现的简易轮播图设计，包括prev和next按钮控制以及使用CSS和脚本实现的图片切换效果。

<style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }

      p {
        text-align: center;
        font-size: 25px;
      }

      .imgBox {
        width: 700px;
        height: 320px;
        margin: 0 auto;
        position: relative;
        text-align: cneter;
                overflow: hidden;
      }

      .imgBox img {
        width: 700px;
        height: 320px;
        margin: 0 auto;    
                
      }
      .box {list-style-type: none;}
      .img1 {
        display: block;
      }

      .img2,
      .img3,
      .img4,
      .img5 {
        display: none;
            }

      #prev {
        width: 95px;
        height: 95px;
        background: url(pro123/left-right.jpg) no-repeat 0px -80px;
        position: absolute;
        top: 115px;
        left: 0px;
        z-index: 1000;
        opacity: 0.2;
      }

      #next {
        width: 95px;
        height: 95px;
        background: url(pro123/left-right.jpg) no-repeat -165px -80px;
        position: absolute;
        top: 115px;
        right: 0px;
        z-index: 1000;
        opacity: 0.2;
      }

      #prev:hover,#next:hover {opacity: 0.7;}

      #circlebutton {
        position: absolute;
        bottom: 20px;
        left: 260px;
        list-style-type: none;
        text-align: center;
      }

      #circlebutton li {
        margin-left: 10px;
        float: left;
      }


      #circlebutton li div {
        width: 20px;
        height: 20px;
        background: #DDDDDD;
        border-radius: 10px;
        cursor: pointer;
        text-align: center;
        vertical-align: middle;
      }
    </style>

  <body>
    <p>简易轮播图设计</p>
    <div class="imgBox">

      <div id="prev"></div>
      <div id="next"></div>

      <ul class="box">
        <li><img class="img-slide img1" src="s1.jpg" alt="1"> </li>
        <li><img class="img-slide img2" src="s2.jpg" alt="2"></li>
        <li><img class="img-slide img3" src="s3.jpg" alt="3"></li>
        <li><img class="img-slide img4" src="s4.jpg" alt="3"></li>
        <li><img class="img-slide img5" src="s5.jpg" alt="3"></li>
      </ul>

      <ul id="circlebutton">
        <li>
          <div class="divEle" style="background: #FF0000;">1</div>
        </li>
        <li>
          <div class="divEle">2</div>
        </li>
        <li>
          <div class="divEle">3</div>
        </li>
        <li>
          <div class="divEle">4</div>
        </li>
        <li>
          <div class="divEle">5</div>
        </li>
      </ul>
    </div>
    <script type="text/javascript">
      var index = 0;

      var divCon = document.getElementsByClassName("divEle"); 
      var imgEle = document.getElementsByClassName("img-slide"); 

      // // 圆点上鼠标盘旋时，切换图像
      // for (var i = 0; i < divCon.length; i++) {
      //   divCon[i].index = i;
      //   divCon[i].onmouseover = function() {
      //     if (index == this.index){return;} 
      //     index = this.index;
      //     changeImg();
      //     clearInterval(change1);
      //   }
      // }


      // 自动轮播
      function autoChangeImg() {
        index++; 
        changeImg(); 
      }
      //设置定时器，每隔3秒切换一张图片
      var change1 = setInterval(autoChangeImg, 3000);

      function changeImg() {
        if (index >= imgEle.length) {
          index = 0;
        }
        for (var i = 0; i < imgEle.length; i++) {
          imgEle[i].style.display = 'none';
          divCon[i].style.background = "#DDDDDD";
        }
        imgEle[index].style.display = 'block';
                divCon[index].style.background = "#FF0000";
      }

    </script>
  </body>