兩種方法實現顯示多張圖片的輪播
阿新 • • 發佈：2020-10-07
兩種方法實現顯示多張圖片的輪播
第一種：jQuery 方法.animate + 浮動排列布局
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>顯示多張圖片的輪播</title> 6 <style type="text/css"> 7 html,body{ 8 padding:0; 9 margin:10px auto; 10 } 11#warpper{ 12 width:1120px;/*一列展示幾個的寬度 ,4*280 動態算*/ 13 height:150px; 14 margin:0 auto; 15 position:relative; 16 overflow:hidden; 17 border:1px solid red; 18 } 19 #inner{ 20 /*元素個數*280(div寬度) 動態算 1120px[4個元素] 1440px[5個元素] 1680px[6個元素] 2240px[8個元素]21 用JS動態設定改值 22 */ 23 width:2520px; 24 position:absolute; 25 } 26 #inner div{ 27 width:270px; 28 height:150px; 29 /*使用浮動元素排列*/ 30 float:left; 31 margin:0 5px; 32 } 33 #optrbtn{ 34 text-align:center; 35 font-size:20px;36 } 37 #optrbtn span { 38 display:inline-table; 39 border:1px solid red; 40 width:50px; 41 cursor:pointer; 42 margin-right:5px; 43 } 44 #inner div img{ 45 width: 100%; 46 height: 100%; 47 } 48 </style> 49 50 <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script> 51 <script type="text/javascript"> 52 53 $(function(){ 54 55 var curNum=0; 56 var count=$("#inner").children('div').length;//8 57 58 //左滑動 59 $(".btnleft").click(function(){ 60 //如果到了最後一個元素，停止 61 if((count-curNum)<=4){ 62 return false; 63 } 64 curNum+=1; 65 $("#inner").animate({ 66 // 每次點選都從左邊裁剪280畫素 67 left:'-=280' 68 },500); 69 }); 70 71 //右滑動 72 $(".btnright").click(function(){ 73 //如果到了第一個元素，停止 74 if(curNum<=0){ 75 return false; 76 } 77 curNum-=1; 78 $("#inner").animate({ 79 // 每次點選都從左邊補充280畫素 80 left:'+=280' 81 },500); 82 }); 83 }); 84 85 </script> 86 </head> 87 88 <body> 89 90 <div id="main"> 91 <div id="warpper"> 92 <div id="inner"> 93 <div><img src="../img/sucai/full1.jpg"/></div> 94 <div><img src="../img/sucai/full2.jpg"/></div> 95 <div><img src="../img/sucai/full3.jpg"/></div> 96 <div><img src="../img/sucai/full4.jpg"/></div> 97 <div><img src="../img/sucai/full5.jpg"/></div> 98 <div><img src="../img/sucai/full6.jpg"/></div> 99 <div><img src="../img/sucai/full7.jpg"/></div> 100 <div><img src="../img/sucai/full8.jpg"/></div> 101 <div><img src="../img/sucai/full9.jpg"/></div> 102 </div> 103 </div> 104 </div> 105 106 <br /> 107 <br /> 108 109 <div id="optrbtn"> 110 <span class="btnleft">«</span> 111 <span class="btnright">»</span> 112 </div> 113 114 </body> 115 </html>
第二種：負邊距 + flex排列布局
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>顯示多張圖片的輪播</title> 6 <style type="text/css" rel="stylesheet"> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 #main{ 12 width: 100%; 13 height: 125px; 14 display: flex; 15 margin-top: 120px; 16 } 17 #d1{ 18 width: 1162px; 19 height: 125px; 20 display: flex; 21 overflow:hidden; 22 } 23 #d11{ 24 width: 64px; 25 height: 125px; 26 line-height: 125px; 27 text-align: center; 28 font-size: 28px; 29 cursor: pointer; 30 z-index: 2; 31 background: #FFFFFF; 32 } 33 #d13{ 34 width: 64px; 35 height: 125px; 36 line-height: 125px; 37 text-align: center; 38 font-size: 28px; 39 cursor: pointer; 40 z-index: 2; 41 background: #FFFFFF; 42 } 43 #d12{ 44 /*元素個數*207(div寬度) 動態算 828px[4個元素] 1035px[5個元素] 1242px[6個元素] 2070px[10個元素] 45 用JS動態設定改值 46 */ 47 /*先預設足夠放10張圖片的寬度*/ 48 width: 2070px; 49 height: 125px; 50 /*使用彈性佈局排列*/ 51 display: flex; 52 transition:all 0.3s linear 0s; 53 /*再將多出來的5張圖片的寬度用負邊距隱藏起來*/ 54 margin-right: -1035px; 55 } 56 #d12 .d120{ 57 width: 207px; 58 height: 125px; 59 z-index: 1; 60 } 61 .ddd{ 62 width: 170px; 63 height: 80px; 64 margin-left: 18px; 65 margin-top: 23px; 66 } 67 .ddd img{ 68 width: 100%; 69 height: 100%; 70 } 71 </style> 72 </head> 73 <body> 74 75 <div id="main"> 76 <div style="width: 102px;height:125px;background: #FFFFFF;z-index: 3;"></div> 77 <div id="d1"> 78 <div id="d11">《</div> 79 <div id="d12"> 80 <div class="d121 d120"><div class="ddd"><img src="../img/sucai/full1.jpg"></div></div> 81 <div class="d122 d120"><div class="ddd"><img src="../img/sucai/full2.jpg"></div></div> 82 <div class="d121 d120"><div class="ddd"><img src="../img/sucai/full3.jpg"></div></div> 83 <div class="d122 d120"><div class="ddd"><img src="../img/sucai/full4.jpg"></div></div> 84 <div class="d121 d120"><div class="ddd"><img src="../img/sucai/full5.jpg"></div></div> 85 <div class="d122 d120"><div class="ddd"><img src="../img/sucai/full6.jpg"></div></div> 86 <div class="d121 d120"><div class="ddd"><img src="../img/sucai/full7.jpg"></div></div> 87 <div class="d122 d120"><div class="ddd"><img src="../img/sucai/full8.jpg"></div></div> 88 <div class="d121 d120"><div class="ddd"><img src="../img/sucai/full9.jpg"></div></div> 89 <div class="d122 d120"><div class="ddd"><img src="../img/sucai/full1.jpg"></div></div> 90 </div> 91 <div id="d13">》</div> 92 </div> 93 <div style="width: 102px;height:125px;background: #FFFFFF;z-index: 3;"></div> 94 </div> 95 96 </body> 97 <script type="text/javascript"> 98 99 let $ = function(id){ 100 return document.getElementById(id); 101 }; 102 103 //移動的寬度 104 var moveLength = 0; 105 106 // 右移 107 $("d13").addEventListener("click",function () { 108 moveLength +=207; 109 // 判斷移動的寬度有沒有超出5張圖片的寬度，如果超出，則減掉一張圖片的寬度 110 if (moveLength<=1035){ 111 $("d12").style = "transform:translateX(-"+moveLength+"px);" 112 }else if(moveLength>1035){ 113 moveLength -= 207; 114 } 115 }); 116 117 // 定時器，每個3秒移動一次 118 setInterval(function () { 119 moveLength +=207; 120 if (moveLength<=1035){//是否移動到盡頭 121 $("d12").style = "transform:translateX(-"+moveLength+"px);" 122 }else if(moveLength>1035){//是否移動到盡頭 123 moveLength -= 1242; 124 $("d12").style = "transform:translateX(-"+moveLength+"px);" 125 } 126 },3000); 127 128 // 左移 129 $("d11").addEventListener("click",function () { 130 // 首先判斷圖片是不是移動過了，是否移到盡頭，然後再做調整移動的寬度 131 if (moveLength===1035){//是否移到了盡頭 132 $("d12").style = "transform:translateX(-"+moveLength+"px);"; 133 moveLength -=207; 134 $("d12").style = "transform:translateX(-"+moveLength+"px);"; 135 }else if(moveLength>0&&moveLength<1035){//是否在原點與盡頭之間 136 moveLength -=207; 137 $("d12").style = "transform:translateX(-"+moveLength+"px);"; 138 }else if(moveLength===0){//是否回到原點 139 moveLength -= 207; 140 moveLength += 207; 141 } 142 }) 143 144 </script> 145 </html>
其實方法並不止兩種，這裡只用兩種簡單的案例來實現而已，你也可以舉一反三用多種方法實現。