原生JS實(shí)現(xiàn)簡(jiǎn)單的輪播圖效果
本文實(shí)例為大家分享了JS實(shí)現(xiàn)簡(jiǎn)單的輪播圖效果的具體代碼，供大家參考，具體內(nèi)容如下
實(shí)現(xiàn)效果：
功能需求：
1.鼠標(biāo)經(jīng)過(guò)輪播圖模塊，左右按鈕顯示，離開隱藏左右按鈕
2.點(diǎn)擊右側(cè)按鈕一次，圖片往左播放一張，左側(cè)按鈕同理。
3.圖片播放的同時(shí)，下面的小圓圈模塊也跟隨一起變化。
5.鼠標(biāo)不經(jīng)過(guò)輪播圖，輪播圖會(huì)自動(dòng)向右播放圖片，經(jīng)過(guò)輪播圖之后停止自動(dòng)播放圖片。
輪播圖向右移動(dòng)的時(shí)候要用到緩動(dòng)畫的函數(shù)，具體見(jiàn)博客：JS實(shí)現(xiàn)添加緩動(dòng)畫的方法
（1）布局：輪播圖部分的圖片用ul進(jìn)行布局，里面的每個(gè)li放a標(biāo)簽，a標(biāo)簽里面再放img；ul需要采用定位，目的是為了后面使用緩動(dòng)畫（要使用緩動(dòng)畫必須有定位），然后ul里面的li都浮動(dòng)起來(lái)在一行顯示，ul的寬度可以設(shè)置成輪播圖寬度的600%（這里只要比400%大就可以，因?yàn)檫@里放的是四張輪播圖），然后給輪播圖模塊設(shè)置overflow:hidden就只會(huì)展示一張圖片了。下面小圓點(diǎn)采用絕對(duì)定位，左右兩邊按鈕也采用絕對(duì)定位。
（2）功能1：鼠標(biāo)經(jīng)過(guò)輪播圖模塊，左右按鈕顯示，離開隱藏左右按鈕
非常簡(jiǎn)單，就是給輪播圖模塊添加mouseenter和mouseleave事件即可。
（3）功能2：根據(jù)圖片張數(shù)動(dòng)態(tài)添加小圓點(diǎn)
通過(guò)獲得ul里面li的個(gè)數(shù)來(lái)判斷一共需要添加多少個(gè)小圓點(diǎn)，但是這里要注意，因?yàn)楹竺嫘枰獙?shí)現(xiàn)輪播圖效果，所以最后一張圖片放的第一張圖片，相當(dāng)于會(huì)比原本的圖片多一張，所以這里小圓點(diǎn)生成的個(gè)數(shù)是圖片張數(shù)減一，通過(guò)document.createElement('li')創(chuàng)建小圓點(diǎn)，然后通過(guò)appendChild添加到小圓點(diǎn)列表中。
（4）功能3：點(diǎn)擊右側(cè)按鈕一次，圖片往左播放一張，左側(cè)按鈕同理。
這個(gè)功能是最復(fù)雜的功能，這個(gè)功能做好了，后面的自動(dòng)播放功能就很簡(jiǎn)單了，那么現(xiàn)在來(lái)說(shuō)說(shuō)這個(gè)功能的思路：
（5）功能4：圖片播放的同時(shí)，下面的小圓圈模塊也跟隨一起變化。
再聲明一個(gè)變量circle，點(diǎn)擊一次按鈕，自增1，然后這個(gè)變量對(duì)應(yīng)小圓點(diǎn)坐標(biāo)，把當(dāng)前坐標(biāo)的小圓點(diǎn)的類改為current（即變色）,但是要注意，在滾動(dòng)到最后一張圖片的時(shí)候，因?yàn)閡l會(huì)快速不做動(dòng)畫跳到最左側(cè)，同時(shí)把num設(shè)置為0，然后再進(jìn)行num++執(zhí)行滑動(dòng)到第二張圖片，相當(dāng)于這一次點(diǎn)擊操作執(zhí)行了兩個(gè)步驟：滑動(dòng)到最左側(cè)同時(shí)執(zhí)行緩動(dòng)畫移動(dòng)到第二張圖片，這樣看起來(lái)就會(huì)很順暢，看起來(lái)像是從最后一張圖片滾動(dòng)到第一張圖片。但是小圓點(diǎn)并沒(méi)有最后一張圖的坐標(biāo)，也就是小圓點(diǎn)數(shù)量和圖片數(shù)量并不是相等的，這樣就會(huì)導(dǎo)致當(dāng)滑動(dòng)到最后一張圖片（與第一張圖片相同的那張圖片）的時(shí)候小圓點(diǎn)一個(gè)都沒(méi)有選中，所以需要提前判斷是否滑動(dòng)到最后一張，要是滑動(dòng)到最后一張就把最后一個(gè)小圓點(diǎn)的類設(shè)置成current。
（6）功能5：點(diǎn)擊小圓圈，可以播放相應(yīng)的圖片。
這個(gè)功能采用給小圓圈設(shè)置自定義屬性實(shí)現(xiàn)。
（7）功能6：鼠標(biāo)不經(jīng)過(guò)輪播圖，輪播圖會(huì)自動(dòng)向右播放圖片，經(jīng)過(guò)輪播圖之后停止自動(dòng)播放圖片。
這個(gè)功能其實(shí)就是鼠標(biāo)離開的時(shí)候手動(dòng)調(diào)用點(diǎn)擊右邊按鈕的函數(shù)，放上去的時(shí)候就清除定時(shí)器即可。
完整代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>輪播圖</title>
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.w {
overflow: hidden;
position: relative;
width: 720px;
height: 454px;
margin: 200px auto;
}
ul li {
list-style: none;
}
.main .focus ul {
position: absolute;
left: 0;
top: 0;
width: 600%;
}
.main .focus ul li {
float: left;
}
.main .focus ul li img {
width: 720px;
}
a[class^='arrow'] {
/* 開始時(shí)隱藏箭頭 */
display: none;
z-index: 1;
position: absolute;
cursor: pointer;
width: 30px;
height: 50px;
color: #fff;
text-align: center;
line-height: 50px;
font-weight: 700;
background-color: rgba(0, 0, 0, .3);
}
.arrow-left {
left: 0;
top: 50%;
transform: translateY(-50%);
}
.arrow-right {
right: 0;
top: 50%;
transform: translateY(-50%);
}
.main .focus ol {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 10px;
border-radius: 15px;
background-color: rgba(255, 255, 255, .5);
}
.main .focus ol li {
cursor: pointer;
float: left;
margin: 6px 6.5px;
list-style: none;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #fff;
}
.main .focus .current {
background-color: #f76211;
}
</style>
</head>
<body>
<div class="main w">
<div class="focus">
<!-- 左邊按鈕 -->
<a href="#" class="arrow-left"><</a>
<!-- 右邊按鈕 -->
<a href="#" class="arrow-right">></a>
<!-- 輪播圖部分 -->
<ul>
<li>
<a href="#"><img src="../upload/focus.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="../upload/focus1.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="../upload/focus2.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="../upload/focus3.jpg" alt=""></a>
</li>
<!-- 這一張的作用是為了后面做無(wú)縫鏈接 -->
<li>
<a href="#"><img src="../upload/focus.jpg" alt=""></a>
</li>
</ul>
<!-- 下面小圓點(diǎn)部分 -->
<ol class="circle">
</ol>
</div>
</div>
</body>
<script>
// 滑動(dòng)函數(shù)
function moves(obj, target, callback) {
window.clearInterval(obj.timer);
obj.timer = window.setInterval(function() {
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
window.clearInterval(obj.timer);
if (callback) {
callback();
}
} else {
obj.style.left = obj.offsetLeft + step + 'px';
}
}, 15)
}
// 移動(dòng)到圖片上的時(shí)候左右的箭頭才顯示出來(lái) 離開后又隱藏
var focusing = document.querySelector('.focus');
// 獲取左箭頭
var arrowleft = document.querySelector('.arrow-left');
// 獲取右箭頭
var arrowright = document.querySelector('.arrow-right');
var ul = document.querySelector('ul');
// 獲得圖片張數(shù)
var len = ul.children.length;
// 動(dòng)態(tài)生成下面的小圓點(diǎn)
var ol = document.querySelector('ol');
for (var i = 0; i < len - 1; i++) {
var newcircle = document.createElement('li');
ol.appendChild(newcircle);
}
// 把ol里面的第一個(gè)li的類名設(shè)置成current
ol.children[0].className = 'current';
// 收移動(dòng)到focus的時(shí)候顯示箭頭
focusing.addEventListener('mouseenter', function() {
// 鼠標(biāo)移動(dòng)到圖片的時(shí)候清除定時(shí)器
window.clearInterval(timer);
timer = null;
arrowleft.style.display = 'block';
arrowright.style.display = 'block';
})
// 鼠標(biāo)離開又隱藏
focusing.addEventListener('mouseleave', function() {
// 鼠標(biāo)離開又重新設(shè)置定時(shí)器
// 自動(dòng)播放輪播圖
timer = window.setInterval(function() {
// 手動(dòng)調(diào)用點(diǎn)擊事件
arrowright.click();
}, 2000)
arrowleft.style.display = 'none';
arrowright.style.display = 'none';
})
// 給每個(gè)小圓點(diǎn)設(shè)置自定義屬性
for (var i = 0; i < len - 1; i++) {
ol.children[i].setAttribute('index', i);
}
// 點(diǎn)擊哪個(gè)小圓圈哪個(gè)小圓圈就變色 -排他思想
for (var i = 0; i < len - 1; i++) {
ol.children[i].addEventListener('click', function() {
for (var j = 0; j < len - 1; j++) {
ol.children[j].className = '';
}
// 點(diǎn)擊第幾個(gè)小圓點(diǎn)ul就移動(dòng)小圓點(diǎn)坐標(biāo)乘以圖片寬度
// alert(-(this.getAttribute('index') * ul.children[0].offsetWidth));
moves(ul, -this.getAttribute('index') * ul.children[0].offsetWidth)
num = this.getAttribute('index');
circle = this.getAttribute('index');
this.className = 'current';
// ul.style.left = "-720px";
})
}
// 點(diǎn)擊右邊箭頭 設(shè)置一個(gè)num進(jìn)行移動(dòng)距離
var num = 0;
// 點(diǎn)擊右邊的箭頭小圓圈也變色
var circle = 0;
arrowright.addEventListener('click', function() {
if (num == len - 1) {
ul.style.left = 0;
num = 0;
circle = 0
}
num++;
moves(ul, -num * ul.children[0].offsetWidth);
circle++;
for (var i = 0; i < len - 1; i++) {
ol.children[i].className = '';
}
// 在加到最后一張重復(fù)圖片的時(shí)候就把第一個(gè)圓點(diǎn)變色
if (circle == len - 1) {
// alert('haha')
ol.children[0].className = 'current';
}
ol.children[circle].className = 'current';
})
// 點(diǎn)擊左邊箭頭
arrowleft.addEventListener('click', function() {
if (num == 0) {
num = len - 1;
ul.style.left = -num * ul.children[0].offsetWidth;
circle = len - 1;
}
num--;
moves(ul, -num * ul.children[0].offsetWidth);
circle--;
for (var i = 0; i < len - 1; i++) {
ol.children[i].className = '';
}
// 在減到最后一張重復(fù)圖片的時(shí)候就把第一個(gè)圓點(diǎn)變色
if (circle == 0) {
// alert('haha')
ol.children[0].className = 'current';
}
ol.children[circle].className = 'current';
})
// 自動(dòng)播放輪播圖
var timer = window.setInterval(function() {
// 手動(dòng)調(diào)用點(diǎn)擊事件
arrowright.click();
}, 2000)
</script>
</html>以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- 原生js實(shí)現(xiàn)輪播圖的示例代碼
- js實(shí)現(xiàn)輪播圖的完整代碼
- js實(shí)現(xiàn)支持手機(jī)滑動(dòng)切換的輪播圖片效果實(shí)例
- JS輪播圖實(shí)現(xiàn)簡(jiǎn)單代碼
- js實(shí)現(xiàn)點(diǎn)擊左右按鈕輪播圖片效果實(shí)例
- 使用html+js+css 實(shí)現(xiàn)頁(yè)面輪播圖效果(實(shí)例講解)
- js實(shí)現(xiàn)從左向右滑動(dòng)式輪播圖效果
- JS實(shí)現(xiàn)自動(dòng)輪播圖效果(自適應(yīng)屏幕寬度+手機(jī)觸屏滑動(dòng))
- 原生js實(shí)現(xiàn)無(wú)限循環(huán)輪播圖效果
- JS實(shí)現(xiàn)左右無(wú)縫輪播圖代碼
相關(guān)文章
使用reflect-metadata實(shí)現(xiàn)數(shù)據(jù)校驗(yàn)與日志記錄
在?TypeScript?生態(tài)系統(tǒng)中,reflect-metadata?庫(kù)是一種強(qiáng)大的工具,它允許我們?cè)谶\(yùn)行時(shí)獲取更多的類型信息,下面我們來(lái)看看如何在前端項(xiàng)目中使用reflect-metadata以及它能實(shí)現(xiàn)的能力吧2024-12-12
javascript實(shí)現(xiàn)的拖拽效果，可以把屏幕上的圖片拖動(dòng)到任意地方，效果平滑，點(diǎn)擊圖片還可以從側(cè)邊展開圖片的詳細(xì)信息，非常好的相冊(cè)效果2015-05-05
Wordpress ThickBox 點(diǎn)擊圖片顯示下一張圖的修改方法
Wordpress自帶的ThickBox特效中，單擊圖片會(huì)調(diào)用 tb_remove 以關(guān)閉特效窗口，現(xiàn)將修改其動(dòng)作為顯示下一張圖。2010-12-12
javascript實(shí)現(xiàn)給定半徑求出圓的面積
這篇文章主要介紹了javascript實(shí)現(xiàn)給定半徑求出圓的面積的相關(guān)資料,需要的朋友可以參考下2015-06-06
js結(jié)合css實(shí)現(xiàn)登錄后才能復(fù)制的效果實(shí)例
很多網(wǎng)站都有登錄后才能復(fù)制的限制，什么原理呢？css屬性u(píng)ser-select:none，通常會(huì)采用這種方式來(lái)禁止復(fù)制文本。但瀏覽開發(fā)者工具-審查元素，取消此樣式后，就可以選中文本了。想要完整地禁止復(fù)制，還需要通過(guò)js控制選擇的內(nèi)容。2023-07-07
electron多標(biāo)簽頁(yè)模式更像客戶端的實(shí)現(xiàn)示例
本文主要介紹了electron多標(biāo)簽頁(yè)模式更像客戶端,通過(guò)創(chuàng)建和管理多個(gè)網(wǎng)頁(yè)視圖或使用現(xiàn)成組件來(lái)實(shí)現(xiàn)類似Web瀏覽器的標(biāo)簽頁(yè)功能,具有一定的參考價(jià)值,感興趣的可以了解一下2024-11-11
js 定時(shí)器setTimeout無(wú)法調(diào)用局部變量的解決辦法
javascript中定時(shí)器setTimeout無(wú)法調(diào)用局部變量，只需要將setTimeout的第一個(gè)參數(shù)改成函數(shù)對(duì)象，而不是字符串，就可以了2013-11-11
這篇文章主要介紹了bootstrap可視化布局入門教程的相關(guān)資料，本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧2016-09-09
這篇文章主要為大家詳細(xì)介紹了js驗(yàn)證賬戶名是否重復(fù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
layer iframe 設(shè)置關(guān)閉按鈕的方法
今天小編就為大家分享一篇layer iframe 設(shè)置關(guān)閉按鈕的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09