JavaScript實現(xiàn)輪播圖效果
更新時間：2020年10月30日 11:14:14 作者：火星飛鳥
這篇文章主要介紹了JavaScript實現(xiàn)輪播圖效果，幫助大家更好的理解和學習JavaScript，感興趣的朋友可以了解下
要求：
- 鼠標經(jīng)過輪播圖模塊，左右按鈕顯示，離開隱藏左右按鈕
- 點擊右側(cè)按鈕一次，圖片往左播放一張，以此類推，左側(cè)按鈕同理
- 圖片播放的同時，下面小圓圈模塊跟隨一起變化
- 點擊小圓圈，可以播放相應圖片
- 鼠標不經(jīng)過輪播圖，輪播圖也會自動播放圖片
- 鼠標經(jīng)過，輪播圖模塊，自動播放停止
代碼實現(xiàn)：
autoPlay.html（復制并保存為html文件，打開即可見效果）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" rel="external nofollow" >
<script src="https://blog-static.cnblogs.com/files/jacklzx/animate.js"></script>
<script src="https://blog-static.cnblogs.com/files/jacklzx/autoPlay.js"></script>
</head>
<body>
<div class="focus">
<!-- 左側(cè)按鈕 -->
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="arrow-l"><</a>
<!-- 右側(cè)按鈕 -->
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="arrow-r">></a>
<!-- 滾動區(qū)域 -->
<ul>
<li>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="https://s1.ax1x.com/2020/10/12/0W1wlt.jpg" alt=""></a>
</li>
<li>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="https://s1.ax1x.com/2020/10/12/0W3nHS.jpg" alt=""></a>
</li>
<li>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="https://s1.ax1x.com/2020/10/12/0Wtrmq.jpg" alt=""></a>
</li>
<li>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="https://s1.ax1x.com/2020/10/12/0W1NYd.jpg" alt=""></a>
</li>
</ul>
<!-- 小圓圈 -->
<ol class="circle">
</ol>
</div>
</body>
</html>
autoPlay.css：
li {
list-style: none;
}
a {
text-decoration: none;
}
* {
margin: 0;
padding: 0;
}
body {
background-color: #00e1ff;
}
.focus {
overflow: hidden;
position: relative;
width: 721px;
height: 455px;
margin: 100px auto;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.6);
border-radius: 40px;
}
.focus ul {
position: absolute;
top: 0;
left: 0;
width: 600%;
}
.focus ul li {
float: left;
}
.arrow-l {
display: none;
position: absolute;
top: 50%;
left: -12px;
margin-top: -20px;
width: 40px;
height: 40px;
background: rgba(0, 0, 0, .3);
text-align: center;
line-height: 40px;
color: #fff;
font-size: 18px;
border-radius: 0 50% 50% 0;
z-index: 999;
}
.arrow-r {
display: none;
position: absolute;
top: 50%;
right: -12px;
margin-top: -20px;
width: 40px;
height: 40px;
background: rgba(0, 0, 0, .3);
text-align: center;
line-height: 40px;
color: #fff;
font-size: 18px;
border-radius: 50% 0 0 50%;
z-index: 999;
}
.circle {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
.circle li {
float: left;
width: 12px;
height: 12px;
border: 2px solid rgba(255, 255, 255, .5);
margin: 0 4px;
border-radius: 50%;
cursor: pointer;
}
.current {
background-color: #fff;
box-shadow: 0 0 10px #fff;
}
autoPlay.js：
window.addEventListener('load', function() {
// 獲取元素
var arrow_l = document.querySelector('.arrow-l');
var arrow_r = document.querySelector('.arrow-r');
var focus = document.querySelector('.focus');
var focusWidth = focus.offsetWidth;
// 自定義動畫函數(shù)animate的參數(shù)，表示動畫間隔
var step = 5;
// 鼠標經(jīng)過focus 就顯示左右按鈕，停止計時器
focus.addEventListener('mouseenter', function() {
arrow_l.style.display = 'block';
arrow_r.style.display = 'block';
clearInterval(timer);
timer = null; // 清空計時器
});
// 鼠標離開focus 就隱藏左右按鈕，調(diào)用定時器
focus.addEventListener('mouseleave', function() {
arrow_l.style.display = 'none';
arrow_r.style.display = 'none';
timer = setInterval(function() {
// 手動調(diào)用點擊事件
arrow_r.click();
}, 2000);
});
var ul = focus.querySelector('ul');
var ol = focus.querySelector('.circle');
for (var i = 0; i < ul.children.length; i++) {
// 創(chuàng)建 li
var li = document.createElement('li');
// 設(shè)置自定義屬性，記錄小圓圈索引號
li.setAttribute('index', i);
// li插入ol
ol.appendChild(li);
// 小圈圈排他思想 生成圈圈同時 直接綁定事件
li.addEventListener('click', function() {
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
this.className = 'current';
// 點擊小圈圈，移動圖片，移動的是ul
// 點擊li，拿到當前的索引號
var index = this.getAttribute('index');
// 當點擊了li之后，就要把index給num，實現(xiàn)同步
num = index;
// 當點擊了li之后，就要把index給circle，實現(xiàn)同步
circle = index;
animate(ul, -index * focusWidth, step);
});
}
// ol里第一個li的類名設(shè)置為current
ol.children[0].className = 'current';
var num = 0;
// circle控制小圓圈的播放
var circle = 0;
// 克隆第一章圖片li，放到ul最后面
// 要在生成小圓圈之后克隆
var first = ul.children[0].cloneNode(true);
ul.appendChild(first);
// 點擊右側(cè)按鈕，圖片滾動
arrow_r.addEventListener('click', function() {
// 如果到了最后一張圖片，ul要快速復原：left改為0
if (num == ul.children.length - 1) {
ul.style.left = 0;
num = 0;
}
num++;
animate(ul, -num * focusWidth, step);
// circle控制小圓圈的播放
circle++;
circle = circle == ol.children.length ? 0 : circle;
circleChange();
});
// 點擊左側(cè)按鈕，圖片滾動
arrow_l.addEventListener('click', function() {
if (num == 0) {
num = ul.children.length - 1;
ul.style.left = -num * focusWidth + 'px';
}
num--;
animate(ul, -num * focusWidth, step);
// circle控制小圓圈的播放
circle--;
circle = circle < 0 ? (ol.children.length - 1) : circle;
circleChange();
});
// 小圈圈改變樣式
function circleChange() {
// 排他其他
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
// 留下自己
ol.children[circle].className = 'current';
}
// 自動播放功能
var timer = setInterval(function() {
// 手動調(diào)用點擊事件
arrow_r.click();
}, 2000);
});
animate.js：
function animate(obj, target, time, callback) {
// 先清除以前的定時器，只保留當前的一個定時器執(zhí)行
clearInterval(obj.timer);
obj.timer = setInterval(function() {
// 步長值寫到定時器的里面，并設(shè)置為整數(shù)
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
clearInterval(obj.timer);
// 回調(diào)函數(shù)寫到定時器結(jié)束里面
callback && callback();
}
obj.style.left = obj.offsetLeft + step + 'px';
}, time);
}
以上就是JavaScript實現(xiàn)輪播圖效果的詳細內(nèi)容，更多關(guān)于JavaScript 輪播圖的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了JS實現(xiàn)簡單面向?qū)ο蟮念伾x擇器,以完整實例形式分析了JavaScript基于面向?qū)ο髮崿F(xiàn)顏色選擇器的具體步驟與實現(xiàn)技巧,需要的朋友可以參考下2016-04-04
這篇文章主要介紹了JS字符串常用操作方法,結(jié)合實例形式總結(jié)分析了javascript字符串獲取、返回、拼接、替換、搜索、計算等相關(guān)操作技巧,需要的朋友可以參考下2019-06-06
JavaScript面向?qū)ο缶幊绦∮螒?--貪吃蛇代碼實例
這篇文章主要介紹了JavaScript貪吃蛇的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
Javascript的常規(guī)數(shù)組和關(guān)聯(lián)數(shù)組對比小結(jié)
關(guān)聯(lián)數(shù)組雖然可以用字符串作下標，但是這個下標是不支持參數(shù)傳值的，換言之，你需要什么就取什么，聽起來很智能，實際上你取值仍然需要你手動去寫下標的2012-05-05
微信小程序網(wǎng)絡(luò)數(shù)據(jù)請求的實現(xiàn)詳解
這篇文章主要為大家介紹了微信小程序網(wǎng)絡(luò)數(shù)據(jù)請求的實現(xiàn)講解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
微信小程序Page中data數(shù)據(jù)操作和函數(shù)調(diào)用方法
這篇文章主要介紹了微信小程序Page中data數(shù)據(jù)操作和函數(shù)調(diào)用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
隨機生成10個不重復的0-100的數(shù)字(實例講解)
下面小編就為大家?guī)硪黄S機生成10個不重復的0-100的數(shù)字(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了使用javascript做的一個隨機點名程序，經(jīng)測試，效果相當不錯,需要的朋友可以參考下2014-02-02
使用ECharts實現(xiàn)狀態(tài)區(qū)間圖
這篇文章主要為大家詳細介紹了使用ECharts實現(xiàn)狀態(tài)區(qū)間圖，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
圖片懶加載又稱圖片延時加載、惰性加載,即在用戶需要使用圖片的時候加載,這樣可以減少請求,節(jié)省帶寬,提高頁面加載速度,相對的,也能減少服務(wù)器壓力,下面這篇文章主要給大家介紹了關(guān)于前端圖片懶加載的原理與3種實現(xiàn)方式的相關(guān)資料,需要的朋友可以參考下2023-03-03