欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript轮播图

程序员文章站 2022-06-24 09:02:53
JavaScript轮播图的实现 HTML部分: CSS部分 JavaScript部分 ......

javascript轮播图的实现

html部分:

 1 <!-- html部分 -->
 2 <!doctype html>
 3 <html>
 4     <head>
 5         <meta charset="utf-8">
 6         <title>轮播图</title>
 7         <link rel="stylesheet" type="text/css" href="css/demo06.css"/>
 8         <script src="js/demo06.js"></script>
 9     </head>
10     <body>
11         <div class="container">
12             <!-- 轮播图区域 -->
13             <ul class="lbimg">
14                 <li class="on" style="background-color: #898989;">轮播图1</li>
15                 <li style="background-color: #cd282b;">轮播图2</li>
16                 <li style="background-color: pink;">轮播图3</li>
17                 <li style="background-color: peachpuff;">轮播图4</li>
18                 <li style="background-color: palegoldenrod;">轮播图5</li>
19             </ul>    
20             <ol class="btn">
21                 <li class="active">第1张</li>
22                 <li>第2张</li>
23                 <li>第3张</li>
24                 <li>第4张</li>
25                 <li>第5张</li>
26             </ol>
27         </div>
28     </body>
29 </html>

css部分

 1 *{
 2     margin: 0;
 3     padding: 0;
 4     list-style: none;
 5 }
 6 .container{
 7     width: 600px;
 8     height: 400px;
 9     border: 4px double #ff6633;
10     margin: 0 auto;
11 }
12 
13 /* 轮播图 */
14 .lbimg li{
15     width: 100%;
16     height: 350px;
17     text-align: center;
18     line-height: 350px;
19     display: none;
20     font-size: 25px;
21     color: #ff6633;
22 }
23 .lbimg .on{
24     display: block;
25 }
26 
27 .btn{
28     width: 100%;
29     height: 50px;
30     background-color: #3cbdff;
31     display: flex;
32 }
33 .btn li{
34     flex: 1;
35     color: #fff;
36     font-weight: bold;
37     line-height: 50px;
38     text-align: center;
39     font-family: "楷体";
40     cursor: pointer;
41     
42 }
43 .btn .active{
44     background-color: rgba(0,0,0,0.2);
45     transition: all ease-in-out 0.25s;
46 }

javascript部分

 1 window.onload=function(){
 2     var lbimg=document.queryselector(".lbimg");
 3     var lbimgs=lbimg.queryselectorall("li");
 4     var btn=document.queryselector(".btn");
 5     var btns=btn.queryselectorall("li");
 6     
 7     for (var i = 0; i < btns.length; i++) {
 8         
 9         btns[i].index=i;
10         btns[i].onclick=function(){
11             clearinterval(timer);
12             for (var j = 0; j < lbimgs.length; j++) {
13                 lbimgs[j].classname="";
14             }
15             // 按钮颜色跟着变化
16             for(var k=0;k<btns.length;k++){
17                 btns[k].classname="";
18             }
19             // 轮播同步,点击后图片的位置从点击的地方开始轮播
20             index=this.index;
21             btns[this.index].classname="active";
22             lbimgs[this.index].classname="on";
23             timer=setinterval(autoplay,1000);
24         }
25     }
26     var index=0;
27     // 自动轮播
28     index++;
29     var timer=setinterval(autoplay,1000);
30     function autoplay(){
31         for (var i = 0; i < lbimgs.length; i++) {
32             lbimgs[i].classname="";
33         }
34         for (var j = 0; j < btns.length; j++) {
35             btns[j].classname="";
36         }
37         if(index==lbimgs.length-1){
38             index=0;
39         }else{
40             index++;
41         }
42         btns[index].classname="active";
43         lbimgs[index].classname="on";
44     }
45     
46     // 鼠标移动时清除定时器
47     lbimg.onmouseover=function(){
48         clearinterval(timer);
49     }
50     lbimg.onmouseout=function(){
51         timer=setinterval(autoplay,1000);
52     }
53     
54 }