關(guān)于JavaScript輪播圖的實(shí)現(xiàn)
更新時(shí)間：2021年11月19日 14:26:50 作者：靠技術(shù)吃飯
這篇文章主要介紹了關(guān)于JavaScript輪播圖的實(shí)現(xiàn),下面文章主要是利用利用html 和 css 代碼實(shí)現(xiàn)輪播圖，詳細(xì)內(nèi)容請參考下面詳細(xì)內(nèi)容，希望對你有所幫助
今天又是一個(gè)非常實(shí)用的案例喲，聽名字就覺得高級很難對吧，今天就來寫一個(gè)案例，讓你輕松學(xué)到輪播圖的精髓??！
還是老規(guī)矩，來看一下實(shí)現(xiàn)效果！！
學(xué)習(xí)輪播圖的首先是要把圖片準(zhǔn)備好，并且用 ul 的里面的 li 包起來，給 li 一個(gè)浮動(dòng)，讓他們顯示在一行上，但是注意了，一定要給 ul 足夠的寬哦??！
來吧，html 和 css 代碼如下所示（文件名：index.html）
<!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>Document</title>
<script src="animate.js"></script>
<script src="輪播圖.js"></script>
<style>
body {
background-color: rgb(151, 147, 147);
}
* {
margin: 0;
padding: 0;
}
div {
overflow: hidden;
position: relative;
width: 500px;
height: 500px;
background-color: skyblue;
margin: 20px auto;
}
ul {
list-style: none;
}
.img {
width: 600%;
position: absolute;
left: 0;
}
li {
float: left;
}
img {
width: 500px;
height: 500px;
}
.yuan>li {
cursor: pointer;
width: 10px;
height: 10px;
background-color: rgb(190, 185, 185);
border-radius: 50%;
margin: 0 5px;
border: 1px solid rgb(119, 114, 114);
}
.yuan {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
.yuan .color {
background-color: rgb(228, 135, 135);
}
a {
text-decoration: none;
color: black;
background-color: rgb(112, 111, 111);
display: inline-block;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
position: absolute;
top: 50%;
transform: translateY(-50%);
display: none;
}
.left {
left: 0;
}
.right {
right: 0;
}
</style>
</head>
<body>
<div class="box">
<ul class="img">
<li><img src="images/1.webp" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.webp" alt=""></li>
<li><img src="images/4.webp" alt=""></li>
<li><img src="images/5.webp" alt=""></li>
</ul>
<a href="JavaScript:;" rel="external nofollow" rel="external nofollow" class="left"><</a>
<a href="JavaScript:;" rel="external nofollow" rel="external nofollow" class="right">></a>
<ul class="yuan"></ul>
</div>
</body>
</html>
這樣寫好以后，一個(gè)基本的樣子就算是有了。
接下來就是讓他動(dòng)起來，想想什么可以讓圖片動(dòng)起來，是不是我們學(xué)過的動(dòng)畫效果呀，所有這個(gè)地方要用緩動(dòng)動(dòng)畫來實(shí)現(xiàn)一個(gè)切換圖片的效果，因?yàn)?js 代碼較多，所以得新建一個(gè) js 文件，把代碼封裝起來！
下面就是封裝得 js 代碼 （文件名：輪播圖.js）
window.addEventListener('load', function () {
var img = document.querySelector('.img');
var yuan = document.querySelector('.yuan');
var box = document.querySelector('.box');
var left = document.querySelector('.left');
var right = document.querySelector('.right');
var imgwidth = box.offsetWidth; //獲取盒子的寬度（圖片的寬度）
// 經(jīng)過鼠標(biāo)觸發(fā) 停止自動(dòng)滾動(dòng)圖片效果
box.addEventListener('mouseenter', function () {
left.style.display = 'block';
right.style.display = 'block';
clearInterval(timer);
})
// 離開鼠標(biāo)觸發(fā) 自動(dòng)滾動(dòng)圖片再次觸發(fā)
box.addEventListener('mouseleave', function () {
left.style.display = 'none';
right.style.display = 'none';
timer = setInterval(function () {
right.click();
}, 2000)
})
// 根據(jù)圖片添加下面的小圓點(diǎn)
for (var i = 0; i < img.children.length; i++) {
var li = document.createElement('li');
yuan.appendChild(li);
li.setAttribute('date-index', i);
li.addEventListener('click', function () {
for (var j = 0; j < yuan.children.length; j++) {
yuan.children[j].className = '';
}
this.className = 'color';
var index = this.getAttribute('date-index');
var imgwidth = box.offsetWidth;
// animate(obj,target,function(){})
animate(img, -index * imgwidth);
nums = index;
colors = index;
})
}
// 默認(rèn)第一個(gè)小圓點(diǎn)有顏色
yuan.children[0].className = 'color';
var nums = 0;
var colors = 0;
// 復(fù)制第一張圖片到最后,給無縫滾動(dòng)做準(zhǔn)備
var li = img.children[0].cloneNode(true);
img.appendChild(li);
var flag = true;
//右邊按鈕,切換下一張,小圓點(diǎn)一起變化
right.addEventListener('click', function () {
if (flag) {
flag = false;
if (nums == img.children.length - 1) {
nums = 0;
img.style.left = 0;
}
nums++;
animate(img, -nums * imgwidth, function () {
flag = true;
});
colors++;
if (colors == yuan.children.length) {
colors = 0;
}
for (var j = 0; j < yuan.children.length; j++) {
yuan.children[j].className = '';
}
yuan.children[colors].className = 'color';
}
})
// 左邊按鈕,切換下一張,小圓點(diǎn)一起變化
left.addEventListener('click', function () {
if (flag) {
flag = false;
if (nums == 0) {
nums = img.children.length - 1;
img.style.left = -nums * imgwidth + 'px';
}
nums--;
colors--;
animate(img, -nums * imgwidth, function () {
flag = true;
});
if (colors < 0) {
colors = yuan.children.length - 1;
}
// if (colors == 0) {
// colors = yuan.children.length;
// }
// colors--;
for (var j = 0; j < yuan.children.length; j++) {
yuan.children[j].className = '';
}
yuan.children[colors].className = 'color';
}
})
// 鼠標(biāo)不經(jīng)過圖片實(shí)現(xiàn)自動(dòng)滾動(dòng)
var timer = setInterval(function () {
right.click();
}, 2000)
})
關(guān)鍵的來了，要讓動(dòng)起來怎么少得了動(dòng)畫效果呢，我單獨(dú)封裝了一個(gè) js 文件，這樣以后寫其他案例的時(shí)候也可以直接引用了。
代碼如下（文件名：animate.js）
function animate(obj, target, callback) { //移動(dòng)的對象(誰移動(dòng))，移動(dòng)的目的位置，回調(diào)函數(shù)
// 先清除以前的定時(shí)器，只保留當(dāng)前的一個(gè)定時(shí)器執(zhí)行
clearInterval(obj.timer);
obj.timer = setInterval(function () {
// 步長寫到定時(shí)器里面
var step = (target - obj.offsetLeft) / 10; //步長公式：(目標(biāo)位置-現(xiàn)在的位置)/10
step = step > 0 ? Math.ceil(step) : Math.floor(step); //步長改為整數(shù)，不要出現(xiàn)小數(shù)，正數(shù)向上取整，負(fù)數(shù)向下取整
if (obj.offsetLeft == target) {
clearInterval(obj.timer) //停止動(dòng)畫，本質(zhì)是停止定時(shí)器
if (callback) {
callback(); // 回調(diào)函數(shù)寫到定時(shí)器結(jié)束里面
}
}
//步長作為一個(gè)慢慢變小的值才能實(shí)現(xiàn)從快到慢的緩動(dòng)停止的效果
obj.style.left = obj.offsetLeft + step + 'px';
},15)
}
基本上都用注釋寫清楚了，應(yīng)該能每一步都看得懂了。
到此這篇關(guān)于關(guān)于JavaScript輪播圖的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)輪播圖的實(shí)現(xiàn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript?與?TypeScript之間的聯(lián)系
這篇文章主要介紹了?JavaScript?與?TypeScript之間的聯(lián)系,JavaScript,也稱為?JS,是一種符合?ECMAScript?規(guī)范的編程語言。這是一個(gè)高級別的、通常是即時(shí)編譯的、多范式的。TypeScript?是一種強(qiáng)類型、面向?qū)ο蟮木幾g語言，更多消息內(nèi)容,需要的朋友可以參考一下下面文章內(nèi)容2021-11-11
這篇文章主要介紹了前端常見跨域解決方案的相關(guān)內(nèi)容，包括對跨域的解釋，常見跨域場景以及跨域解決方案，內(nèi)容豐富，需要的朋友可以參考下。2017-09-09
這篇文章主要介紹了微信小程序 地圖定位簡單實(shí)例的相關(guān)資料,并附實(shí)例代碼及實(shí)現(xiàn)效果圖，需要的朋友可以參考下2016-10-10
這篇文章主要為大家介紹了使用pnpm包管理器替代npm及yarn的命令示例使用方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
js?交互在Flutter?中使用?webview_flutter
這篇文章主要為大家介紹了js?交互在Flutter?中使用?webview_flutter示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要介紹了微信小程序 picker組件詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2016-09-09
微信小程序中input標(biāo)簽詳解及簡單實(shí)例
這篇文章主要介紹了微信小程序中input標(biāo)簽詳解及簡單實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-05-05
微信小程序 數(shù)據(jù)綁定及運(yùn)算的簡單實(shí)例
這篇文章主要介紹了微信小程序 數(shù)據(jù)綁定的簡單實(shí)例的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-09-09
這篇文章主要介紹了 微信小程序（二十）slider組件詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2016-09-09
這篇文章主要為大家介紹了Array.reduce使用原理示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02