1.html结构：

 1 <p> 2             <!--图片区开始--> 3             <p> 4                 <p><a><img  alt="轮播图制作方法实例" ></a></p> 5                 <p><a><img  alt="轮播图制作方法实例" ></a></p> 6                 <p><a><img  alt="轮播图制作方法实例" ></a></p> 7                 <p><a><img  alt="轮播图制作方法实例" ></a></p> 8                 <p><a><img  alt="轮播图制作方法实例" ></a></p> 9                 <p><a><img  alt="轮播图制作方法实例" ></a></p>10             </p>11             <!--图片区结束-->12             13             <p><p>&gt;</p>14             <!--导航条开始-->15             <p>16                 <p>1</p>17                 <p>2</p>18                 <p>3</p>19                 <p>4</p>20                 <p>5</p>21                 <p>6</p>22             </p>23             <!--导航条结束-->24         </p></p><p>2.CSS样式</p><p class="cnblogs_code"><pre class="brush:php;toolbar:false"> 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()...等方法。

标签： 轮播图片在线制作