JavaScript實現(xiàn)簡易輪播圖最全代碼解析(ES5)
更新時間：2021年09月10日 10:36:00 作者：颯爾
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡易輪播圖最全代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript實現(xiàn)簡易輪播圖效果的具體代碼，供大家參考，具體內(nèi)容如下
全部代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ES5輪播圖</title>
<style>
* {padding: 0;margin: 0;}
#wrapper {
position: relative;
margin: 50px auto;
padding: 0;
width: 1000px;
height: 300px;
}
#wrapper .content {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
#wrapper>.content>.imgs {
position: absolute;
margin: 0;
padding: 0;
left: 0;
top: 0;
width: 6000px;
/*多留出一張圖片的寬度！*/
list-style: none;
}
#wrapper>.content>.imgs li {
float: left;
margin: 0;
padding: 0;
width: 1000px;
height: 300px;
}
#wrapper>.content>.imgs>li img {
width: 100%;
height: 100%;
}
#wrapper>.content>.dots {
width: 163px;
position: absolute;
right: 0;
left: 0;
margin: auto;
bottom: 10px;
list-style: none;
}
#wrapper>.content>.dots li {
float: left;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
border-radius: 50%;
margin-left: 10px;
cursor: pointer;
}
li.active {
background-color: white;
}
li.quiet {
background-color: #5a5a58;
}
.btns {
display: none;
}
.btns span {
position: absolute;
width: 25px;
height: 40px;
top: 50%;
margin-top: -20px;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: Simsun;
font-size: 30px;
border: 1px solid #fff;
opacity: 0.5;
cursor: pointer;
color: #fff;
background: black;
}
.btns .left {
left: 5px;
}
.btns .right {
left: 100%;
margin-left: -32px;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="content">
<ul class="imgs">
<li><img src="img/s1.jpg" /></li>
<li><img src="img/s2.jpg" /></li>
<li><img src="img/s3.jpg" /></li>
<li><img src="img/s4.jpg" /></li>
<li><img src="img/s5.jpg" /></li>
</ul>
<ul class='dots'></ul>
</div>
<div class="btns">
<span class="left"><</span>
<span class="right">></span>
</div>
</div>
</body>
</html>
<script>
var wrapper = document.getElementById("wrapper");
var imgs = document.getElementsByClassName("imgs")[0];
var dots = document.getElementsByClassName("dots")[0];
var btns = document.getElementsByClassName("btns")[0];
var dotss = dots.children;
var len = imgs.children.length; //圖片張數(shù)
var width = wrapper.offsetWidth; //每張圖片的寬度
var rate = 15; //一張圖片的切換速度， 單位為px
var times = 1; //切換速度的倍率
var timer = null; //初始化一個定時器
var imgSub = 0; //當(dāng)前顯示的圖片下標(biāo)
var dotSub = 0; //當(dāng)前顯示圖片的小圓點下標(biāo)
var temp;
// 創(chuàng)建一個文檔片段，此時還沒有插入到 DOM 結(jié)構(gòu)中
const frag = document.createDocumentFragment()
// 根據(jù)圖片數(shù)量添加相應(yīng)的小圓點到文檔片段中
for (let i = 0; i < len; i++) {
const dot = document.createElement("li");
dot.className = 'quiet';
// 先插入文檔片段中
frag.appendChild(dot);
}
// 將小圓點片段統(tǒng)一插入到 DOM 結(jié)構(gòu)中
dots.appendChild(frag)
// 第一個小圓點高亮顯示
dots.children[0].className = "active";
// 滑動函數(shù)
function Roll(distance) { //參數(shù)distance：滾動的目標(biāo)點（必為圖片寬度的倍數(shù)）
clearInterval(imgs.timer); //每次運行該函數(shù)必須清除之前的定時器！
//判斷圖片移動的方向
var speed = imgs.offsetLeft < distance ? rate : (0 - rate);
//設(shè)置定時器，每隔10毫秒，調(diào)用一次該匿名函數(shù)
imgs.timer = setInterval(function() {
//每一次調(diào)用滾動到的地方 (速度為 speed px/10 ms)
imgs.style.left = imgs.offsetLeft + speed + "px";
//距目標(biāo)點剩余的px值
var leave = distance - imgs.offsetLeft;
/*接近目標(biāo)點時的處理，滾動接近目標(biāo)時直接到達， 避免rate值設(shè)置不當(dāng)時不能完整顯示圖片*/
if (Math.abs(leave) <= Math.abs(speed)) {
clearInterval(imgs.timer);
imgs.style.left = distance + "px";
}
}, 10);
}
/*克隆第一個li到列表末*/
imgs.appendChild(imgs.children[0].cloneNode(true));
function autoRun() {
imgSub++;
dotSub++;
if (imgSub > len) { //滾動完克隆項后
imgs.style.left = 0; //改變left至真正的第一項處
imgSub = 1; //從第二張開始顯示
}
// 調(diào)用滾動函數(shù)，參數(shù)為該下標(biāo)的滾動距離
Roll(-imgSub * width);
// 如果圓點下標(biāo)已滾動到最后，則將下標(biāo)重置為0
if (dotSub > len - 1) { //判斷是否到了最后一個圓點
dotSub = 0;
}
// 循環(huán)修改所有圓點默認樣式
for (var i = 0; i < len; i++) {
dotss[i].className = "quiet";
}
// 給當(dāng)前滾動到的圓點添加高亮樣式
dotss[dotSub].className = "active";
}
// 創(chuàng)建定時器，開始自動滾動
timer = setInterval(autoRun,2000);
// 循環(huán)添加小圓點的觸發(fā)事件
for (var i = 0; i < len; i++) {
dotss[i].index = i;
dotss[i].onmouseover = function() {
for (var j = 0; j < len; j++) {
dotss[j].className = "quiet";
}
this.className = "active";
temp = dotSub;
imgSub = dotSub = this.index;
times = Math.abs(this.index - temp); //距離上個小圓點的距離
rate = rate * times; //根據(jù)距離改變切換速率
Roll(-this.index * width);
rate = 15;
}
}
// 添加事件：鼠標(biāo)移動到wrapper上，左右切換按鈕顯示
wrapper.onmouseover = function() {
clearInterval(timer);
btns.style.display = 'block';
}
// 添加事件：鼠標(biāo)移出wrapper，左右切換按鈕隱藏
wrapper.onmouseout = function() {
timer = setInterval(autoRun,2000);
btns.style.display = 'none';
}
// 點擊上一張按鈕 觸發(fā)事件
btns.children[0].onclick = function() {
imgSub--;
dotSub--;
if (imgSub < 0) { //滾動完第一項后
imgs.style.left = -len * width + "px"; //改變left至克隆的第一項處
imgSub = dotSub = len - 1;
}
Roll(-imgSub * width);
if (dotSub < 0) {
dotSub = len - 1;
}
for (var i = 0; i < len; i++) {
dotss[i].className = "quiet";
}
dotss[dotSub].className = "active";
}
// 點擊下一張按鈕 觸發(fā)事件
btns.children[1].onclick = autoRun;
</script>
圖片：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
CocosCreator Typescript制作俄羅斯方塊游戲
目前關(guān)于cocos開發(fā)俄羅斯方塊的文章幾乎寥寥無幾，因此本文將主要介紹如何通過CocosCreator Typescript制作簡單的俄羅斯方塊游戲，代碼具有一定價值，感興趣的同學(xué)可以學(xué)習(xí)一下2021-11-11
php gethostbyname獲取域名ip地址函數(shù)詳解
php gethostbyname獲取域名ip地址函數(shù)，需要根據(jù)域名得到ip地址的朋友有福了。2010-01-01
這篇文章主要介紹了JavaScript惰性載入函數(shù),結(jié)合實例形式分析了JavaScript惰性載入函數(shù)的概念、原理、實現(xiàn)方法及相關(guān)操作注意事項,需要的朋友可以參考下2019-03-03
前端實現(xiàn)（excel）xlsx文件預(yù)覽的詳細步驟
excel的預(yù)覽庫有不少,也都很強大,但是能很簡單實現(xiàn),下面這篇文章主要給大家介紹了關(guān)于前端實現(xiàn)（excel）xlsx文件預(yù)覽的詳細步驟,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-03-03
AJAX 是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術(shù),下面這篇文章主要給大家介紹了關(guān)于原生Ajax與JQuery?Ajax的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-03-03
在使用原生框架開發(fā)小程序時遇到一個問題，在 app.wxss 中定義的全局樣式在自定義組件中不生效，本文就詳細的介紹一下，感興趣的可以了解一下2021-08-08
JavaScript lodash常見用法系列小結(jié)
本篇文章主要介紹了JavaScript lodash用法小結(jié)，非常不錯，具有參考借鑒價值，對于Javascript lodash教程感興趣的同學(xué)可以參考一下2016-08-08
獲取HTMl文件制定的元素的實現(xiàn)代碼，需要的朋友可以參考下。2010-04-04
這篇文章主要為大家詳細介紹了Exif.js圖片旋轉(zhuǎn)修正的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
js樹插件zTree獲取所有選中節(jié)點數(shù)據(jù)的方法
這篇文章主要介紹了js樹插件zTree獲取所有選中節(jié)點數(shù)據(jù)的方法,是對js樹插件zTree非常實用的操作,需要的朋友可以參考下2015-01-01