Exemples de création d'un graphique carrousel

1.Structure HTML :

 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.Style CSS

 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.Code JQ

 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. Remarque : le plug-in jq doit être importé. Ce cas utilise : jquery-1.9.1.js

.

5. Expérience d'apprentissage : Quand j'apprenais le graphique carrousel, je pensais que c'était très compliqué parce que je ne pouvais pas le comprendre quand je regardais le code des autres. . . Apprenez principalement à travers des vidéos.

Les principales choses que vous devez savoir sont .eq(), .setInterval(), .fadeIn(), .fadeOut()... et d'autres méthodes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!