欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

轮播图制作方法实例

程序员文章站 2022-05-14 14:04:38
...
1.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.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.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.注意:需要导入jq插件,本案例使用的是:jquery-1.9.1.js

轮播图制作方法实例

轮播图制作方法实例

5.学习心得:在学习轮播图时,我还以为很复杂,因为看别人的代码,看不懂。。。主要通过视频学习。

      主要要知道.eq(),.setInterval(),.fadeIn(),.fadeOut()...等方法。

以上就是轮播图制作方法实例的详细内容,更多请关注其它相关文章!

相关标签: 制作