原生js輪播圖實現

阿新 • • 發佈：2018-04-16

索引獲取 mouseout abs length ati point css ack

  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>

原生js輪播圖實現

索引獲取 mouseout abs length ati point css ack 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta chars

適合【前端入門者】的原生JS輪播圖實現

學前端已經一年多了，在JavaScript方面，學會了基本語法，頁面操作之後，慢慢走向了框架這條不歸路，框架用起來真的是省時省力，效果好、程式碼少、還節省時間。在前幾天去做一個頁面的時候，要求只能是用以前版本的框架，我就去找框架之前的版本，可是在某些官網上老版本的框架已經不存在了，就我這暴脾氣

一個原生JS輪播圖外掛的全部實現

前段時間把模組化開發的學習整理了之後就想著做個小外掛。本文記錄個人獨立完成的一個原生JS輪播圖外掛的實現過程。嗯，東西很簡單，大佬勿噴。github求start 涉及知識點：模組化開發 ES6 JS HTML5和css

最簡單的原生js輪播圖（適合新手）

經過幾天的努力，終於攻克了這一難題，於是迫不及待的想要分享給大家，編寫之前，我也看了不少其他博主的部落格，大多是用偏移量寫的，對新手來說，還是有些難以理解，雖然可能實現的需求不一樣，但我想先從簡入手，所以自己查閱資料，修改bug，終於完成。話不多說，上程式碼：如果可以

JS原生輪播圖實現

作為一個PHP全棧攻城獅，不僅要會後端PHP和資料庫，還要會前端JS。今天原始碼時代 PHP培訓學科老師要和大家分享一下JS原生編寫輪播圖的外掛。說起輪播圖，很多人會選擇使用各種外掛，比如基於JQuery或其它框架的。不瞞大家，我也用過，甚至還用過Flash的輪播圖。總體來說，用起來是比較簡

原生JS輪播-各種效果的極簡實現

star element length for sha 部分 wid 方式高度寒假持續摸魚中~此為老早以前博客的重寫，當時還是分開寫的，這裏匯總重寫，正好復習一遍~ 春招我來了！所有有意思的，一股腦先扔進收藏，然後再也不看哈哈，真是糟糕。今日事，今日畢，說起來容易

js輪播圖的實現

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style> &nbs

JS面向物件輪播圖實現

// 面對過程寫法//var pci=document.getElementById('pci'); //var ul=document.getElementById('ul'); //var li=document.getElementsByTagName('li'); //var left=documen

自寫：js輪播圖鼠標劃過下方按鈕，繼續下一個

就會定時器 pac color lis hover 路線 css 輪播圖自寫：js輪播圖鼠標劃過下方按鈕，繼續下一個定時器關閉後再開啟一般都會按照原來的路線繼續走，不會因為你點了3而下個就會是4 $(".focus-rad>ul>li").hover(

js輪播圖

輪播圖定時器 .com logs images lun script img doc <script> var i = 0; //創建一個定時器 function init(){ setInterval(changeImg,2000); } //定義切換圖片的

JavaScript的案例（數據校驗，js輪播圖，頁面定時彈窗）

頁面 span one align 數據校驗 lse 格式用戶輸入 ade 1.數據校驗步驟 1.確定事件（onsubmit）並綁定一個函數 2.書寫這個函數，獲取數據，並綁定id

vue輪播圖報錯 Uncaught RangeError: Maximum call stack size exceeded 附完整輪播圖實現程式碼

Vue初學者，寫專案實現輪播圖時報錯且頁面初始化後不會自動輪播。設定的計時器時長是6000，但報錯是幾乎沒有停歇的報錯。檢查核心程式碼，發現錯誤一：這裡導致輪播圖初始化不輪播 mounted的方法寫在了methods裡面，將mounted的方法挪出，解決頁面初始化輪播圖不

移動端輪播圖實現

1：HTML樣式<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-s

js輪播圖封裝

banner.js結合move.js實現封裝輪播圖 banner.js程式碼 var swiper = (function() { var timer = null; return { init(ele) { if(typeof ele == 'string') { e

最簡單的輪播圖實現

需求：每隔2秒切換一張圖片的效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>輪播圖</title>

js輪播圖程式碼

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .banner{

JS-----輪播圖封裝（新手）

效果圖：3D旋轉+切割 //輪播圖 //使用例子: //1.在需要的位置放置一個元素，樣式什麼的自己給，不影響 <div id="lunbotu" style="width: 400px;height: 200px;"> &

MVP+Recycleview實現輪播圖實現京東秒殺效果

MVP+Recycleview實現輪播圖，京東秒殺 2018年12月02日 19:55:26 遷就 閱讀數：830 1：先看看效果 2：build.gradle中匯入依賴 //依賴 implementation ‘com.jakewharton:butterkn

微信小程式學習筆記（三）----初識小程式程式碼、輪播圖實現

從這一節開始我們就開始接觸小程式前臺程式碼了，其實前臺邏輯還是比較簡單的，學習難度比學習一個前端框架難不了多少，記得以前一開始學前端框架的時候，流程就是：熟悉一下--檢視元件--找到要用的--複製貼上，其實對於大部分人來說，小程式前臺也是一樣。首先，我們可以先看下小程式的

Html5+JavaScript輪播圖實現方式

這…足夠應付大學老師的作業了 /偷笑這應該是大學JavaScript老師常佈置的js作業之一,只做了三個圖片,可以修改圖片和尺寸,修改好名字之後替換即可,如果要新增第四張圖片所有的px都要修改.一開始就是用三張圖片做的,就沒弄四張照片圖片自己找吧, 樣式圖

原生js輪播圖實現

相關推薦