Maison > interface Web > js tutoriel > le corps du texte

Exemples de création d'un graphique carrousel

PHP中文网
Libérer: 2017-06-21 10:22:54
original
1966 Les gens l'ont consulté

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>
Copier après la connexion

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 }
Copier après la connexion

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 }
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal