两种⽅法实现显⽰多张图⽚的轮播两种⽅法实现显⽰多张图⽚的轮播
第⼀种：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/*使⽤浮动元素排列*/
30float: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
55var curNum=0;
56var count=$("#inner").children('div').length;//8
57
58//左滑动
59 $(".btnleft").click(function(){
60//如果到了最后⼀个元素，停⽌
61if((count-curNum)<=4){
62return false;
63 }
64 curNum+=1;
65 $("#inner").animate({
66// 每次点击都从左边裁剪280像素
67 left:'-=280'
68 },500);
69 });
70
71//右滑动
72 $(".btnright").click(function(){
73//如果到了第⼀个元素，停⽌
74if(curNum<=0){
75return 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 ></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>
html图片展示特效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 ></div>
94 </div>
95
96 </body>
97 <script type="text/javascript">
98
99 let $ = function(id){
ElementById(id);
101 };
102
103//移动的宽度
104var moveLength = 0;
105
106// 右移
107 $("d13").addEventListener("click",function () {
108 moveLength +=207;
109// 判断移动的宽度有没有超出5张图⽚的宽度，如果超出，则减掉⼀张图⽚的宽度
110if (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;
120if (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// ⾸先判断图⽚是不是移动过了，是否移到尽头，然后再做调整移动的宽度
131if (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>
其实⽅法并不⽌两种，这⾥只⽤两种简单的案例来实现⽽已，你也可以举⼀反三⽤多种⽅法实现。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论