js實現(xiàn)輪播圖效果 純js實現(xiàn)圖片自動切換
更新時間：2020年08月09日 10:41:09 作者：foreverどL
這篇文章主要為大家詳細介紹了js實現(xiàn)輪播圖效果，圖片自動切換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了純js實現(xiàn)圖片自動切換的具體代碼，供大家參考，具體內容如下
1.鼠標經過的時候左右兩個小按鈕會自動彈出，自動播放停止，點擊左右小按鈕可以切換圖片；
2. 鼠標離開，恢復自動播放；
3. 點擊下方中間幾個小圓圈，也會自動切換圖片；
源代碼：
<!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;
}
/* 設置圖片的ul的樣式 */
.firstul {
position: absolute;
top: 0;
left: 0;
width: 500%;
}
.firstul li {
float: left;
/* display: none; */
}
/* 設置小圓圈的樣式 */
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)
// 第一步：
// 鼠標經過輪播圖的時候，左右小按鈕彈出
lunbotu.addEventListener('mouseenter', function () {
leftBox.style.display = 'block';
rightBox.style.display = 'block';
// 鼠標經過輪播圖的時候，停止定時器
clearInterval(timer);
})
// 鼠標離開輪播圖的時候，左右小按鈕隱藏
lunbotu.addEventListener('mouseleave', function () {
leftBox.style.display = 'none';
rightBox.style.display = 'none';
timer = setInterval(function () {
right.click();
}, 2000)
})
// 第二步：
// 1.動態(tài)生成小圓圈
// 2.小圓圈的個數(shù)要跟圖片一樣
// 3.先得到ul里面圖片的張數(shù)(圖片放入li里面，所以就是li的個數(shù))
// 4.利用循環(huán)動態(tài)生成小圓圈(這個小圓圈要放入ol里面)
// 5.創(chuàng)建節(jié)點createElement('li')]
// 6.插入節(jié)點ol.appendChild(li)
// 7.第一個小圓圈需要添加current類
for (var i = 0; i < ul.children.length; i++) {
// 創(chuàng)建一個li
var li = document.createElement('li')
// 記錄當前小圓圈的索引號 通過自定義屬性來做
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';
// 點擊小圓圈的時候切換到對應的圖片
// 得到索引號 index
var index = this.getAttribute('index');
// 解決小bug
num = index;
num_ol = index;
// console.log(lunbotuWidth);
// console.log(index)
animation(ul, - index * lunbotuWidth)
})
}
// 給第一個li變顏色
ol.children[0].className = 'current';
// 克隆第一個li
var first = ul.children[0].cloneNode(true);
ul.appendChild(first);
// 第三步:
// 點擊右邊按鈕事件
var num = 0;
// 點擊右側按鈕的時候小圓圈跟著滾動
var num_ol = 0;
// 節(jié)流閥，防止點擊過快，最后才加這句優(yōu)化
var flag = true;
// 右側按鈕：
right.addEventListener('click', function () {
if (flag) {
flag = false; // 關閉節(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';
}
});
// 左側按鈕：
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的時候需要，點擊左側按鈕，需要轉跳到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';
}
});
// 自動播放圖片
var timer = setInterval(function () {
right.click();
}, 2000)
</script>
</body>
</html>
5.Js文件的代碼
// 封裝了一個動畫js文件
function animation(obj,target,fn1){
// console.log(fn1);
// fn是一個回調函數(shù)，在定時器結束的時候添加
// 每次開定時器之前先清除掉定時器
clearInterval( obj.timer);
obj.timer = setInterval(function(){
// 步長計算公式 越來越小
// 步長取整
var step = (target - obj.offsetLeft) /10;
step = step > 0 ? Math.ceil(step) :Math.floor(step);
if(obj.offsetLeft == target){
clearInterval( obj.timer);
// 如果fn1存在，調用fn
if(fn1){
fn1();
}
}else{
// 每50毫秒就將新的值給obj.left
obj.style.left = obj.offsetLeft +step +'px';
}
},30)
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)監(jiān)聽頁面滾動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
JavaScript中你不知道的數(shù)學方法分享(非常實用)
JavaScript的Math對象包含了一些非常有用和強大的數(shù)學操作，可以在Web開發(fā)中使用，本文為大家整理了一些非常實用的數(shù)學方法，希望對大家有所幫助2023-07-07
這篇文章主要為大家詳細介紹了javascript實現(xiàn)數(shù)字時鐘效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-02-02
Event Loop，簡單翻譯就是?事件循環(huán)，是 JS 語言下實現(xiàn)運行時的一個機制，這篇文章主要介紹了JS?中的?Event?Loop?的基本知識,需要的朋友可以參考下2022-06-06
當一個項目經過持續(xù)迭代,不斷增加功能,逐漸變成一個復雜的產品時,新功能的開發(fā)變得相對困難,其中一個很大的原因是代碼復雜度高,導致可維護性和可讀性都很差,本文將從前端JavaScript的角度出發(fā),介紹一些有效的方法和技巧來優(yōu)化前端代碼的圈復雜度2023-10-10
iview?date-picker?options只可選當前日期之前的(當前之后的禁用)
如果日期對象date的時間戳大于當前時間的時間戳,則該日期在當前日期之后,會被禁用,下面通過實例代碼給大家介紹iview?date-picker?options只可選當前日期之前的,感興趣的朋友跟隨小編一起看看吧2024-12-12
JavaScript開發(fā)小游戲,目標是使用JavaScript繪制簡單的二維地圖,采用二維數(shù)組存儲地圖信息,使用表格繪制地圖,每個td單元格存儲數(shù)據(jù),使用JavaScript keyPress鍵盤事件監(jiān)聽WASD鍵,按鍵觸發(fā)時人物做出相應操作,人物下一步碰撞到障礙物,終止人物運動2023-10-10
眾所周知，js是客戶端的，那么把驗證都做在客戶端有意義嗎？還是必須從服務器生成的驗證碼安全?。壳岸松傻尿炞C碼安全嗎？x下面我們來看個例子2015-05-05
這篇文章主要詳細介紹了javascript表單驗證和Window，并附上了示例代碼，非常使用，對于我們更好的了解表單驗證和Window很有幫助，這里推薦給大家2014-12-12
這篇文章主要介紹了JavaScript的內存空間、賦值和深淺拷貝，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04