原生js實現圖片輪播效果
思路：設置父容器（必定寬度，必定高度，相對定位，子容器超出部分進行隱藏），子容器圖片並排（浮動，絕對定位，每次點擊進行相應的左或右偏移量）
1.html:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Carousel figure</title>
5 <meta charset="utf-8">
6 <!-- 瀏覽器標籤頁顯示圖標 -->
7 <link rel="icon" type="image/x-icon" href="./images/1.jpg">
8 <link rel="stylesheet" type="text/css" href="1.css">
9 </head>
10 <body>
11 <!-- 構建container父容器 -->
12 <div class="container">
13 <!-- 圖片部分,style部分設置便於js中改變偏移量，從而實現圖片輪播-->
14 <div class="pic" style="left: 0px;">
15 <!-- 圖片部分，建議均加上alt，利於seo -->
16 <img src="./images/1.jpg" alt="1">
17 <img src="./images/2.jpg" alt="2">
18 <img src="./images/3.jpg" alt="3">
19 <img src="./images/4.jpg" alt="4">
20 <img src="./images/5.jpg" alt="5">
21 <img src="./images/6.jpg" alt="6">
22 </div>
23
24 <!-- 箭頭部分，實現下一張，上一張效果 -->
25 <a href="javascript:void(0)" class="arrow arrow_left"><</a>
26 <a href="javascript:void(0)" class="arrow arrow_right">></a>
27
28 <!-- 當前圖片id顯示 -->
29 <div class="point">
30 <span class="on">1</span>
31 <span>2</span>
32 <span>3</span>
33 <span>4</span>
34 <span>5</span>
35 <span>6</span>
36 </div>
37 </div>
38
39 <!-- html body部分加載完成，最後調用js,進行操做；不然沒法有效操做 -->
40 <script type="text/javascript" src="1.js"></script>
41 </body>
42 </html>
1.css:
1 /* body部分清一下外邊距與內邊距，不建議*（可能影響效率），主流大網站均未採用*進行清邊距 */
2 body{
3 margin: 0;
4 padding: 0;
5 }
6 a{
7 text-decoration: none;
8 color: green;
9 }
10 a:visited{
11 color: siver;
12 }
13 a:hover{
14 color: gold;
15 }
16
17 .container{
18 /* container採用相對定位relative，便於子容器進行絕對定位absolute */
19 position: relative;
20
21 /* 左右居中對齊 */
22 margin: 0 auto;
23
24 /* 每張圖片的寬度高度均爲320px, */
25 width: 320px;
26 height: 320px;
27 /* 圖片超出部分隱藏 */
28 overflow: hidden;
29 /* border: 1px solid */
30 /* 設置陰影：水平陰影偏離0，垂直陰影偏移0，模糊距離10px，顏色 */
31 box-shadow: 0 0 10px orange;
32 }
33 .pic{
34 position: absolute;
35 /* 6張圖片進行排放，故寬度爲1920px */
36 width: 1920px;
37 height: 320px;
38 }
39 .pic img{
40 /* 設置左浮動，使6張圖片排成一排 */
41 float: left;
42 width: 320px;
43 height: 320px;
44 }
45 .arrow{
46 display: block;
47
48 border-radius: 50%;
49 /* 採用字符實體，故設置字體使用font-size */
50 font-size: 60px;
51 默認隱藏箭頭， 52 display: none;
53 }
54 /* 當懸浮在container區域顯示箭頭 */
55 .container:hover .arrow{
56 display: block;
57 }
58 /* 當懸浮在arrow區域顯示箭頭 */
59 .container .arrow:hover{
60 background-color: rgba(0, 0, 0, 0.2);
61 }
62 .arrow_left{
63 position: absolute;
64 left: 30px;
65 top: 40%;
66 text-align: center;
67 width: 80px;
68 height: 80px;
69 }
70 .arrow_right{
71 position: absolute;
72 right: 30px;
73 top: 40%;
74 text-align: center;
75 width: 80px;
76 height: 80px;
77 }
78 .point{
79 position: absolute;
80 margin: 280px auto 0 80px;
81 }
82 .point span{
83 display: inline-block;
84 width: 30px;
85 height: 30px;
86 border-radius: 50%;
87 background-color: orange;
88 text-align: center;
89 cursor: pointer;
90 }
91 .point span.on{
92 background-color: red;
93 }
94 .point span:active{
95 background-color: gold;
96 }
1.js:
1 // 獲取pic組第一個
2 var pic = document.getElementsByClassName('pic')[0]; 3 // 獲取arrow_left
4 var arrow_left = document.getElementsByClassName('arrow_left')[0]; 5 // 獲取arrow_right
6 var arrow_right = document.getElementsByClassName('arrow_right')[0]; 7 // 獲取span組
8 var points=document.getElementsByTagName('span'); 9 var index=0; 10
11 // 點擊右箭頭，下一張圖片
12 arrow_right.onclick = function() { 13 next_pic(); 14 } 15 // 點擊左箭頭，上一張圖片
16 arrow_left.onclick = function() { 17 prev_pic(); 18 } 19
20 // 函數實現下一張瀏覽效果
21 function next_pic() { 22 // 最後一張，下一張變爲第一張（left值爲0）
23 if (parseInt(pic.style.left) === -1600) { 24 pic.style.left = 0 + "px"; 25 } else { 26 // 下一張
27 var pos = parseInt(pic.style.left) - 320; 28 pic.style.left = pos + 'px'; 29 } 30 index++; 31 if(index>5){ 32 index=0; 33 } 34 showPoint(); 35 } 36
37 function prev_pic() { 38 if (parseInt(pic.style.left) === 0) { 39 pic.style.left = -1600 + "px"; 40 } else { 41 var pos = parseInt(pic.style.left) + 320; 42 pic.style.left = pos + 'px'; 43 } 44 index--; 45 if(index<0){ 46 index=5; 47 } 48 showPoint(); 49 } 50
51 var timer = null; 52
53 // 自動圖片輪播，設置1s間隔
54 function autoPlay() { 55 // timer=setInterval(function(){
56 // next_pic();
57 // },1000);
58 timer = setInterval(next_pic, 1000); 59 } 60 autoPlay(); 61
62 var container = document.getElementsByClassName('container')[0]; 63 // 鼠標移動到container區域，暫停自動播放
64 container.onmouseenter = function() { 65 clearInterval(timer); 66 } 67 // 鼠標離開container區域，自動播放
68 container.onmouseleave = function() { 69 autoPlay(); 70 } 71
72 // 實現點擊相應的小按鈕圖片跳轉到相應圖片功能
73 for (var i = 0; i < points.length; i++) { 74 (function(i){ 75 points[i].onclick=function (){ 76 //0~0,1~-320...5~-1600
77 pic.style.left=-320*i +"px"; 78 }; 79 index=i; 80 //沒法點擊point，使其變色
81 showPoint(); 82 } 83 )(i); 84 } 85
86 // 實現相應圖片對應相應小按鈕功能
87 function showPoint(){ 88 for(var i=0;i<points.length;i++){ 89 points[i].className=""; 90 } 91 points[index].className="on"; 92 }
相關文章
- 1. JS實現---圖片輪播效果
- 2. js實現圖片輪播效果
- 3. 基於原生js的圖片輪播效果簡單實現
- 4. 原生js實現圖片輪播
- 5. 原生JS實現幻燈片輪播效果
- 6. 原生 js 實現各種輪播圖效果
- 7. 使用原生js實現輪播圖效果
- 8. 原生js實現簡單圖片輪播效果+用bootstrap4框架實現輪播圖 對比
- 9. 原生javascript實現圖片輪播效果
- 10. QLabel實現圖片輪播效果
- 更多相關文章...
- • 現實生活中的 XML - XML 教程
- • SVG 模糊效果 - SVG 教程
- • ☆基於Java Instrument的Agent實現
- • Java Agent入門實戰（三）-JVM Attach原理與使用
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章