html京东图片切换代码

HTML京东图片切换代码

html>
     head>
      title>
    京东图片切换/title>
      style>
   #imgBox {
        width: 500px;
        height: 400px;
        position: relative;
   }
   #imgBox img {
        width: 100%;
        height: 100%;
        position: absolute;
   }
   #btnBox {
        width: 500px;
        height: 30px;
        text-align: center;
   }
   #btnBox span {
        display: inline-block;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: #ccc;
        margin: 5px;
        cursor: pointer;
   }
   #btnBox .active {
        background-color: #ff0000;
   }
      /style>
      script>
       var index = 0;
       var timer = null;
       var len = 5;
 // 图片数量   function showImg(index) {
        var imgBox = document.getElementById("imgBox");
        var imgList = imgBox.getElementsByTagName("img");
        var btnList = document.getElementById("btnBox").getElementsByTagName("span");
        for (var i = 0;
     i  len;
 i++) {
         imgList[i].style.display = "none";
         btnList[i].className = "";
    }
        imgList[index].style.display = "block";
        btnList[index].className = "active";
   }
   function autoPlay() {
        index++;
        if (index >
= len) {
         index = 0;
    }
        showImg(index);
   }
   window.onload = function() {
    document.getElementById("btnBox").onmouseover = function() {
         clearInterval(timer);
    }
    document.getElementById("btnBox").onmouseout = function() {
         timer = setInterval(autoPlay, 2000);
    }
        for (var i = 0;
     i  len;
 i++) {
     (function(i) {
          var span = document.createElement("span");
      span.onclick = function() {
           index = i;
           showImg(index);
      }
          document.getElementById("btnBox").appendChild(span);
     }
    )(i);
    }
        showImg(index);
        timer = setInterval(autoPlay, 2000);
   }
      /script>
     /head>
     body>
      div id="imgBox">
       img src="img/1.jpg" />
       img src="img/2.jpg" />
       img src="img/3.jpg" />
       img src="img/4.jpg" />
       img src="img/5.jpg" />
      /div>
      div id="btnBox">
    /div>
     /body>
    /html>
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！