JavaScript實(shí)現(xiàn)動態(tài)輪播圖效果
功能描述：
成都創(chuàng)新互聯(lián)專注于黑山企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,購物商城網(wǎng)站建設(shè)。黑山網(wǎng)站建設(shè)公司,為黑山等地區(qū)提供建站服務(wù)。全流程專業(yè)公司，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)
1.鼠標(biāo)經(jīng)過 左右側(cè)箭頭顯示，鼠標(biāo)離開 箭頭隱藏
2.動態(tài)添加底部小圓圈并綁定單擊事件，并且讓小圓圈的點(diǎn)擊事件和左右箭頭點(diǎn)擊事件同步
3.拷貝第一張圖片添加到ul最后可以實(shí)現(xiàn)動態(tài)添加圖片
4.給箭頭綁定單擊事件，并且使圖片可以無縫輪播
5.實(shí)現(xiàn)自動輪播（動畫函數(shù)）
具體實(shí)現(xiàn)代碼：
1.鼠標(biāo)移入左右側(cè)箭頭顯示，鼠標(biāo)離開箭頭隱藏
con.addEventListener('mouseenter', function() {
arrow_l.style.display = 'block'; // 將左右箭頭的display設(shè)為block
arrow_r.style.display = 'block';
});
con.addEventListener('mouseleave', function() {
arrow_l.style.display = 'none'; // 將左右箭頭display設(shè)為none
arrow_r.style.display = 'none';
});2.動態(tài)添加底部小圓圈并綁定單擊事件，并且讓小圓圈的點(diǎn)擊事件和左右箭頭點(diǎn)擊事件同步
for(var i = 0; i < ul.children.length; i++) {
var li = document.createElement('li');
li.setAttribute('index', i); // 通過添加自定義屬性來記錄小圓圈索引號
ol.appendChild(li); // 將創(chuàng)建的li添加進(jìn)ol里
// 生成小圓圈的同時(shí)就可以給它綁定單擊事件
li.addEventListener('click', function() {
// 排他思想 干掉所有人，留下我自己
for(var i = 0; i < ol.children.length; i++) { // 先把所有的小圓圈改為未選中狀態(tài)
ol.children[i].className = '';
}
// 再把當(dāng)前小圓圈改為選中狀態(tài)
this.className = 'current';
var index = this.getAttribute('index'); // 獲取當(dāng)前小圓圈的索引
// 將index值賦值給num以及circle，將小圓圈的點(diǎn)擊事件和左右箭頭點(diǎn)擊事件同步
num = index;
circle = index;
animate(ul, - index * conWidth);
})
}3.拷貝第一張圖片添加到ul最后可以實(shí)現(xiàn)動態(tài)添加圖片
// 克隆第一張圖片 var first = ul.children[0].cloneNode(true); // true 深拷貝 ul.appendChild(first); // 拷貝第一張圖片添加到ul最后
4.給箭頭綁定單擊事件，并且使圖片可以無縫輪播
①右側(cè)箭頭的單擊事件
var num = 0; // 用來存儲點(diǎn)擊后圖片序號
var circle = 0; // 用來存儲點(diǎn)擊后小圓圈序號
var flag = true; // flag 節(jié)流閥 防止用戶點(diǎn)擊過快 圖片播放太快
// 右側(cè)箭頭點(diǎn)擊播放
arrow_r.addEventListener('click', function() {
if(flag) {
// 點(diǎn)擊后先關(guān)閉節(jié)流閥
flag = false;
// 如果播放到了最后一張，就把left直接值設(shè)為0從頭播放，同時(shí)還原num
if(num == ul.children.length - 1) {
ul.style.left = 0;
num = 0;
}
num++;
animate(ul, - num * conWidth, function() {
// 回調(diào)函數(shù) 動畫執(zhí)行完后開啟節(jié)流閥
flag = true;
});
// 小圓圈和箭頭一起變化
circle++;
/* if(circle == ol.children.length) {
circle = 0;
} */
// 可以用三元運(yùn)算符判斷小圓圈是否到了最后一個(gè)，如果是最后一個(gè)就還原circle
circle == ol.children.length ? circle = 0 : circle;
circleChange(); // 使當(dāng)前小圓圈為選中狀態(tài)（重復(fù)代碼封裝到一個(gè)函數(shù)里了）
}
})②左側(cè)箭頭的單擊事件
arrow_l.addEventListener('click', function() {
if(flag) {
// 首先關(guān)閉節(jié)流閥
flag = false;
// 如果播放到了第一張，就把left值設(shè)為最后一張的值
if(num == 0) {
num = ul.children.length - 1;
ul.style.left = - num * conWidth + 'px';
}
num--;
animate(ul, - num * conWidth, function() {
flag = true;
});
// 小圓圈和箭頭一起變化
circle--;
// 三元表達(dá)式 circle < 0 時(shí)說明是第一張圖片，將小圓圈改為第四個(gè)（索引為3）
circle < 0 ? circle = ol.children.length - 1 : circle;
circleChange();
}
})circleChange();函數(shù)代碼
// 小圓圈的選中狀態(tài)（相同代碼可以封裝為一個(gè)函數(shù)，使代碼更簡潔）
function circleChange() {
// 排他思想
for(var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[circle].className = 'current';
}5.實(shí)現(xiàn)自動輪播（動畫函數(shù)）
// 自動播放輪播圖，相當(dāng)于隔一段時(shí)間調(diào)用一次右側(cè)箭頭點(diǎn)擊事件
var timer = setInterval(function() {
// 手動調(diào)用點(diǎn)擊事件
arrow_r.click();
}, 2000);動畫函數(shù) animate.js（ps：我沒有把這個(gè)寫入下邊index.js里，這個(gè)要你自己弄進(jìn)去哦，可以作為animate.js文件引入進(jìn)去或者直接粘貼到你的js代碼里邊）
// obj 動畫對象
// target 目標(biāo)位置
// callback 回調(diào)函數(shù)
function animate(obj, target, callback) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var step = (target - obj.offsetLeft) / 10; // step步長值
step = step > 0 ? Math.ceil(step) : Math.floor(step); // 大于零向上取整,小于零向下取整
if(obj.offsetLeft == target) {
clearInterval(obj.timer);
// if(callback) { // 判斷是否傳了回調(diào)函數(shù)
// callback(); // 回調(diào)函數(shù)，當(dāng)動畫執(zhí)行完后才執(zhí)行
// }
// &&是短路運(yùn)算符，存在callback時(shí)才會繼續(xù)執(zhí)行callback()
callback && callback();
}
obj.style.left = obj.offsetLeft + step + 'px';
}, 15)
}具體實(shí)現(xiàn)代碼如下：
HTML代碼：
<div class="con">
<i class="icon iconfont iconarrow_left arrow-l"></i>
<i class="icon iconfont iconarrow_right arrow-r"></i>
<ul>
<li>
<a href="javascript:;"><img src="images/img1.jpg" alt=""></a>
</li>
<li>
<a href="javascript:;"><img src="images/img2.jpg" alt=""></a>
</li>
<li>
<a href="javascript:;"><img src="images/img3.jpg" alt=""></a>
</li>
<li>
<a href="javascript:;"><img src="images/img4.jpg" alt=""></a>
</li>
<li>
<a href="javascript:;"><img src="images/img5.jpg" alt=""></a>
</li>
</ul>
<ol>
</ol>
</div>ps:我左右側(cè)小箭頭是使用的Iconfont圖標(biāo)（iconarrow_left，iconarrow_right），要引入進(jìn)去
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1518420_oljcm07nn2.css">
CSS代碼：
<style>
* {
margin: 0;
padding: 0;
}
ul,li,ol,a {
list-style: none;
text-decoration: none;
}
.con {
width: 533px;
height: 300px;
margin: 100px auto;
position: relative;
background-color: #f0f0f0;
overflow: hidden;
}
.arrow-l,.arrow-r{
display: none;
width: 20px;
height: 40px;
line-height: 40px;
text-align: center;
color: #eee;
position: absolute;
top: 45%;
background-color: rgba(0, 0, 0, 0.2);
z-index: 2;
cursor: pointer;
}
.arrow-l {
left: 0;
}
.arrow-r{
right: 0;
}
ul {
position: absolute;
width: 600%;
}
ul li {
float: left;
}
ul li img {
width: 533px;
height: 300px;
}
ol {
position: absolute;
left: 50%;
bottom: 8px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
ol li {
float: left;
width: 6px;
height: 6px;
margin: 0 2px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.5);
cursor: pointer;
}
.current {
background-color: #ffe;
}
</style>詳細(xì)JavaScript代碼（index.js）
window.addEventListener('load', function() { // 等頁面加載完畢
// 獲取需要用到的的元素
var arrow_l = document.querySelector('.arrow-l');
var arrow_r = document.querySelector('.arrow-r');
var con = document.querySelector('.con');
var conWidth = con.offsetWidth;
// 鼠標(biāo)經(jīng)過箭頭顯示，鼠標(biāo)離開箭頭隱藏
con.addEventListener('mouseenter', function() {
arrow_l.style.display = 'block'; // 將左右箭頭的display設(shè)為block
arrow_r.style.display = 'block';
// 鼠標(biāo)經(jīng)過停止定時(shí)器
clearInterval(timer);
timer = null; // 釋放定時(shí)器變量
});
con.addEventListener('mouseleave', function() {
arrow_l.style.display = 'none'; // 將左右箭頭display設(shè)為none
arrow_r.style.display = 'none';
// 鼠標(biāo)離開再重新開啟定時(shí)器
timer = setInterval(function() {
// 手動調(diào)用點(diǎn)擊事件
arrow_r.click(); // 自動輪播
}, 2000);
});
var ul = con.querySelector('ul');
var ol = con.querySelector('ol');
// 動態(tài)添加底部小圓圈
for(var i = 0; i < ul.children.length; i++) {
var li = document.createElement('li');
// 通過添加自定義屬性來記錄小圓圈索引號
li.setAttribute('index', i);
ol.appendChild(li);
// 生成小圓圈的同時(shí)就可以給它綁定單擊事件
li.addEventListener('click', function() {
// 排他思想 干掉所有人，留下我自己
for(var i = 0; i < ol.children.length; i++) { // 先把所有的小圓圈改為未選中狀態(tài)
ol.children[i].className = '';
}
// 再把當(dāng)前小圓圈改為選中狀態(tài)
this.className = 'current';
var index = this.getAttribute('index'); // 獲取當(dāng)前小圓圈的索引
// 將index值賦值給num以及circle，將小圓圈的點(diǎn)擊事件和左右箭頭點(diǎn)擊事件同步
num = index;
circle = index;
animate(ul, - index * conWidth);
})
}
// 讓第一個(gè)小圓圈底色為白色（選中狀態(tài)）
ol.children[0].className = 'current';
// 克隆第一張圖片
var first = ul.children[0].cloneNode(true); // true 深拷貝
ul.appendChild(first); // 拷貝第一張圖片添加到ul最后
var num = 0; // 用來存儲點(diǎn)擊后圖片序號
var circle = 0; // 用來存儲點(diǎn)擊后小圓圈序號
var flag = true; // flag 節(jié)流閥 防止用戶點(diǎn)擊過快 圖片播放太快
// 右側(cè)箭頭點(diǎn)擊播放
arrow_r.addEventListener('click', function() {
if(flag) {
// 點(diǎn)擊后先關(guān)閉節(jié)流閥
flag = false;
// 如果播放到了最后一張，就把left直接值設(shè)為0從頭播放，同時(shí)還原num
if(num == ul.children.length - 1) {
ul.style.left = 0;
num = 0;
}
num++;
animate(ul, - num * conWidth, function() {
// 回調(diào)函數(shù) 動畫執(zhí)行完后開啟節(jié)流閥
flag = true;
});
// 小圓圈和箭頭一起變化
circle++;
/* if(circle == ol.children.length) {
circle = 0;
} */
// 可以用三元運(yùn)算符判斷小圓圈是否到了最后一個(gè)，如果是最后一個(gè)就還原circle
circle == ol.children.length ? circle = 0 : circle;
circleChange(); // 使當(dāng)前小圓圈為選中狀態(tài)
}
})
// 左側(cè)箭頭點(diǎn)擊播放
arrow_l.addEventListener('click', function() {
if(flag) {
// 關(guān)閉節(jié)流閥
flag = false;
// 如果播放到了第一張，就把left值設(shè)為最后一張的值
if(num == 0) {
num = ul.children.length - 1;
ul.style.left = - num * conWidth + 'px';
}
num--;
animate(ul, - num * conWidth, function() {
flag = true;
});
// 小圓圈和箭頭一起變化
circle--;
// circle < 0 時(shí)說明是第一張圖片，將小圓圈改為第四個(gè)（索引為3）
if(circle < 0) {
circle = ol.children.length - 1;
}
circleChange();
}
})
// 小圓圈的選中狀態(tài)（相同代碼可以封裝為一個(gè)函數(shù)，使代碼更簡潔）
function circleChange() {
// 排他思想
for(var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[circle].className = 'current';
}
// 自動播放輪播圖，相當(dāng)于隔一段時(shí)間調(diào)用一次右側(cè)箭頭點(diǎn)擊事件
var timer = setInterval(function() {
// 手動調(diào)用點(diǎn)擊事件
arrow_r.click();
}, 2000);
})以上就是JavaScript如何實(shí)現(xiàn)動態(tài)輪播圖效果？（代碼示例）的詳細(xì)內(nèi)容，更多請關(guān)注創(chuàng)新互聯(lián)其它相關(guān)文章！
本文標(biāo)題：JavaScript實(shí)現(xiàn)動態(tài)輪播圖效果
轉(zhuǎn)載注明：http://muchs.cn/article0/phoiio.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、做網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、用戶體驗(yàn)、動態(tài)網(wǎng)站、網(wǎng)站改版
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
- 網(wǎng)站怎么優(yōu)化可以提高用戶訪問量？ 2015-12-21
- 20年前偷懶修復(fù)的千年蟲bug歸來 程序員：該來的總會來 2021-02-21
- 成都網(wǎng)站建設(shè)的框架是什么 2023-11-24
- 漲知識！什么是網(wǎng)站優(yōu)化？ 2023-02-01
- 如何制作設(shè)計(jì)一個(gè)極簡風(fēng)格的企業(yè)網(wǎng)站 2014-01-17
- 這個(gè)App導(dǎo)航菜單的多樣設(shè)計(jì)不要太好啊! 2022-08-16
- 為什么要對網(wǎng)站源代碼進(jìn)行加密處理？ 2020-07-13
- 成都網(wǎng)站建設(shè)：做一個(gè)網(wǎng)站需要多少錢？ 2022-12-28
- 專題頁面制作的技巧有哪些 2021-04-22
- 網(wǎng)站建設(shè)前期需要注意什么問題和哪些事項(xiàng)？ 2023-10-24
- 成都SEO優(yōu)化如何提高網(wǎng)站的轉(zhuǎn)化率呢? 2023-04-08
- 高效企業(yè)使用CRM系統(tǒng)避免客戶流失 2016-08-02