Beispiele für die Erstellung eines Karusselldiagramms

1.Html-Struktur:

 1 <div id="SlideShowBox"> 2             <!--图片区开始--> 3             <div class="SlideShow"> 4                 <div class="SlideShow_Img"><a href=""><img src="img/SlideshowImg_1.jpg" alt="" /></a></div> 5                 <div class="SlideShow_Img"><a href=""><img src="img/SlideshowImg_2.jpg" alt="" /></a></div> 6                 <div class="SlideShow_Img"><a href=""><img src="img/SlideshowImg_3.jpg" alt="" /></a></div> 7                 <div class="SlideShow_Img"><a href=""><img src="img/SlideshowImg_4.jpg" alt="" /></a></div> 8                 <div class="SlideShow_Img"><a href=""><img src="img/SlideshowImg_5.jpg" alt="" /></a></div> 9                 <div class="SlideShow_Img"><a href=""><img src="img/SlideshowImg_6.jpg" alt="" /></a></div>10             </div>11             <!--图片区结束-->12             13             <div class="btn btn_left"><</div><div class="btn btn_right">></div>14             <!--导航条开始-->15             <div class="tabs">16                 <div class="tab bg">1</div>17                 <div class="tab">2</div>18                 <div class="tab">3</div>19                 <div class="tab">4</div>20                 <div class="tab">5</div>21                 <div class="tab">6</div>22             </div>23             <!--导航条结束-->24         </div>

2.CSS-Stil

 1 * { 2     padding: 0; 3     margin: 0; 4 } 5  6 #SlideShowBox { 7     width: 790px; 8     margin: 0 auto; 9     position: relative;10     top: 100px;/*position: absolute;*/11 }12 13 #SlideShowBox .SlideShow .SlideShow_Img {14     position: absolute;15     16 }17 18 .btn {19     position: absolute;20     top: 150px;21     width: 40px;22     height: 60px;23     font-size: 40px;24     color: #fff;25     text-align: center;26     line-height: 60px;27     display: none;28     background-color: rgba(0,0,0,0.2);29 }30 31 .btn_right {32     position: absolute;33     right: 0;34 }35 /*设置导航条样式开始*/36 .tabs {37     position: absolute;38     left: 300px;39     top: 290px;40 }41 .tab {42     /*position: absolute;*/43     float: left;    
44     width: 30px;45     height: 30px;46     text-align: center;47     line-height: 30px;48     border-radius: 100%;49     cursor: pointer;50     margin-right: 10px;51     background-color: white;52 }53 /*设置导航条样式结束*/54 .bg {55     background-color: red;56 }57 /*鼠标移到图片时出现之前隐藏的.btn盒子*/58 #SlideShowBox:hover .btn {59     display: block;60     cursor: pointer;61 }62 63 .btn:hover {64     background-color: rgba(0,0,0,0.5);65 }

3.JQ-Code

 1 var i = 0 ; 2 var timer; 3 $(function(){ 4     //显示第一张图片 5     $(".SlideShow_Img").eq(0).fadeIn(300).siblings().fadeOut(300); 6     ShowTime(); 7     //实现鼠标移到导航条时，停止轮播 8     $(".tab").hover(function(){ 9         //获取当前鼠标位置的索引,然后赋值给i，在调用show()方法10         i = $(this).index();11         Show();12         //清除轮播13         clearInterval(timer);14     },function(){15         ShowTime();16     });17     //实现鼠标移到图片时，停止轮播18     $(".SlideShow_Img").hover(function(){19         //获取当前鼠标位置的索引,然后赋值给i，在调用show()方法20         i = $(this).index();21         Show();22         //清除轮播23         clearInterval(timer);24     },function(){25         ShowTime();26     });27     //左侧点击按钮28     $(".btn_left").click(function(){29         //先停止轮播30         clearInterval(timer);31         if(i==0){32             i = 6;33         }34         i--;35         Show();36         ShowTime();37     });38     //右侧点击按钮39     $(".btn_right").click(function(){40         //先停止轮播41         clearInterval(timer);42         if(i==6){43             i = -1;44         }45         i++;46         Show();47         ShowTime();48     });49 });50 51 //创建显示图片的Show()方法52 function Show(){53     $(".SlideShow_Img").eq(i).fadeIn(300).siblings().fadeOut(300);54     //轮播图下导航条的功能：addClass()方法与removClass()方法55     $(".tab").eq(i).addClass("bg").siblings().removeClass("bg");56 }57 //创建轮播图ShowTime()方法58 function ShowTime(){59     //实现轮播方法：setInterval(function(){},time);60     timer = setInterval(function(){61         i++;62         if(i==6){63             i = 0;64         }65         Show();66     },2000);67 }

4. Hinweis: Das jq-Plugin muss importiert werden: jquery-1.9.1.js

5. Lernerfahrung: Als ich das Karusselldiagramm lernte, fand ich es sehr kompliziert, weil ich es nicht verstehen konnte, als ich mir den Code anderer Leute ansah. . . Lernen Sie hauptsächlich durch Videos.

Die wichtigsten Dinge, die Sie wissen müssen, sind .eq(), .setInterval(), .fadeIn(), .fadeOut()... und andere Methoden.

Das obige ist der detaillierte Inhalt vonBeispiele für die Erstellung eines Karusselldiagramms. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!