4.3大图轮播学习-优快云博客

本文介绍了一个简单的图片轮播效果实现方案，使用HTML、CSS和JavaScript完成。通过设置定时器自动切换图片显示，并配合导航圆点指示当前显示的图片索引。

css样式
 1 <style type="text/css">
 2         .lunbo{
 3                 width:500px;
 4                 height:500px;
 5                 display:none;
 6                 float:left;
 7             }
 8         .dian{
 9                 width:15px;
10                 height:15px;
11                 border:5px solid #F00;
12                 float:left;
13                 border-radius:50%;
14                 position:relative;
15                 left:340px;
16                 top:-40px;
17                 margin-left:5px;
18                 
19                 
20                 
21             }
22     </style>
23 </head>
24 
图片轮播

25 <body>
26     <div id="datu" style="width:500px; height:500px;">
27         <img class="lunbo" style="display:block" src="../图片/6a63f6246b600c33d8a935b2164c510fd8f9a1fc.jpg"/>
28         <img class="lunbo" src="../图片/29381f30e924b8999a0c914262061d950a7bf69c.jpg"/>
29         <img class="lunbo" src="../图片/91529822720e0cf381c4a5810646f21fbe09aa9d.jpg"/>
30         <img class="lunbo" src="../图片/d833c895d143ad4bd04eacba8e025aafa40f0663.jpg"/>
31         <img class="lunbo" src="../图片/faf2b2119313b07e01e7ea7200d7912397dd8c76.jpg"/>
32         
33     </div>
34     <div class="dian" sy="0" style="border-color:blue" onclick="bian('0')"></div>
35     <div class="dian" sy="1" onclick="bian('1')"></div>
36     <div class="dian" sy="2" onclick="bian('2')"></div>
37     <div class="dian" sy="3" onclick="bian('3')"></div>
38     <div class="dian" sy="4" onclick="bian('4')"></div>
39 </body>
40 </html>
js脚本

41     <script type="text/javascript">
42         设置间隔
           window.setInterval("lun()",3000)
43         var sy = 0;
44         function lun()
45         {找元素
46             var lunbo = document.getElementsByClassName("lunbo");
47             sy++;

轮播到第五章 跳到第一章
48             if(sy>=lunbo.length)
49             {
50                 sy = 0; 
51             }
轮播循环隐藏
52             for( i=0; i<lunbo.length; i++)
53             {
54                 lunbo[i].style.display = "none"
55             }
56             lunbo[sy].style.display = "block"
设置圆点跟随轮播
               设置变量跟随轮播索引
57             var d = document.getElementsByClassName("dian")
58             for(j=0; j<d.length; j++)
59             {
60                 if( d[j].getAttribute("sy")==sy )
61                 {
62                     d[j].style.borderColor = "blue"
63                 }
64                 else
65                 {
66                     d[j].style.borderColor = "#F00"
67                 }
68             }
69             
70         }
71         function bian(a)
72         {    
73              sy = a;（索引值等于点击的图片的索引值）
 先设置点击圆点切换图片
74              var lunbo = document.getElementsByClassName("lunbo")
75              for(var i=0; i<lunbo.length; i++)
76              {
77                   lunbo[i].style.display = "none";
78              }
79              lunbo[a].style.display = "block";
80              设置圆点跟随图片切换（圆点的索引跟随图片一起++）
81              var dian = document.getElementsByClassName("dian")
82              
83              for(var j=0; j<lunbo.length; j++)
84              {
85                   dian[j].style.borderColor = "red";
86              }
87               dian[a].style.borderColor = "blue";
88             
89         }
90         
91         
92     </script>