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>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()...等方法。
以上就是轮播图制作方法实例的详细内容。