JS實(shí)現(xiàn)圖片輪播跑馬燈
本文實(shí)例為大家分享了JS實(shí)現(xiàn)圖片輪播跑馬燈的具體代碼,供大家參考,具體內(nèi)容如下
實(shí)現(xiàn)原理:
1、準(zhǔn)備一個(gè)展示區(qū)域的盒子,設(shè)置寬高;
2、準(zhǔn)備一個(gè)存放所有圖片的盒子,將所有圖片依次放入,設(shè)置溢出隱藏
一、HTML布局
<div class="wrapper"> <div id="container"><!--圖片展示區(qū)域盒子--> ? <ul id="imglist"><!--將所有圖片并列展示盒子--> ? ? ?<li> ? ? ? ? <img src="./img/banner.jpg" alt="暫無(wú)圖片"> ? ? ?</li> ? ? ?<li> ? ? ? ?<img src="./img/banner0.jpg" alt="暫無(wú)圖片"> ? ? ?</li> ? ? ?<li> ? ? ? ? <img src="./img/banner.jpg" alt="暫無(wú)圖片"> ? ? ?</li> ? ? ?<li> ? ? ? ? <img src="./img/banner0.jpg" alt="暫無(wú)圖片"> ? ? ?</li> ? </ul> ? <ul id="point"> ? ? <li class="selected"></li> ? ? <li></li> ? ? <li></li> ? ? <li></li> ? </ul> </div> </div>
二、CSS樣式
.wrapper{ ? position: relative; ? overflow: hidden; ? width: 100%; ? height: 870px; } #container{ ? ? width: 1920px; ? ? height: 870px; ? ? position: absolute; ? ? top: 50%; ? ? left: 50%; ? ? overflow: hidden; ? ? transform: translate(-50%,-50%); ? ? -webkit-transform: translate(-50%,-50%); ? ? -moz-transform: translate(-50%,-50%); ? ? -ms-transform: translate(-50%,-50%); ? ? -o-transform: translate(-50%,-50%); ? ? background-color: #aa201c; } #imglist{ ? ? width: 7680px; ? ? height: 870px; ? ? list-style-type: none; ? ? position: absolute; ? ? top: 0; ? ? left: 0; ? ? z-index: 1; } #imglist>li{ ? ? width: 1920px; ? ? height: 870px; ? ? float: left; ? ? overflow: hidden; } #point{ ? ? list-style-type: none; ? ? position: absolute; ? ? bottom: 5px; ? ? left: 50%; ? ? /* right: 0; */ ? ? /* margin: auto; */ ? ? width: 100%; ? ? height: 29px; ? ? line-height: 29px; ? ? z-index: 10; } #point>.selected{ ? ? background-color: #aa201c; } #point>li{ ? ? width: 16px; ? ? height: 16px; ? ? float: left; ? ? background-color: #c5c8ce; ? ? border-radius: 100%; ? ? margin-right: 10px; ? ? -webkit-border-radius: 100%; }
三、JS代碼
var wrap = document.getElementById("container"); var inner = document.getElementById("imglist"); var spanList = document.getElementById("point").getElementsByTagName("li"); var left = document.getElementById("left"); var right = document.getElementById("right"); var clickFlag = true;//設(shè)置左右切換標(biāo)記位防止連續(xù)按 var time//主要用來(lái)設(shè)置自動(dòng)滑動(dòng)的計(jì)時(shí)器 var index = 0;//記錄每次滑動(dòng)圖片的下標(biāo) var Distance = wrap.offsetWidth;//獲取展示區(qū)的寬度,即每張圖片的寬度 //定義圖片滑動(dòng)的函數(shù) function AutoGo() { ? ? var start = inner.offsetLeft;//獲取移動(dòng)塊當(dāng)前的left的開始坐標(biāo) ? ? var end = index * Distance * (-1);//獲取移動(dòng)塊移動(dòng)結(jié)束的坐標(biāo)。 ? ? //計(jì)算公式即當(dāng)移動(dòng)到第三張圖片時(shí),圖片下標(biāo)為2乘以圖片的寬度就是塊的left值。 ? ? var change = end - start;//偏移量 ? ? var timer;//用計(jì)時(shí)器為圖片添加動(dòng)畫效果 ? ? var t = 0; ? ? var maxT = 30; ? ? clear();//先把按鈕狀態(tài)清除,再讓對(duì)應(yīng)按鈕改變狀態(tài) ? ? if (index == spanList.length) { ? ? ? ? spanList[0].className = "selected"; ? ? } else { ? ? ? ? spanList[index].className = "selected"; ? ? } ? ? clearInterval(timer);//開啟計(jì)時(shí)器前先把之前的清 ? ? timer = setInterval(function () { ? ? ? ? t++; ? ? ? ? if (t >= maxT) {//當(dāng)圖片到達(dá)終點(diǎn)停止計(jì)時(shí)器 ? ? ? ? ? ? clearInterval(timer); ? ? ? ? ? ? clickFlag = true;//當(dāng)圖片到達(dá)終點(diǎn)才能切換 ? ? ? ? } ? ? ? ? inner.style.left = change / maxT * t + start + "px";//每個(gè)17毫秒讓塊移動(dòng) ? ? ? ? if (index == spanList.length && t >= maxT) { ? ? ? ? ? ? inner.style.left = 0; ? ? ? ? ? ? index = 0; ? ? ? ? ? ? //當(dāng)圖片到最后一張時(shí)把它瞬間切換回第一張,由于都同一張圖片不會(huì)影響效果 ? ? ? ? } ? ? }, 17); } //編寫圖片向右滑動(dòng)的函數(shù) function forward() { ? ? index++; ? ? //當(dāng)圖片下標(biāo)到最后一張把小標(biāo)換0 ? ? if (index > spanList.length) { ? ? ? ? index = 0; ? ? } ? ? AutoGo(); } //編寫圖片向左滑動(dòng)函數(shù) function backward() { ? ? index--; ? ? //當(dāng)圖片下標(biāo)到第一張讓它返回到倒數(shù)第二張, ? ? //left值要變到最后一張才不影響過(guò)渡效果 ? ? if (index < 0) { ? ? ? ? index = spanList.length - 1; ? ? ? ? inner.style.left = (index + 1) * Distance * (-1) + "px"; ? ? } ? ? AutoGo(); } //開啟圖片自動(dòng)向右滑動(dòng)的計(jì)時(shí)器 time = setInterval(forward, 3000); //設(shè)置鼠標(biāo)懸停動(dòng)畫停止 wrap.onmouseover = function () { ? ? clearInterval(time); } wrap.onmouseout = function () { ? ? time = setInterval(forward, 3000); } //遍歷每個(gè)按鈕讓其切換到對(duì)應(yīng)圖片 for (var i = 0; i < spanList.length; i++) { ? ? spanList[i].onclick = function () { ? ? ? ? index = this.innerText - 1; ? ? ? ? AutoGo(); ? ? } } //清除頁(yè)面所有按鈕狀態(tài)顏色 function clear() { ? ? for (var i = 0; i < spanList.length; i++) { ? ? ? ? spanList[i].className = ""; ? ? } }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
BootStrap注意事項(xiàng)小結(jié)(五)表單
這篇文章主要介紹了BootStrap注意事項(xiàng)小結(jié)(五)表單的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,,需要的朋友可以參考下2017-03-03Js on及addEventListener原理用法區(qū)別解析
這篇文章主要介紹了Js on及addEventListener原理用法區(qū)別解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07JavaScript查看代碼運(yùn)行效率console.time()與console.timeEnd()用法
今天小編就為大家分享一篇關(guān)于JavaScript查看代碼運(yùn)行效率console.time()與console.timeEnd()用法,小編覺(jué)得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來(lái)看看吧2019-01-01JS獲取子節(jié)點(diǎn)、父節(jié)點(diǎn)和兄弟節(jié)點(diǎn)的方法實(shí)例總結(jié)
這篇文章主要介紹了JS獲取子節(jié)點(diǎn)、父節(jié)點(diǎn)和兄弟節(jié)點(diǎn)的方法,結(jié)合實(shí)例形式總結(jié)分析了JavaScript針對(duì)子節(jié)點(diǎn)、父節(jié)點(diǎn)和兄弟節(jié)點(diǎn)獲取相關(guān)操作技巧與使用注意事項(xiàng),需要的朋友可以參考下2018-07-07javascript調(diào)試之DOM斷點(diǎn)調(diào)試法使用技巧分享
在開發(fā)中,偶爾會(huì)遇到類似這樣的問(wèn)題:頁(yè)面上的一個(gè)DOM元素被改了屬性,但是我們卻不知道是哪個(gè)腳本更改的2014-04-04js實(shí)現(xiàn)簡(jiǎn)易聊天對(duì)話框
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)易聊天對(duì)話框,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08JS如何實(shí)現(xiàn)封裝列表右滑動(dòng)刪除收藏按鈕
這篇文章主要介紹了JS如何實(shí)現(xiàn)封裝列表右滑動(dòng)刪除收藏按鈕,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07