原生JS實現(xiàn)呼吸輪播圖
更新時間：2021年10月19日 17:19:18 作者：aiguangyuan
這篇文章主要為大家詳細(xì)介紹了原生JS實現(xiàn)呼吸輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
今天給大家分享一個用原生JS實現(xiàn)的呼吸輪播圖，效果如下：
以下是代碼實現(xiàn)，歡迎大家復(fù)制粘貼。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>原生JS實現(xiàn)呼吸輪播圖</title>
<style>
ul {
margin: 0;
padding-left: 0;
}
li {
list-style: none;
}
img {
border: none;
}
#main {
width: 280px;
height: 330px;
overflow: hidden;
position: relative;
margin: 20px auto 0 auto;
}
#main ul {
position: absolute;
left: 0;
}
#main ul li {
width: 280px;
height: 330px;
float: left;
position: absolute;
filter: alpha(opacity=0);
opacity: 0;
}
#btn {
line-height: 14px;
text-align: center;
background: #eeeeee;
width: 280px;
margin: 10px auto 0 auto;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
#btn a {
display: inline-block;
width: 14px;
height: 14px;
text-decoration: none;
line-height: 12px;
text-align: center;
border-radius: 7px;
}
#btn a.index {
background-color: #ccc;
}
#btn a.active {
background-color: red;
}
</style>
<script type="text/javascript" src="js/move.js"></script>
<script>
window.onload = function () {
var oMain = document.getElementById('main');
var oUl = oMain.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
var oBtn = document.getElementById('btn');
var aA = oBtn.getElementsByTagName('a');
var iNow = 1;
var iNow2 = 1;
var bBtn = true;
var num = 3;
var timer = null;
oUl.style.width = aLi.length * aLi[0].offsetWidth + 'px';
aA[0].onclick = function () {
if (bBtn) {
clearInterval(timer);
timer = setInterval(autoPlay, 3000);
for (var i = 0; i < aLi.length; i++) {
aLi[i].style.position = 'relative';
aLi[i].style.filter = 'alpha(opacity=100)';
aLi[i].style.opacity = 1;
}
oUl.style.left = -(iNow - 1) * aLi[0].offsetWidth + 'px';
if (iNow == 1) {
iNow = aLi.length;
aLi[aLi.length - 1].style.position = 'relative';
aLi[aLi.length - 1].style.left = -aLi.length * aLi[0].offsetWidth + 'px';
} else {
iNow--;
}
iNow2--;
toRun();
bBtn = false;
}
};
aA[aA.length - 1].onclick = function () {
if (bBtn) {
clearInterval(timer);
timer = setInterval(autoPlay, 3000);
for (var i = 0; i < aLi.length; i++) {
aLi[i].style.position = 'relative';
aLi[i].style.filter = 'alpha(opacity=100)';
aLi[i].style.opacity = 1;
}
oUl.style.left = -(iNow - 1) * aLi[0].offsetWidth + 'px';
if (iNow == aLi.length) {
iNow = 1;
aLi[0].style.position = 'relative';
aLi[0].style.left = aLi.length * aLi[0].offsetWidth + 'px';
} else {
iNow++;
}
iNow2++;
toRun();
bBtn = false;
}
};
for (var i = 1; i < aA.length - 1; i++) {
aA[i].index = i;
aA[i].onclick = function () {
clearInterval(timer);
timer = setInterval(autoPlay, 3000);
iNow = this.index;
iNow2 = this.index;
toShow();
};
};
function toRun() {
for (var i = 1; i < aA.length - 1; i++) {
aA[i].className = 'index';
}
aA[iNow].className = 'active';
startMove(oUl, { left: -(iNow2 - 1) * aLi[0].offsetWidth }, function () {
if (iNow == 1) {
aLi[0].style.position = 'relative';
aLi[0].style.left = 0;
oUl.style.left = 0;
iNow2 = 1;
} else if (iNow == aLi.length) {
aLi[aLi.length - 1].style.position = 'relative';
aLi[aLi.length - 1].style.left = 0;
oUl.style.left = -(aLi.length - 1) * aLi[0].offsetWidth + 'px';
iNow2 = aLi.length;
}
for (var i = 0; i < aLi.length; i++) {
aLi[i].style.position = 'absolute';
aLi[i].style.filter = 'alpha(opacity=0)';
aLi[i].style.opacity = 0;
}
oUl.style.left = 0;
aLi[iNow2 - 1].style.zIndex = num++;
aLi[iNow2 - 1].style.filter = 'alpha(opacity=100)';
aLi[iNow2 - 1].style.opacity = 1;
bBtn = true;
});
};
function toShow() {
for (var i = 1; i < aA.length - 1; i++) {
aA[i].className = 'index';
}
for (var i = 0; i < aLi.length; i++) {
startMove(aLi[i], { opacity: 0 });
}
aA[iNow].className = 'active';
startMove(aLi[iNow - 1], { opacity: 100 }, function () {
aLi[iNow - 1].style.zIndex = num++;
});
}
timer = setInterval(autoPlay, 3000);
function autoPlay() {
if (iNow == aLi.length) {
iNow = 1;
iNow2 = 1;
} else {
iNow++;
iNow2++;
}
toShow();
}
};
</script>
</head>
<body>
<div id="main">
<ul>
<li style="z-index:2; filter:alpha(opacity=100); opacity:1;">
<a>
<img src="images/0.jpg" />
</a>
</li>
<li>
<a>
<img src="images/1.jpg" />
</a>
</li>
<li>
<a>
<img src="images/2.jpg" />
</a>
</li>
<li>
<a>
<img src="images/3.jpg" />
</a>
</li>
</ul>
</div>
<div id="btn">
<a class="prev" href="javascript:;">
<</a> <a class="active" href="javascript:;">
</a>
<a class="index" href="javascript:;"></a>
<a class="index" href="javascript:;"></a>
<a class="index" href="javascript:;"></a>
<a class="next" href="javascript:;">></a>
</div>
</body>
</html>
以下是上面代碼中引入的最重要的運(yùn)動函數(shù) move.js的代碼：
function startMove(obj, json, fnEnd) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
doMove(obj, json, fnEnd);
}, 30);
}
function doMove(obj, json, fnEnd) {
var iCur = 0;
var attr = null;
var bStop = true;
for (attr in json) {
if (attr == 'opacity') {
if (parseInt(100 * getStyle(obj, attr)) == 0) {
iCur = parseInt(100 * getStyle(obj, attr));
} else {
iCur = parseInt(100 * getStyle(obj, attr)) || 100;
}
} else {
iCur = parseInt(getStyle(obj, attr)) || 0;
}
var iSpeed = (json[attr] - iCur) / 5;
iSpeed = (iSpeed > 0) ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if (json[attr] != iCur) {
bStop = false;
}
if (attr == 'opacity') {
obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed) + ')';
obj.style.opacity = (iCur + iSpeed) / 100;
} else {
obj.style[attr] = iCur + iSpeed + 'px';
}
}
if (bStop) {
clearInterval(obj.timer);
if (fnEnd) {
fnEnd.call(obj);
}
}
}
function stopMove(obj) {
clearInterval(obj.timer);
}
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj)[attr];
}
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Echarts折線圖實現(xiàn)一條折線顯示不同顏色的方法
這篇文章主要給大家介紹了關(guān)于Echarts折線圖實現(xiàn)一條折線顯示不同顏色的相關(guān)資料,Echarts的折線圖可以通過設(shè)置series中的itemStyle屬性來改變折線的顏色,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
JS逆向之如何一招徹底解決selenium?WebDriver無響應(yīng)
Selenium Webdriver是一款強(qiáng)大的自動化測試工具,用于模擬真實用戶在瀏覽器中的交互行為,下面這篇文章主要給大家介紹了關(guān)于JS逆向之如何一招徹底解決selenium?WebDriver無響應(yīng)的相關(guān)資料,需要的朋友可以參考下2024-07-07
對于type來說，更多的是對類型的一種復(fù)用，比如在項目中需要用到一些比較復(fù)雜的或者書寫起來很長的類型，而對于 interface來說，它是正兒八經(jīng)的用來定義接口類型（約束數(shù)類型和屬性）的，且接口類型是支持繼承和聲明合并的，感興趣的朋友跟隨小編一起看看吧2023-07-07
JS實現(xiàn)可自定義大小，可雙擊關(guān)閉的彈出層效果
這篇文章主要介紹了JS實現(xiàn)可自定義大小，可雙擊關(guān)閉的彈出層效果,涉及JavaScript定時函數(shù)及頁面元素動態(tài)操作的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
Bootstrap CSS組件之導(dǎo)航條(navbar)
這篇文章主要為大家詳細(xì)介紹了Bootstrap CSS組件之導(dǎo)航條(navbar)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
JS匿名函數(shù)和匿名自執(zhí)行函數(shù)概念與用法分析
這篇文章主要介紹了JS匿名函數(shù)和匿名自執(zhí)行函數(shù)概念與用法,結(jié)合實例形式分析了匿名函數(shù)和匿名自執(zhí)行函數(shù)的概念、功能、應(yīng)用場景及相關(guān)使用技巧,需要的朋友可以參考下2018-03-03
本文給大家介紹的是去年很火的一款小游戲--2048用javascript實現(xiàn)的思路以及代碼，有需要的小伙伴可以參考下。2015-07-07
本文介紹了微信小程序自定義導(dǎo)航欄功能的實現(xiàn)方法,首先,需要去掉原生導(dǎo)航欄,可以通過在page.json中去掉navigationBarTitleText并加上"navigationStyle":"custom"來實現(xiàn),然后,可以使用組件封裝來實現(xiàn)自定義導(dǎo)航欄的功能,感興趣的朋友一起看看吧2025-01-01
JS獲取復(fù)選框的值,并傳遞到后臺的實現(xiàn)方法
下面小編就為大家?guī)硪黄狫S獲取復(fù)選框的值,并傳遞到后臺的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
今天小編就為大家分享一篇解決layer圖標(biāo)icon不加載的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09