JavaScript實現簡單的輪播圖效果
輪播圖：在一個模塊或者說窗口，通過電腦上鼠標點擊、手機上手指滑動后，可以看到多張圖片。這些圖片就都是輪播圖，這個模塊就叫做輪播模塊。
如何實現輪播圖
如何才能在js里面做成一個輪播圖呢，比如下面這種的，可以自動生成圖片對應的小圓點、點擊左右箭頭可以跳到上或下一張圖片、每隔幾秒自動輪播，還可以點擊小小圓點去到指定的圖片。
HTML結構
首先我們創建一個HTML頁面，這個結構很簡單，用一個大的div嵌套兩個div，取個名字叫slider，上面的div用來裝圖片，取個名字叫slider-img，下面的div就是控件，用來裝上下張圖片的按鈕和小圓點，這個就叫做slider-ctrl。
<!DOCTYPE html><html><head lang='en'> <meta charset='UTF-8'> <title></title> <link rel='stylesheet' href='http://m.cgvv.com.cn/bcjs/css/index.css'/> <script src='http://m.cgvv.com.cn/public.js'></script> <script src='http://m.cgvv.com.cn/bcjs/js/index.js'></script></head><body> <div id='slider'><div class='slider-img'> <ul><li><a href='http://m.cgvv.com.cn/bcjs/13959.html#'><img src='http://m.cgvv.com.cn/bcjs/images/1.jpg' alt=''/></a></li><li><a href='http://m.cgvv.com.cn/bcjs/13959.html#'><img src='http://m.cgvv.com.cn/bcjs/images/2.jpg' alt=''/></a></li><li><a href='http://m.cgvv.com.cn/bcjs/13959.html#'><img src='http://m.cgvv.com.cn/bcjs/images/3.jpg' alt=''/></a></li><li><a href='http://m.cgvv.com.cn/bcjs/13959.html#'><img src='http://m.cgvv.com.cn/bcjs/images/4.jpg' alt=''/></a></li><li><a href='http://m.cgvv.com.cn/bcjs/13959.html#'><img src='http://m.cgvv.com.cn/bcjs/images/5.jpg' alt=''/></a></li><li><a href='http://m.cgvv.com.cn/bcjs/13959.html#'><img src='http://m.cgvv.com.cn/bcjs/images/6.jpg' alt=''/></a></li> </ul></div><div class='slider-ctrl'>//在這里自動生成小圓點 <span id='prev'></span> <span id='next'></span></div> </div></body></html>
CSS代碼
css代碼非常簡單，略。
* { margin: 0; padding: 0;}.slider { width: 310px; height: 265px; margin: 100px auto; position: relative; overflow: hidden;}.slider-img { width: 310px; height: 220px;}ul { list-style: none;}li { position: absolute; top: 0; left: 0;}.slider-ctrl { text-align: center; padding-top: 10px;}.slider-ctrl-con { display: inline-block; width: 24px; height: 24px; background: url(../images/icon.png) no-repeat -24px -780px; text-indent: -99999px; margin: 0 5px; cursor: pointer;}.slider-ctrl-con.current { background-position: -24px -760px;}.prev,.next { position: absolute; top: 40%; width: 30px; height: 35px; background: url(../images/icon.png) no-repeat;}.prev { left: 10px;}.next { right: 10px; background-position: 0 -44px;}
js代碼
首先需要做一波需求分析，能夠理清思路，然后在來一步一步的寫代碼。我們先獲取相關的元素，然后根據圖片數量生成對應的小圓點，由于圖片是堆疊在一起的，我們把其他的圖都放到右邊隱藏起來，顯示第一張圖片即可。隨后需要點亮第一個小圓點，保證小圓點和圖片是綁定在一起的。然后我們需要實現點擊右箭頭看到下一張圖，點擊左箭頭看到上一張圖，點擊小圓點可以顯示對應的圖片，且都要點亮相對于的圖片。最后就是讓他自動輪播圖片，鼠標移入時停止輪播，鼠標移出時繼續輪播
window.onload = function(){ // 0 獲取相關元素 // 總容器 var slider = document.getElementById(’slider’); // 所有圖片li的集合 var imgLiS = slider.children[0].children[0].children; // 控制按鈕的容器 var ctrlDiv = slider.children[1]; // 左箭頭（上一張按鈕） var prev = document.getElementById(’prev’) // 右箭頭（下一張按鈕） var next = document.getElementById(’next’) // 容器的寬度 var width = slider.offsetWidth; // 用一個變量記錄當前顯示的圖片的索引 var index = 0; // 1 根據圖片數量生成對應的小圓點 for(var i=imgLiS.length-1;i>=0;i--){var newPoint = document.createElement(’span’);// 給每個節點里面記錄他是第幾個節點，方便后期點擊時候知道是第幾個newPoint.className = 'slider-ctrl-con';newPoint.innerHTML = i;// 放到最前面ctrlDiv.insertBefore(newPoint,ctrlDiv.children[0])// 2 所有的圖片都放到右邊imgLiS[i].style.left = width+'px' } // 2 輪播圖顯示第一幅圖 imgLiS[index].style.left = 0; // 獲取所有的小圓點 var ctrlS = ctrlDiv.children; // 3 點亮第一個小圓點 light() // 4 點擊左箭頭可以看前一幅圖，點亮對應的小圓點 prev.onclick = prevImg; // 5 點擊右箭頭可以看后一幅圖，點亮對應的小圓點 next.onclick = nextImg; // 6 點擊小圓點，點亮這個小圓點，并顯示對應的圖片 for(var i=0;i<imgLiS.length;i++){ctrlS[i].onclick = function(){ var num = +this.innerHTML; if(num>index){// 我認為后面的圖在右邊imgLiS[num].style.left = width+'px';// 當前圖去左邊move(imgLiS[index],’left’,-width)// 我要看的圖去中間move(imgLiS[num],’left’,0) } if(num<index){// 我認為前面的圖在左邊imgLiS[num].style.left = -width+'px';// 當前圖去右邊move(imgLiS[index],’left’,width)// 我要看的圖去中間move(imgLiS[num],’left’,0) } // 更新index index = num; // 點亮小圓點 light()} } // 7 可以自動輪播圖： 每隔3秒看下一張 var timer = setInterval(nextImg,3000) // 8 鼠標移入停止輪播 slider.onmouseenter = function(){clearInterval(timer) } // 9 鼠標移出繼續輪播 slider.onmouseleave = function(){clearInterval(timer)timer = setInterval(nextImg,3000) }// 由于點亮小圓點多次執行，封裝成函數 function light(){for(var i=0;i<imgLiS.length;i++){ ctrlS[i].className = 'slider-ctrl-con'}ctrlS[index].className = 'slider-ctrl-con current' } // 看上一張圖的函數 function prevImg(){var num = index-1;if(num<0){ // 索引最小是0，如果要看的索引比0小，就是最后一張，也就是第length-1張 num = imgLiS.length-1;}// 我認為前一張圖一定在左邊imgLiS[num].style.left = -width+'px';// 當前圖片運動到右邊move(imgLiS[index],’left’,width)// 要看的圖片運動到中間move(imgLiS[num],’left’,0)// 運動完成以后容器里面顯示的是num這個圖// 所以記錄當前索引的index里面的值變成numindex = num;light() } // 看下一張圖的函數 function nextImg(){var num = index + 1;if(num>imgLiS.length-1){ num = 0;}// 我認為下一張一定在右邊imgLiS[num].style.left = width+'px';// 當前圖片去左邊move(imgLiS[index],’left’,-width)// 我要看的下一張去中間move(imgLiS[num],’left’,0)// 更新index的值index = num;light() }}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
1. 解決Android Studio 格式化 Format代碼快捷鍵問題2. php解決注冊并發問題并提高QPS3. 完美解決vue 中多個echarts圖表自適應的問題4. JavaEE SpringMyBatis是什么? 它和Hibernate的區別及如何配置MyBatis5. Springboot 全局日期格式化處理的實現6. Java使用Tesseract-Ocr識別數字7. SpringBoot+TestNG單元測試的實現8. vue實現web在線聊天功能9. 在Chrome DevTools中調試JavaScript的實現10. Python使用urlretrieve實現直接遠程下載圖片的示例代碼
網公網安備