Examples of how to create a carousel chart

1.Html structure:

 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 style

 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. Note: jq plug-in needs to be imported. This case uses: jquery-1.9.1.js

5. Learning experience: When I was learning carousel diagrams, I thought it was very complicated because I couldn’t understand it when I looked at other people’s codes. . . Learn mainly through videos.

The main things you need to know are .eq(), .setInterval(), .fadeIn(), .fadeOut()... and other methods.

The above is the detailed content of Examples of how to create a carousel chart. For more information, please follow other related articles on the PHP Chinese website!