輪播圖的實現
第一種輪播圖：將全部的圖片橫排着放，而後利用overflow:hidden，一次只展現一張圖片，而後定時向左移動，來實現圖片輪播。代碼以下：css
html結構和css樣式：html
1 <style>
2 .pic-box{
3 width:600px;
4 height:400px;
5 margin:100px auto;
6 overflow:hidden;
7 position:relative;
8 }
9 .pic{
10 width:3600px;
11 position:absolute;
12 left:0;
13 top:0;
14 list-style: none;
15 margin:0;
16 padding:0;
17 }
18 .pic li{
19 width:600px;
20 height:400px;
21 float:left;
22 list-style: none;
23 }
24 li img{
25 width:600px;
26 height:400px;
27 }
28 .btns{
29 position:absolute;
30 right:5%;
31 bottom:5px;
32 }
33 .btn{
34 display: inline-block;
35 width:10px;
36 height:10px;
37 border-radius: 50%;
38 border:1px solid #999999;
39 }
40 .btn:hover{
41 cursor:pointer;
42 }
43 .selected{
44 background: #009cda;
45 }
46 .pre-btn{
47 position:absolute;
48 top:50%;
49 left:10px;
50 display: inline-block;
51 width:20px;
52 height:20px;
53 margin-top:-10px;
54 background: rgba(255,255,180,0.8);
55 text-align: center;
56 }
57 .next-btn{
58 position:absolute;
59 top:50%;
60 right:10px;
61 display: inline-block;
62 width:20px;
63 height:20px;
64 margin-top:-10px;
65 background: rgba(255,255,180,0.8);
66 text-align: center;
67 }
68 .pre-btn:hover,.next-btn:hover{
69 cursor:pointer;
70 }
71 </style>
72 </head>
73 <body>
74 <div class="pic-box">
75 <ul class="pic">
76 <li><img src="img/13.jpg"></li>
77 <li><img src="img/14.jpg"></li>
78 <li><img src="img/24.jpg"></li>
79 <li><img src="img/16.jpg"></li>
80 <li><img src="img/18.jpg"></li>
81 <li><img src="img/19.jpg"></li>
82 </ul>
83 <div class="btns">
84 <span class="btn selected"></span>
85 <span class="btn"></span>
86 <span class="btn"></span>
87 <span class="btn"></span>
88 <span class="btn"></span>
89 <span class="btn"></span>
90 </div>
91 <span class="pre-btn"><img src="img/before.png"></span>
92 <span class="next-btn"><img src="img/next.png"></span>
93 </div>
js代碼：jquery
1 <script src="jquery-3.2.1.min.js"></script>
2 <script>
3 /*圖片滾動函數*/
4 var i=0;//記錄當前圖片的順序
5 var timer;//定時器變量
6 $pics=$(".pic>li"); 7 $pic=$('.pic'); 8 $pages=$pics.length; 9 $width=$pic.width()/$pages;
10 $btns=$(".btns>.btn"); 11 //定時輪播
12 function animate(){ 13 clearTimeout(timer); 14 if(!$pic.is(":animated")){ 15 if(i<$pages-1){ 16 $pic.animate({left:'-='+$width},"normal");//將圖片向左移動一張,也能夠換成其餘效果。
17 i++; 18 } 19 else{ 20 $pic.animate({left:0},"normal"); 21 i=0; 22 } 23 $btns.eq(i).addClass("selected").siblings().removeClass("selected"); 24 } 25 timer=setTimeout(animate,4000); 26 } 27 timer=setTimeout(animate,4000); 28 //點擊上一張，則播放上一張圖片
29 $(".pre-btn").click(function(){ 30 clearTimeout(timer); 31 if(!$pic.is(":animated")){ 32 if(i>0){ 33 $pic.animate({left:'+='+$width},"normal"); 34 i--; 35 } 36 else{ 37 $pic.animate({left:-$width*($pages-1)},"normal"); 38 i=$pages-1; 39 } 40 $btns.eq(i).addClass("selected").siblings().removeClass("selected"); 41 } 42 timer=setTimeout(animate,4000); 43 }); 44 //點擊下一張按鈕，則播放下一張圖片
45 $(".next-btn").click(function(){ 46 clearTimeout(timer); 47 if(!$pic.is(":animated")){ 48 if(i<$pages-1){ 49 $pic.animate({left:'-='+$width},"normal"); 50 i++; 51 } 52 else{ 53 $pic.animate({left:0},"normal"); 54 i=0; 55 } 56 $btns.eq(i).addClass("selected").siblings().removeClass("selected"); 57 } 58 timer=setTimeout(animate,4000); 59 }); 60 //點擊小圓圈時，播放小圓圈所表明的圖片
61 $btns.each(function(index){ 62 $(this).click(function(){ 63 clearTimeout(timer); 64 if(!$pic.is(":animated")){ 65 $pic.animate({left:-$width*index},"normal"); 66 i=index; 67 $(this).addClass("selected").siblings().removeClass("selected"); 68 } 69 timer=setTimeout(animate,4000); 70 }) 71
72 }) 73 </script>
第二種輪播方式是：全部圖片都堆疊在一塊兒，而後定時顯示一張圖片，隱藏其它圖片來實現輪播，js代碼以下：（html結構不變，改變css佈局，使圖片堆疊在一塊兒）函數
1 <script src="jquery-3.2.1.min.js"></script>
2 <script>
3 /*圖片滾動函數*/
4 var i=0;//記錄當前圖片的順序
5 var timer;//定時器變量
6 var pic=$(".pic"); 7 $pics=$('.pic>li'); 8 var pages=$pics.length; 9 $btns=$(".btns>.btn"); 10 //定時輪播
11 function animate(){ 12 clearTimeout(timer); 13 $pics.eq(i).fadeOut(); 14 if(i<pages-1){ 15 i++; 16 }else{ 17 i=0; 18 } 19 $pics.eq(i).fadeIn(); 20 $btns.eq(i).addClass('selected').siblings().removeClass('selected'); 21 timer=setTimeout(animate,1000); 22 } 23 timer=setTimeout(animate,1000); 24 //點擊上一張，則播放上一張圖片
25 $(".pre-btn").click(function(){ 26 clearTimeout(timer); 27 $pics.eq(i).fadeOut(); 28 if(i>0){ 29 i--; 30 }else{ 31 i=pages-1; 32 } 33 $pics.eq(i).fadeIn(); 34 $btns.eq(i).addClass('selected').siblings().removeClass('selected'); 35 timer=setTimeout(animate,1000); 36 }); 37 //點擊下一張按鈕，則播放下一張圖片
38 $(".next-btn").click(function(){ 39 clearTimeout(timer); 40 $pics.eq(i).fadeOut(); 41 if(i==pages-1){ 42 i=0; 43 }else{ 44 i++; 45 } 46 $pics.eq(i).fadeIn(); 47 $btns.eq(i).addClass('selected').siblings().removeClass('selected'); 48 timer=setTimeout(animate,1000); 49 }); 50 //點擊小圓圈時，播放小圓圈所表明的圖片
51 $btns.each(function(index){ 52 $(this).click(function(){ 53 clearTimeout(timer); 54 if(i!==index){ 55 $pics.eq(i).fadeOut(); 56 $pics.eq(index).fadeIn(); 57 $btns.eq(index).addClass('selected').siblings().removeClass('selected'); 58 } 59 i=index; 60 timer=setTimeout(animate,1000); 61 }); 62 }) 63 </script>
相關文章
- 1. 輪播圖實現
- 2. 實現輪播圖
- 3. Banner輪播圖的實現
- 4. 輪播圖的實現
- 5. JS輪播圖的實現
- 6. JavaScript實現的輪播圖
- 7. Android 輪播圖的實現
- 8. css實現輪播圖
- 9. Viewpager實現圖片輪播
- 10. 用js實現輪播圖
- 更多相關文章...
- • 現實生活中的 XML - XML 教程
- • Hibernate實現增刪改查 - Hibernate教程
- • ☆基於Java Instrument的Agent實現
- • Spring Cloud 微服務實戰(三) - 服務註冊與發現
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 輪播圖實現
- 2. 實現輪播圖
- 3. Banner輪播圖的實現
- 4. 輪播圖的實現
- 5. JS輪播圖的實現
- 6. JavaScript實現的輪播圖
- 7. Android 輪播圖的實現
- 8. css實現輪播圖
- 9. Viewpager實現圖片輪播
- 10. 用js實現輪播圖