原生JS實(shí)現(xiàn)呼吸輪播圖
更新時(shí)間：2021年10月19日 17:19:18 作者：aiguangyuan
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)呼吸輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
今天給大家分享一個(gè)用原生JS實(shí)現(xiàn)的呼吸輪播圖，效果如下：
以下是代碼實(shí)現(xiàn)，歡迎大家復(fù)制粘貼。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>原生JS實(shí)現(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)動(dòng)函數(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)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Canvas實(shí)現(xiàn)動(dòng)態(tài)粒子文字效果的代碼示例
這篇文章主要介紹了如何用Canvas實(shí)現(xiàn)動(dòng)態(tài)粒子文字效果,文中有完整的代碼示例,文章通過代碼介紹的非常清楚,感興趣的小伙伴跟著小編一起來看看吧2023-08-08
JavaScript實(shí)現(xiàn)點(diǎn)擊按鈕就復(fù)制當(dāng)前網(wǎng)址
在大量的網(wǎng)站都有這樣的功能，當(dāng)點(diǎn)擊一個(gè)按鈕的時(shí)候可以復(fù)制當(dāng)前頁面的地址，以此可以方便網(wǎng)站用戶對(duì)鏈接的存儲(chǔ)，同時(shí)也便于網(wǎng)站的推廣，下面給大家分享具體實(shí)現(xiàn)代碼，對(duì)js實(shí)現(xiàn)點(diǎn)擊按鈕就復(fù)制的相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-12-12
告訴你一個(gè)排序算法，也許是最重要的是他們知道 - 快速排序，無論是在PHP和JavaScript實(shí)現(xiàn)的。雖然這兩種語言之間的代碼看起來相似，也有一些差異，這表明了語法知識(shí)的重要性！2011-02-02
這篇文章主要為大家介紹了uni-app的iPhonex底部安全區(qū)域解決方案示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
bootstrap table 數(shù)據(jù)表格行內(nèi)修改的實(shí)現(xiàn)代碼
這篇文章主要介紹了bootstrap table 數(shù)據(jù)表格行內(nèi)修改的實(shí)現(xiàn)代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
利用JQuery和JS實(shí)現(xiàn)奇偶行背景顏色自定義效果
本文將詳細(xì)介紹利用JQuery和JS實(shí)現(xiàn)奇偶行背景顏色自定義效果,需要的朋友可以參考下2012-11-11
JS實(shí)現(xiàn)選擇TextArea內(nèi)文本的方法
這篇文章主要介紹了JS實(shí)現(xiàn)選擇TextArea內(nèi)文本的方法,涉及javascript針對(duì)頁面TextArea元素焦點(diǎn)設(shè)置及文本獲取的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
js用于樹型結(jié)構(gòu)級(jí)聯(lián)選擇
js用于樹型結(jié)構(gòu)級(jí)聯(lián)選擇...2007-01-01
OpenLayers3實(shí)現(xiàn)地圖顯示功能
這篇文章主要為大家詳細(xì)介紹了OpenLayers3實(shí)現(xiàn)地圖顯示功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
js showModalDialog 彈出對(duì)話框的簡單實(shí)例(子窗體)
本篇文章主要是對(duì)js_showModalDialog彈出對(duì)話框的簡單實(shí)例(子窗體) 進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-01-01