一个关于轮播的写法

来源：互联网发布：单片机开发系统有哪些编辑：程序博客网时间：2024/04/28 18:11

<!DOCTYPE html><html lang="en"><head>   <meta charset="UTF-8">   <title>Document</title>   <style type="text/css">      * {         margin: 0;         padding: 0;      }      #wrap {         width: 730px;         height: 454px;         position: relative;      }      ul, li {         list-style: none;      }      .btns {         overflow: hidden;         position: absolute;         top: 400px;         left: 300px;      }            .btns li {         border: 1px solid red;         width: 25px;         height: 25px;         border-radius: 25px;         float: left;         margin-right: 10px;      }      .selectedBtn {         background-color: black;      }   </style></head><body>   <div id="wrap">      <img src="../images/images/1.jpg">      <ul class="btns">         <li class="selectedBtn"></li>         <li></li>         <li></li>         <li></li>      </ul>   </div>   <script type="text/javascript" src="jquery-1.7.2.min.js"></script>   <script type="text/javascript">      var imgsSrc = ["../images/images/1.jpg", "../images/images/2.jpg", "../images/images/3.jpg", "../images/images/4.jpg"];

//一个存储图片地址的数组      var index = 0;      function run() {         return setInterval(function() {            index++;            if(index == imgsSrc.length) {               index = 0;            }            $("#wrap img").attr("src", imgsSrc[index]);

//更换图片            $($("li").removeClass("selectedBtn").get(index)).addClass('selectedBtn');

//替换更改li的标签         }, 1000);      }

      var timer = run();      $(".btns").on("mouseenter", "li", function() {         clearInterval(timer);         index = $("li").index(this);         $("#wrap img").attr("src", imgsSrc[index]);         $($("li").removeClass("selectedBtn").get(index)).addClass('selectedBtn');      }).on("mouseleave", "li", function() {         timer = run();      })//鼠标移入移出事件   </script></body></html>

0 0