一个关于轮播的写法

最新推荐文章于 2023-10-06 21:27:12 发布

xiaosheng123_

最新推荐文章于 2023-10-06 21:27:12 发布

阅读量225

点赞数

分类专栏：前端基础

本文链接：https://blog.csdn.net/u012793917/article/details/52098596

版权

前端基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!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>

xiaosheng123_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个关于轮播的写法

html>html lang="en">head> meta charset="UTF-8"> title>Documenttitle> style type="text/css"> * { margin: 0; padding: 0; } #wrap { width: 730px;
复制链接

扫一扫