js實(shí)現(xiàn)輪播圖效果 純js實(shí)現(xiàn)圖片自動(dòng)切換
更新時(shí)間：2020年08月09日 10:41:09 作者：foreverどL
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)輪播圖效果，圖片自動(dòng)切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了純js實(shí)現(xiàn)圖片自動(dòng)切換的具體代碼，供大家參考，具體內(nèi)容如下
1.鼠標(biāo)經(jīng)過的時(shí)候左右兩個(gè)小按鈕會(huì)自動(dòng)彈出，自動(dòng)播放停止，點(diǎn)擊左右小按鈕可以切換圖片；
2. 鼠標(biāo)離開，恢復(fù)自動(dòng)播放；
3. 點(diǎn)擊下方中間幾個(gè)小圓圈，也會(huì)自動(dòng)切換圖片；
源代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 輪播圖盒子樣式 */
.lunbotu {
position: relative;
width: 520px;
height: 280px;
margin: 50px auto;
background-color: blue;
overflow: hidden;
}
/* 左右按鈕樣式 */
.left,
.right {
display: none;
position: absolute;
top: 50%;
margin-top: -15px;
width: 30px;
height: 30px;
background-color: cornsilk;
border-radius: 15px;
text-align: center;
line-height: 30px;
cursor: pointer;
z-index: 1;
}
.left {
left: 0;
}
.right {
right: 0;
}
li {
list-style: none;
}
/* 設(shè)置圖片的ul的樣式 */
.firstul {
position: absolute;
top: 0;
left: 0;
width: 500%;
}
.firstul li {
float: left;
/* display: none; */
}
/* 設(shè)置小圓圈的樣式 */
ol {
/* width: 90px; */
padding: 0 5px 0 5px;
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -45px;
background-color: darkgrey;
text-align: center;
border-radius: 9px;
}
ol li {
display: inline-block;
width: 15px;
height: 15px;
border-radius: 50%;
margin-right: 5px;
background-color: white;
cursor: pointer;
}
.current {
background-color: red;
}
</style>
<script src="animation.js"></script>
</head>
<body>
<!-- 圖片大小全部是520*280 -->
<div class="lunbotu">
<!-- 左右按鈕 -->
<div class="left">></div>
<div class="right"><</div>
<!-- 圖片部分 -->
<ul class="firstul">
<li><a href=""><img src=" images/1.jpg" alt=""> </a></li>
<li><a href=""><img src=" images/2.jpg" alt=""> </a></li>
<li><a href=""><img src=" images/3.gif" alt=""> </a></li>
<li><a href=""><img src=" images/4.webp" alt=""> </a></li>
</ul>
<!-- 小圓圈 -->
<ol class="firstol"></ol>
</div>
<!-- JS部分 -->
<script>
// 1.獲取事件源
var lunbotu = document.querySelector('.lunbotu');
var leftBox = document.querySelector('.left');
var rightBox = document.querySelector('.right');
var ul = lunbotu.querySelector('ul');
var ol = lunbotu.querySelector('ol');
var right = document.querySelector('.right');
var left = document.querySelector('.left');
var lunbotuWidth = lunbotu.offsetWidth;
// console.log(ul)
// console.log(ol)
// 第一步：
// 鼠標(biāo)經(jīng)過輪播圖的時(shí)候，左右小按鈕彈出
lunbotu.addEventListener('mouseenter', function () {
leftBox.style.display = 'block';
rightBox.style.display = 'block';
// 鼠標(biāo)經(jīng)過輪播圖的時(shí)候，停止定時(shí)器
clearInterval(timer);
})
// 鼠標(biāo)離開輪播圖的時(shí)候，左右小按鈕隱藏
lunbotu.addEventListener('mouseleave', function () {
leftBox.style.display = 'none';
rightBox.style.display = 'none';
timer = setInterval(function () {
right.click();
}, 2000)
})
// 第二步：
// 1.動(dòng)態(tài)生成小圓圈
// 2.小圓圈的個(gè)數(shù)要跟圖片一樣
// 3.先得到ul里面圖片的張數(shù)(圖片放入li里面，所以就是li的個(gè)數(shù))
// 4.利用循環(huán)動(dòng)態(tài)生成小圓圈(這個(gè)小圓圈要放入ol里面)
// 5.創(chuàng)建節(jié)點(diǎn)createElement('li')]
// 6.插入節(jié)點(diǎn)ol.appendChild(li)
// 7.第一個(gè)小圓圈需要添加current類
for (var i = 0; i < ul.children.length; i++) {
// 創(chuàng)建一個(gè)li
var li = document.createElement('li')
// 記錄當(dāng)前小圓圈的索引號(hào) 通過自定義屬性來做
li.setAttribute('index', i);
// 把li添加到ol
ol.appendChild(li);
}
// 排他思想：讓小Li變白色
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].addEventListener('click', function () {
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
} this.className = 'current';
// 點(diǎn)擊小圓圈的時(shí)候切換到對(duì)應(yīng)的圖片
// 得到索引號(hào) index
var index = this.getAttribute('index');
// 解決小bug
num = index;
num_ol = index;
// console.log(lunbotuWidth);
// console.log(index)
animation(ul, - index * lunbotuWidth)
})
}
// 給第一個(gè)li變顏色
ol.children[0].className = 'current';
// 克隆第一個(gè)li
var first = ul.children[0].cloneNode(true);
ul.appendChild(first);
// 第三步:
// 點(diǎn)擊右邊按鈕事件
var num = 0;
// 點(diǎn)擊右側(cè)按鈕的時(shí)候小圓圈跟著滾動(dòng)
var num_ol = 0;
// 節(jié)流閥，防止點(diǎn)擊過快，最后才加這句優(yōu)化
var flag = true;
// 右側(cè)按鈕：
right.addEventListener('click', function () {
if (flag) {
flag = false; // 關(guān)閉節(jié)流閥
if (num == ul.children.length - 1) {
ul.style.left = 0;
num = 0;
}
num++;
animation(ul, -num * lunbotuWidth, function () {
flag = true;
});
num_ol++;
if (num_ol == ol.children.length) {
num_ol = 0
}
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[num_ol].className = 'current';
}
});
// 左側(cè)按鈕：
left.addEventListener('click', function () {
if (flag) {
flag = false;
if (num == 0) {
ul.style.left = -(ul.children.length - 1) * lunbotuWidth + 'px';
num = ul.children.length - 1;
}
num--;
animation(ul, -num * lunbotuWidth, function () {
flag = true;
});
num_ol--;
// num_ol=0的時(shí)候需要，點(diǎn)擊左側(cè)按鈕，需要轉(zhuǎn)跳到ol.children.length-1的位置
if (num_ol < 0) {
num_ol = ol.children.length - 1
}
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[num_ol].className = 'current';
}
});
// 自動(dòng)播放圖片
var timer = setInterval(function () {
right.click();
}, 2000)
</script>
</body>
</html>
5.Js文件的代碼
// 封裝了一個(gè)動(dòng)畫js文件
function animation(obj,target,fn1){
// console.log(fn1);
// fn是一個(gè)回調(diào)函數(shù)，在定時(shí)器結(jié)束的時(shí)候添加
// 每次開定時(shí)器之前先清除掉定時(shí)器
clearInterval( obj.timer);
obj.timer = setInterval(function(){
// 步長計(jì)算公式 越來越小
// 步長取整
var step = (target - obj.offsetLeft) /10;
step = step > 0 ? Math.ceil(step) :Math.floor(step);
if(obj.offsetLeft == target){
clearInterval( obj.timer);
// 如果fn1存在，調(diào)用fn
if(fn1){
fn1();
}
}else{
// 每50毫秒就將新的值給obj.left
obj.style.left = obj.offsetLeft +step +'px';
}
},30)
}
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 如何使用JavaScript實(shí)現(xiàn)無縫滾動(dòng)自動(dòng)播放輪播圖效果
- js實(shí)現(xiàn)自動(dòng)播放勻速輪播圖
- js實(shí)現(xiàn)支持手機(jī)滑動(dòng)切換的輪播圖片效果實(shí)例
- vue.js+elementUI實(shí)現(xiàn)點(diǎn)擊左右箭頭切換頭像功能（類似輪播圖效果）
- JS仿京東移動(dòng)端手指撥動(dòng)切換輪播圖效果
- javascript實(shí)現(xiàn)點(diǎn)擊按鈕切換輪播圖功能
- 原生JS實(shí)現(xiàn)旋轉(zhuǎn)輪播圖+文字內(nèi)容切換效果【附源碼】
- vue自定義js圖片碎片輪播圖切換效果的實(shí)現(xiàn)代碼
- js輪播圖透明度切換（帶上下頁和底部圓點(diǎn)切換）
- js實(shí)現(xiàn)點(diǎn)擊切換和自動(dòng)播放的輪播圖
相關(guān)文章
這篇文章主要介紹了js中如何通過父級(jí)進(jìn)行查找定位元素,需要的朋友可以參考下2014-06-06
JS實(shí)現(xiàn)支持Ajax驗(yàn)證的表單插件
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)支持Ajax驗(yàn)證的表單插件，感興趣的小伙伴們可以參考一下2016-03-03
onbeforeunload與onunload事件異同點(diǎn)總結(jié)
本文對(duì)onbeforeunload與onunload事件的異同點(diǎn)、觸發(fā)于、可以用在哪些元素以及解決刷新頁面時(shí)不調(diào)用onbeforeunload等等，感興趣的朋友可以參考下哈2013-06-06
JS繪圖Flot如何實(shí)現(xiàn)動(dòng)態(tài)可刷新曲線圖
這篇文章主要介紹了JS繪圖Flot如何實(shí)現(xiàn)動(dòng)態(tài)可刷新曲線圖,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10
原生JavaScript創(chuàng)建不可變對(duì)象的方法簡單示例
這篇文章主要介紹了原生JavaScript創(chuàng)建不可變對(duì)象的方法,結(jié)合簡單實(shí)例形式分析了基于原生JavaScript創(chuàng)建不可變對(duì)象的相關(guān)原理、實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下2020-05-05
JS簡單實(shí)現(xiàn)移動(dòng)端日歷功能示例
這篇文章主要介紹了JS簡單實(shí)現(xiàn)移動(dòng)端日歷功能的方法,涉及javascript針對(duì)日期與時(shí)間的操作及顯示相關(guān)技巧,需要的朋友可以參考下2016-12-12
Eclipse去除js(JavaScript)驗(yàn)證錯(cuò)誤
這篇文章主要是對(duì)Eclipse去除js(JavaScript)驗(yàn)證錯(cuò)誤進(jìn)行了介紹。在Eclipse中，js文件常常會(huì)報(bào)錯(cuò)?？梢酝ㄟ^如下幾個(gè)步驟解決2014-02-02
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡易計(jì)算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
JS將數(shù)字轉(zhuǎn)換成三位逗號(hào)分隔的樣式(示例代碼)
本篇文章主要是對(duì)JS將數(shù)字轉(zhuǎn)換成三位逗號(hào)分隔的樣式(示例代碼)進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-02-02
echarts中tooltip添加點(diǎn)擊事件代碼示例
這篇文章主要給大家介紹了關(guān)于echarts中tooltip添加點(diǎn)擊事件的相關(guān)資料,echarts tooltip點(diǎn)擊事件是指當(dāng)用戶點(diǎn)擊圖表中的提示框(tooltip)時(shí)觸發(fā)的事件,需要的朋友可以參考下2023-07-07