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
以上是輪播圖製作方法實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
