两种方法实现显示多张图片的轮播
第一种：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>
其实方法并不止两种，这里只用两种简单的案例来实现而已，你也可以举一反三用多种方法实现。