您好,登錄后才能下訂單哦!
這篇文章主要介紹了使用JavaScript實(shí)現(xiàn)循環(huán)輪播圖的案例,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
具體內(nèi)容如下
1.點(diǎn)擊下面圖標(biāo),圖片進(jìn)行輪播
2.圖片輪播完,接著輪播到第一張
(代碼內(nèi)部具有詳細(xì)解釋)
HTML代碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>圖片輪播示例</title> <link rel="stylesheet" href="css/lunbo.css" /> <script src="js/tools.js"></script> <script src="js/lunbo.js"></script> </head> <body> <!-- 外部容器 --> <div id="outer"> <!-- 圖片列表 --> <ul id="img-list"> <li><img src="img/1.jpg" /></li> <li><img src="img/2.jpg" /></li> <li><img src="img/3.jpg" /></li> <li><img src="img/4.jpg" /></li> <li><img src="img/5.jpg" /></li> <!-- 重復(fù)顯示第一張圖片,便于切入下一輪循環(huán)。 --> <li><img src="img/1.jpg" /></li> </ul> <!-- 導(dǎo)航按鈕 --> <div id="nav-btns"> <a href="javascript:;" ></a> <a href="javascript:;" ></a> <a href="javascript:;" ></a> <a href="javascript:;" ></a> <a href="javascript:;" ></a> </div> </div> </body> </html>
css代碼:
* { margin: 0; padding: 0; } /* * 設(shè)置outer的樣式 */ #outer { /*設(shè)置寬和高*/ width: 520px; height: 333px; /*居中*/ margin: 50px auto; /*設(shè)置背景顏色*/ background-color: orange; /*設(shè)置padding*/ padding: 10px 0; /*開啟相對(duì)定位*/ position: relative; /*裁剪溢出的內(nèi)容*/ overflow: hidden; } /*設(shè)置圖片列表*/ #img-list { /*去除項(xiàng)目符號(hào)*/ list-style: none; /*設(shè)置ul的寬度*/ /*width: 2600px;*/ /*開啟絕對(duì)定位*/ position: absolute; /*設(shè)置偏移量(每向左移動(dòng)520px,就會(huì)顯示到下一張圖片)*/ left: 0px; } /*設(shè)置圖片中的li*/ #img-list li { /*設(shè)置浮動(dòng)*/ float: left; /*設(shè)置左右外邊距*/ margin: 0 10px; } /*設(shè)置導(dǎo)航按鈕*/ #nav-btns { /*開啟絕對(duì)定位*/ position: absolute; /*設(shè)置位置*/ bottom: 15px; } #nav-btns a { /*設(shè)置超鏈接浮動(dòng)*/ float: left; /*設(shè)置超鏈接的寬和高*/ width: 15px; height: 15px; /*設(shè)置背景顏色*/ background-color: red; /*設(shè)置左右外邊距*/ margin: 0 5px; /*設(shè)置透明*/ opacity: 0.5; /*兼容IE8透明*/ filter: alpha(opacity=50); } /*設(shè)置鼠標(biāo)移入的效果*/ #nav-btns a:hover { background-color: black; }
lunbo.js代碼
window.onload = function() { // 獲取圖片列表 var imgList = document.getElementById("img-list"); // 獲取頁(yè)面中所有的img標(biāo)簽 var imgArr = document.getElementsByTagName("img"); // 設(shè)置imgList的寬度 imgList.style.width = 520 * imgArr.length + "px"; // 設(shè)置導(dǎo)航按鈕居中 // 獲取導(dǎo)航按鈕 var navBtns = document.getElementById("nav-btns"); // 獲取outer var outer = document.getElementById("outer"); // 設(shè)置navBtns的left值 navBtns.style.left = (outer.offsetWidth - navBtns.offsetWidth) / 2 + "px"; // 默認(rèn)顯示圖片的索引 var index = 0; // 獲取所有的a var allA = document.getElementsByTagName("a"); // 設(shè)置默認(rèn)選中的效果 allA[index].style.backgroundColor = "black"; /* * 點(diǎn)擊超鏈接切換到指定的圖片 * 點(diǎn)擊第一個(gè)超鏈接,顯示第一個(gè)圖片 * 點(diǎn)擊第二個(gè)超鏈接,顯示第二個(gè)圖片 * */ // 為所有的超鏈接都綁定單擊響應(yīng)函數(shù) for (var i = 0; i < allA.length; i++) { // 為每一個(gè)超鏈接都添加一個(gè)num屬性 allA[i].num = i; // 為超鏈接綁定單擊響應(yīng)函數(shù) allA[i].onclick = function() { // 關(guān)閉自動(dòng)切換的定時(shí)器 clearInterval(timer); // 獲取點(diǎn)擊超鏈接的索引,并將其設(shè)置為index index = this.num; // 設(shè)置選中的a setA(); // 使用move函數(shù)來(lái)切換圖片 move(imgList, "left", -520 * index, 20, function() { // 動(dòng)畫執(zhí)行完畢,開啟自動(dòng)切換 autoChange(); }); }; } // 開啟自動(dòng)切換圖片 autoChange(); // 設(shè)置選中的a function setA() { // 判斷當(dāng)前索引是否是最后一張圖片 if (index >= imgArr.length - 1) { // 則將index設(shè)置為0 index = 0; // 此時(shí)顯示的最后一張圖片,而最后一張圖片和第一張是一摸一樣 // 通過CSS將最后一張切換成第一張 imgList.style.left = 0; } // 遍歷所有a,并將它們的背景顏色設(shè)置為紅色 for (var i = 0; i < allA.length; i++) { allA[i].style.backgroundColor = ""; } // 將選中的a設(shè)置為黑色 allA[index].style.backgroundColor = "black"; }; // 定義一個(gè)自動(dòng)切換的定時(shí)器的標(biāo)識(shí) var timer; // 創(chuàng)建一個(gè)函數(shù),用來(lái)開啟自動(dòng)切換圖片 function autoChange() { // 開啟一個(gè)定時(shí)器,用來(lái)定時(shí)去切換圖片 timer = setInterval(function() { // 使索引自增 index++; // 判斷index的值 index %= imgArr.length; // 執(zhí)行動(dòng)畫,切換圖片 move(imgList, "left", -520 * index, 20, function() { // 修改導(dǎo)航按鈕 setA(); }); }, 3000); } };
tool.js代碼:
/* * 創(chuàng)建一個(gè)可以執(zhí)行簡(jiǎn)單動(dòng)畫的函數(shù) * 參數(shù): * obj:要執(zhí)行動(dòng)畫的對(duì)象 * attr:要執(zhí)行動(dòng)畫的樣式,比如:left top width height * target:執(zhí)行動(dòng)畫的目標(biāo)位置 * speed:移動(dòng)的速度(正數(shù)向右移動(dòng),負(fù)數(shù)向左移動(dòng)) * callback:回調(diào)函數(shù),這個(gè)函數(shù)將會(huì)在動(dòng)畫執(zhí)行完畢以后執(zhí)行 */ function move(obj, attr, target, speed, callback) { // 關(guān)閉上一個(gè)定時(shí)器 clearInterval(obj.timer); // 獲取元素目前的位置 var current = parseInt(getStyle(obj, attr)); // 判斷速度的正負(fù)值 // 如果從0 向 800移動(dòng),則speed為正 // 如果從800向0移動(dòng),則speed為負(fù) if (current > target) { //此時(shí)速度應(yīng)為負(fù)值 speed = -speed; } // 開啟一個(gè)定時(shí)器,用來(lái)執(zhí)行動(dòng)畫效果 // 向執(zhí)行動(dòng)畫的對(duì)象中添加一個(gè)timer屬性,用來(lái)保存它自己的定時(shí)器的標(biāo)識(shí) obj.timer = setInterval(function() { // 獲取box1的原來(lái)的left值 var oldValue = parseInt(getStyle(obj, attr)); // 在舊值的基礎(chǔ)上增加 var newValue = oldValue + speed; // 判斷newValue是否大于800 // 從800 向 0移動(dòng) // 向左移動(dòng)時(shí),需要判斷newValue是否小于target // 向右移動(dòng)時(shí),需要判斷newValue是否大于target if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) { newValue = target; } // 將新值設(shè)置給box1 obj.style[attr] = newValue + "px"; // 當(dāng)元素移動(dòng)到0px時(shí),使其停止執(zhí)行動(dòng)畫 if (newValue == target) { // 達(dá)到目標(biāo),關(guān)閉定時(shí)器 clearInterval(obj.timer); // 動(dòng)畫執(zhí)行完畢,調(diào)用回調(diào)函數(shù) callback && callback(); } }, 30); } /* * 定義一個(gè)函數(shù),用來(lái)獲取指定元素的當(dāng)前的樣式 * 參數(shù): * obj 要獲取樣式的元素 * name 要獲取的樣式名 */ function getStyle(obj, name) { if (window.getComputedStyle) { // 正常瀏覽器的方式,具有g(shù)etComputedStyle()方法 return getComputedStyle(obj, null)[name]; } else { // IE8的方式,沒有g(shù)etComputedStyle()方法 return obj.currentStyle[name]; } } /* * 定義一個(gè)函數(shù),用來(lái)向一個(gè)元素中添加指定的class屬性值 * 參數(shù): * obj 要添加class屬性的元素 * cn 要添加的class值 */ function addClass(obj, cn) { // 檢查obj中是否含有cn if (!hasClass(obj, cn)) { obj.className += " " + cn; } } /* * 判斷一個(gè)元素中是否含有指定的class屬性值, * 如果有該class,則返回true,沒有則返回false。 */ function hasClass(obj, cn) { // 判斷obj中有沒有cn class // 創(chuàng)建一個(gè)正則表達(dá)式 var reg = new RegExp("\\b" + cn + "\\b"); return reg.test(obj.className); } /* * 刪除一個(gè)元素中的指定的class屬性 */ function removeClass(obj, cn) { // 創(chuàng)建一個(gè)正則表達(dá)式 var reg = new RegExp("\\b" + cn + "\\b"); // 刪除class obj.className = obj.className.replace(reg, ""); } /* * toggleClass可以用來(lái)切換一個(gè)類 * 如果元素中具有該類,則刪除 * 如果元素中沒有該類,則添加 */ function toggleClass(obj, cn) { //判斷obj中是否含有cn if (hasClass(obj, cn)) { //有,則刪除 removeClass(obj, cn); } else { //沒有,則添加 addClass(obj, cn); } }
圖片資源下面:
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“使用JavaScript實(shí)現(xiàn)循環(huán)輪播圖的案例”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。