原生js轮播图实现

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6         <style type="text/css">
  7     * {
  8         padding: 0;
  9         margin: 0;
 10         list-style: none;
 11         border: 0;
 12     }
 13
 14     .all {
 15         width: 500px;
 16         height: 200px;
 17         padding: 7px;
 18         border: 1px solid #ccc;
 19         margin: 100px auto;
 20         position: relative;
 21     }
 22
 23     .screen {
 24         width: 500px;
 25         height: 200px;
 26         overflow: hidden;
 27         position: relative;
 28     }
 29
 30     .screen li {
 31         width: 500px;
 32         height: 200px;
 33         overflow: hidden;
 34         float: left;
 35     }
 36
 37     .screen ul {
 38         position: absolute;
 39         left: 0;
 40         top: 0px;
 41         width: 3000px;
 42     }
 43
 44     .all ol {
 45         position: absolute;
 46         right: 10px;
 47         bottom: 10px;
 48         line-height: 20px;
 49         text-align: center;
 50     }
 51
 52     .all ol li {
 53         float: left;
 54         width: 20px;
 55         height: 20px;
 56         background: #fff;
 57         border: 1px solid #ccc;
 58         margin-left: 10px;
 59         cursor: pointer;
 60     }
 61
 62     .all ol li.current {
 63         background: yellow;
 64     }
 65
 66     #arr {
 67         display: none;
 68     }
 69
 70     #arr span {
 71         width: 40px;
 72         height: 40px;
 73         position: absolute;
 74         left: 5px;
 75         top: 50%;
 76         margin-top: -20px;
 77         background: #000;
 78         cursor: pointer;
 79         line-height: 40px;
 80         text-align: center;
 81         font-weight: bold;
 82         font-family: ‘黑体‘;
 83         font-size: 30px;
 84         color: #fff;
 85         opacity: 0.3;
 86         border: 1px solid #fff;
 87     }
 88
 89     #arr #right {
 90         right: 5px;
 91         left: auto;
 92     }
 93     </style>
 94 </head>
 95 <body>
 96     <div class="all" id=‘all‘>
 97     <div class="screen" id="screen">
 98         <ul id="ul">
 99             <li><img src="images/carousel/1.jpg" width="500" height="200" /></li>
100             <li><img src="images/carousel/2.jpg" width="500" height="200" /></li>
101             <li><img src="images/carousel/3.jpg" width="500" height="200" /></li>
102             <li><img src="images/carousel/4.jpg" width="500" height="200" /></li>
103             <li><img src="images/carousel/5.jpg" width="500" height="200" /></li>
104         </ul>
105         <ol>
106         </ol>
107         <div id="arr">
108             <span id="left"><</span>
109             <span id="right">></span>
110         </div>
111     </div>
112 </div>
113
114 <script>
115     //1.获取事件源
116     var all = document.getElementById("all");
117     var screen = all.firstElementChild || all.firstChild;
118     var imgWidth = screen.offsetWidth;
119     var ul = screen.firstElementChild || screen.firstChild;
120     var ol = screen.children[1];
121     var div = screen.lastElementChild || screen.lastChild;
122     var spanArr = div.children;
123
124     //2.复制第一张图片所在的li,添加到ul的最后面
125     var ulNewLi = ul.children[0].cloneNode(true);
126     ul.appendChild(ulNewLi);
127
128     //3.给ol添加li,ul的个数-1个,并点亮第一个按钮
129     for (var i = 0; i < ul.children.length - 1; i++) {
130         var olNewLi = document.createElement("li");
131         olNewLi.innerHTML = i + 1;
132         ol.appendChild(olNewLi);
133     }
134
135     var olLiArr = ol.children;
136     olLiArr[0].className = "current";
137
138     //4.鼠标放到ol的li上,切换图片
139     for (var i = 0; i < olLiArr.length; i++) {
140         olLiArr[i].index = i;
141         olLiArr[i].onmouseover = function(){
142             for (var j = 0; j < olLiArr.length; j++) {
143                 olLiArr[j].className = "";
144             }
145             this.className = "current";
146             //鼠标放到小的方块上的时候索引值和key以及square同步
147             key = square = this.index;
148             //移动盒子
149             animate(ul,-this.index * imgWidth);
150         }
151     }
152
153     //5.添加定时器
154     var timer = setInterval(autoPlay,1000);
155     //固定向右切换图片,两个定时器(一个记录图片,一个记录小方块)
156     var key = 0;
157     var square = 0;
158
159     function autoPlay(){
160         //通过控制key的自增来模拟图片的索引值,然后移动ul
161         key ++;
162         if (key > olLiArr.length) {
163             //图片已经滑动到最后一张,接下来,跳转到第一张,然后在滑动到第二张
164             ul.style.left = 0;
165             key = 1;
166         }
167         animate(ul,-key * imgWidth);
168         //通过控制square的自增来模拟小方块的索引值,然后点亮盒子
169         square ++;
170         if (square > olLiArr.length - 1) {
171             square = 0;
172         }
173         for (var i = 0; i < olLiArr.length; i++) {
174             olLiArr[i].className = "";
175         }
176         olLiArr[square].className = "current";
177     }
178
179     //鼠标放上去清除定时器,移开后再开启定时器
180     all.onmouseover = function(){
181         div.style.display = "block";
182         clearInterval(timer);
183     }
184     all.onmouseout = function(){
185         div.style.display = "none";
186         timer = setInterval(autoPlay, 1000);
187     }
188
189     //6.左右切换图片,鼠标放上去显示,移开隐藏
190     spanArr[0].onclick = function(){
191         //通过控制key的自增来模拟图片的索引值,然后移动ul
192         key --;
193         if (key < 0) {
194             //先移动到最后一张,然后key的值取之前一张的索引值,然后在向前移动
195             ul.style.left = -imgWidth * (olLiArr.length) + "px";
196             key = olLiArr.length - 1;
197         }
198         animate(ul, -key * imgWidth);
199
200
201             //通过控制square的自增来模拟小方块的索引值,然后点亮盒子
202         //排他思想做小方块
203         square--;
204         if (square < 0) { //索引值不能大于等于5,如果等于5,立刻变为0;
205             square = olLiArr.length - 1;
206         }
207         for (var i = 0; i < olLiArr.length; i++) {
208             olLiArr[i].className = "";
209         }
210         olLiArr[square].className = "current";
211     }
212     spanArr[1].onclick = function() {
213         //右侧的和定时器一模一样
214         autoPlay();
215     }
216             function animate(ele, target) {
217         clearInterval(ele.timer);
218         var speed = target > ele.offsetLeft ? 10 : -10;
219         ele.timer = setInterval(function() {
220             var val = target - ele.offsetLeft;
221             ele.style.left = ele.offsetLeft + speed + "px";
222             if (Math.abs(val) < Math.abs(speed)) {
223                 ele.style.left = target + "px";
224                 clearInterval(ele.timer);
225             }
226         }, 10)
227     }
228
229
230     //7.
231 </script>
232 </body>
233 </html>

原文地址:https://www.cnblogs.com/knuzy/p/8850298.html

时间: 2024-11-02 23:54:54

原生js轮播图实现的相关文章

原生JS轮播图

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>轮播图</title> 6 </head> 7 <style> 8 *{ 9 margin:0px; 10 padding:0px; 11 } 12 13 li{ 14 list-style: none; /*取消li默认的前缀*/ 15 } 16 17

第六十八天 js轮播图

1.浮动与定位结合使用 浮动与相对定位 //1.两者均参与布局 //2.主浮动布局,相对布局辅助完成布局微调 //3.相对定位布局微调不同于盒模型布局微调,相对定位布局不影响盒子原有位置,就会影响兄弟盒子布局 浮动与绝对定位 // 1.只保留绝对定位布局 // 2.脱离文档流的盒子宽可以交于内部撑开 2.小米更新数据案例 默认活跃状态 1.将初始的li设置一个active类名(拥有该类名就拥有活跃状态表现的属性)] 更改活跃状态 let active_index = 0; // 活跃状态的索引

JS 轮播图(无缝连接的轮播图实现,含代码供参考)

需求:实现轮播图,图片无缝切换,自动播放. 实现效果: 思考一下:在图片列表后面多加一张图片,这张图片是第一张图片(为了确保无缝衔接).图片就是平铺放在一个pic里面的,每次移动就是改变的pic的left值. 来撸代码~~.所有的代码放在最后面,这里只讲一些重要的方法: 为防止懵逼:先贴出封装函数move()的代码供参考 function move(ele, attr, speed, target, callback){ //获取当前的位置 //从左往右进行移动 --- current<targ

原生javascript轮播图!

<style> .box { width: 500px; height: 275px; position: relative; margin: 100px auto; } a { text-decoration: none; font-size: 28px; text-align: center; line-height: 80px; display: inline-block; width: 40px; color:#fff; background:rgba(0,0,0,0.6); posi

HTML+CSS +JS 轮播图

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>轮播图</title> 6 <style> 7 #container{ 8 width: 450px; 9 height: 270px; 10 margin: 0 auto; 11 margin-top: 100px; 12 position: relative;

根据js轮播图原理写出合理的结构与样式、并实现js交互效果

在JS中,能用 . 的地方一般都可以用 [ ] 取代 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>

20150627原生js轮播器

html==== <div id="banner"> <div id="left" class="left"><span></span></div> <div id="right" class="right"><span></span></div> <ul class="pic&quo

islider.js轮播图

本篇文章地址:https://www.cnblogs.com/Thehorse/p/11601032.html css #iSlider-effect-wrapper { height: 220px; width: 100%; margin: 0 auto; margin-top: 0.2rem; overflow: hidden; position: relative; } .iSlider-effect ul{ list-style: none; padding: 0; margin: 0;

JS轮播图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin:0;padding:0;list-style:none;} a{text-decoration: none;color: #fff