循环播放

Posted 2020-10-04 xhanglog

该循环播放用到了jquery,所以在head标签里边应该加入：

 <script type="text/javascript" src="js/jQuery-3.2.1.min.js"></script>

以下是详细代码：

• html代码

 1 <div id="lunbobox">
 2     <div class="lunbo">
 3         <a href="#"><img src="images/1.jpg"></a>
 4         <a href="#"><img src="images/2.jpg"></a>
 5         <a href="#"><img src="images/3.jpg"></a>
 6     </div>
 7     <ul>
 8         <li></li>
 9         <li></li>
10         <li></li>
11     </ul>
12     <span></span>
13 </div>

• css代码

 1 #lunbobox {
 2     width:720px;
 3     height:260px;
 4     position:relative;
 5 }
 6 .lunbo {
 7     width:720px;
 8     height:260px;
 9     margin-top: 4px; 
10 }
11 .lunbo img {
12     width:720px;
13     height:270px;
14     position:absolute;
15     top:0px;
16     left:0px;
17 }
18 #lunbobox ul {
19     width:285px;
20     position:absolute;
21     bottom:1px;
22     right:100px;
23 }
24 #lunbobox ul li {
25     cursor:pointer;
26     width:10px;
27     height:10px;
28     border-radius: 10px;
29     border:1px solid #cccccc;
30     float:left;
31     list-style:none;
32     background:transparent;
33     text-align:center;
34     margin:0px 5px 0px 0px;
35 }

 

• js代码

 1 var t;
 2 var index = 0;
 3 /////自动播放
 4 t = setInterval(play, 3500)
 5 function play() {
 6     index++;
 7     if (index > 2) {
 8         index = 0
 9     }
10     // console.log(index)
11     $("#lunbobox ul li").eq(index).css({
12         "background": "#ffffff",
13         "border": "1px solid #ffffff"
14     }).siblings().css({
15         "background": "transparent",
16     })
17     $(".lunbo a ").eq(index).fadeIn(850).siblings().fadeOut(850);
18 };
19 
20 ///点击鼠标 图片切换
21 $("#lunbobox ul li").click(function() {
22     $(this).css({
23         "background": "#ffffff",
24         "border": "1px solid #ffffff"
25     }).siblings().css({
26         "background": "transparent"
27     })
28     var index = $(this).index(); //获取索引 图片索引与按钮的索引是一一对应的
29     $(".lunbo a ").eq(index).fadeIn(850).siblings().fadeOut(850); // siblings  找到 兄弟节点(不包括自己）
30 });
31 
32 //鼠标移进  移出
33 $("#lunbobox ul li,.lunbo a img").hover(
34     ////////鼠标移进
35     function() {
36         clearInterval(t);
37     },
38     //鼠标移开
39     function() {
40         t = setInterval(play, 3500)
41         function play() {
42             index++;
43             if (index > 2) {
44                 index = 0
45             }
46             $("#lunbobox ul li").eq(index).css({
47                 "background": "#ffffff",
48                 "border": "1px solid #ffffff"
49             }).siblings().css({
50                 "background": "transparent"
51             })
52             $(".lunbo a ").eq(index).fadeIn(850).siblings().fadeOut(850);
53         }
54     })