原生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     img{
 18         display: block;     /*解决图片之间3px的问题*/
 19     }
 20
 21     /*用一个容器包裹起来*/
 22     #container{
 23         position: relative;
 24         margin: 0 auto;
 25         margin-top: 130px;
 26         width: 750px;
 27         height: 352px;
 28         border: 1px solid #ccc;
 29     }
 30
 31     /*隐藏掉容器所有的图片*/
 32     #container>ul>li{
 33        position:absolute;
 34        display: none;
 35
 36     }
 37
 38     /*显示容器中的图片active属性的那张*/
 39     #container>ul>li.active{
 40         display: block;
 41     }
 42
 43     #buttons{
 44         position: absolute;
 45         width: 180px;
 46         height: 20px;
 47         bottom: 20px;
 48         left: 50%;
 49         margin-left: -90px;
 50         border-radius: 20px;
 51         background-color:rgba(255, 255, 255, 0.2);
 52     }
 53
 54     /*弹性盒子*/
 55     #buttons>ul{
 56         width: 100%;
 57         height: 100%;
 58         display: flex;
 59         align-items: center;            /*垂直方向居中*/
 60         justify-content:space-around;   /*水平方向居中*/
 61     }
 62
 63     #buttons>ul>li{
 64         width: 20px;
 65         height: 20px;
 66         border-radius: 50%;
 67         text-align: center;
 68         background-color: #FFF;
 69     }
 70
 71     #buttons>ul>li.active_butto{
 72         background-color: #DB192A;
 73     }
 74     #container>.arrow{
 75         position: absolute;
 76         width: 30px;
 77         height: 60px;
 78         top: 50%;
 79         margin-top: -30px;
 80         font-size: 30px;
 81         line-height: 60px;
 82         text-align: center;
 83         background-color: rgba(0, 0, 0, 0.1);
 84         user-select: none;                  /*禁止选中文字(多次点击箭头会选中箭头)*/
 85     }
 86     #container>.arrow:hover{
 87         background: rgba(0, 0, 0, 0.5);
 88         cursor: pointer;
 89     }
 90     #container>#left{
 91         left: 0px;
 92     }
 93     #container>#right{
 94         right: 0px;
 95     }
 96
 97 </style>
 98 <body>
 99     <div id="container">
100         <!-- 图片 -->
101         <ul>
102             <li class="active"><img src="./1.jpg" alt="1"></li>
103             <li><img src="./2.jpg" alt="2"></li>
104             <li><img src="./3.jpg" alt="3"></li>
105             <li><img src="./4.jpg" alt="4"></li>
106             <li><img src="./5.jpg" alt="5"></li>
107         </ul>
108         <!-- 圆点 -->
109         <div id="buttons">
110             <ul>
111                 <li class="active_butto">1</li>
112                 <li>2</li>
113                 <li>3</li>
114                 <li>4</li>
115                 <li>5</li>
116             </ul>
117         </div>
118         <!-- 箭头 -->
119         <span id="left" class="arrow">&lt;</span>
120         <span id="right" class="arrow">&gt;</span>
121     </div>
122 <script>
123     var container = document.getElementById("container"); /* 获取元素*/
124     var bList = document.getElementById("buttons");
125     var left = document.getElementById("left");
126     var right = document.getElementById("right");
127     var lis = container.children[0].children;             /* .children查找该元素的所有子类,返回的是类数组*/
128     var blis = bList.children[0].children;
129     var len = lis.length;
130     var index = 0;
131     var timer;
132     var next = function() {
133         lis[index].removeAttribute("class");                            /*移除属性*/
134             blis[index].removeAttribute("class");                       /*移除属性*/
135             index++;                                                    /*设置标志*/
136             if(index == len){
137                 index = 0;
138             }
139             lis[index].setAttribute("class", "active");                 /*添加属性*/
140             blis[index].setAttribute("class", "active_butto");          /*添加属性*/
141     }
142     var autoPlay = function() {
143             timer = setInterval(function() {
144             next();
145         },2000);
146     }
147     autoPlay();
148     container.onmouseenter = function() {
149         clearInterval(timer);
150     }
151     container.onmouseleave = function() {
152         autoPlay();
153     }
154     for(var i = 0; i < blis.length; i++) {
155         blis[i].onmouseover = (function(i) {              /*使用闭包解决函数循环先执行导致i一直是数组的length-1的问题*/
156             return function() {
157                 lis[index].removeAttribute("class");                    /*移除属性*/
158                 blis[index].removeAttribute("class");
159                 index = i;
160                 lis[index].setAttribute("class", "active");             /*添加属性*/
161                 blis[index].setAttribute("class", "active_butto");
162             };
163         })(i);
164     }
165     left.onclick = function() {
166         lis[index].removeAttribute("class");              /*移除属性*/
167         blis[index].removeAttribute("class");
168         index--;
169         if(index < 0){
170                 index = blis.length - 1;
171         }
172         lis[index].setAttribute("class", "active");       /*添加属性*/
173         blis[index].setAttribute("class", "active_butto");       /*添加属性*/
174     }
175     right.onclick = function() {
176         next();
177     }
178 </script>
179 </body>
180 </html>

原文地址:https://www.cnblogs.com/XTheodore/p/12154442.html

时间: 2024-11-09 03:19:34

原生JS轮播图的相关文章

原生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 bor

第六十八天 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