js制作輪播圖效果
更新時(shí)間：2021年10月18日 10:35:50 作者：楠瓜楠瓜南
這篇文章主要為大家詳細(xì)介紹了js制作輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
輪播圖在前端開(kāi)發(fā)中我認(rèn)為是一個(gè)比較重要的點(diǎn)，因?yàn)榘撕芏嘣鷍s知識(shí)點(diǎn)，以下是我學(xué)習(xí)制作輪播圖的過(guò)程
難點(diǎn)：
1、如何讓底下圓圈和圖片所對(duì)應(yīng)自動(dòng)動(dòng)態(tài)生成
2、如何讓底下圓圈和圖片所對(duì)應(yīng)的起來(lái)
3、上一頁(yè)和下一頁(yè)所在盒子所移動(dòng)的距離
4、圖片切換時(shí)的漸出動(dòng)畫(huà)效果
5、節(jié)流閥的概念
效果：
代碼：
<!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>
<style>
* {
padding: 0;
margin: 0;
}
a {
text-decoration: none;
color: white;
line-height: 50px;
text-align: center;
}
li {
list-style: none;
}
.tb-promo {
position: relative;
width: 700px;
height: 300px;
margin: auto;
overflow: hidden;
}
.tb-promo .imgg {
position: absolute;
top: 0;
left: 0;
width: 3000px;
}
.tb-promo .imgg li {
float: left;
}
.tb-promo .imgg li img {
width: 700px;
height: 300px;
}
.tb-promo .prev {
display: none;
position: absolute;
top: 125px;
left: 0;
width: 25px;
height: 50px;
background-color: rgba(0, 0, 0, 0.2);
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
z-index: 999;
}
.tb-promo .prev:hover {
background-color: rgba(0, 0, 0, 0.5);
}
.tb-promo .next {
display: none;
position: absolute;
top: 125px;
right: 0;
width: 25px;
height: 50px;
background-color: rgba(0, 0, 0, 0.2);
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
z-index: 999;
}
.tb-promo .next:hover {
background-color: rgba(0, 0, 0, 0.5);
}
.tb-promo .promo-nav {
position: absolute;
top: 270px;
left: 50%;
margin-left: -40px;
height: 25px;
}
.tb-promo .promo-nav li {
float: left;
width: 16px;
height: 16px;
background-color: white;
border-radius: 8px;
margin: 4px;
}
.tb-promo .promo-nav .one {
background-color: tomato;
}
</style>
</head>
<body>
<div class="tb-promo">
<a href="javascript:;" class="prev"><</a>
<a href="javascript:;" class="next">></a>
<ul class="imgg">
<li><img src="./61.jpeg" alt=""></li>
<li><img src="./62.jpeg" alt=""></li>
<li><img src="./63.jpeg" alt=""></li>
</ul>
<ol class="promo-nav">
</ol>
</div>
<script>
var prev = document.querySelector('.prev');
var next = document.querySelector('.next');
var tbpromo = document.querySelector('.tb-promo');
var ul = document.querySelector('ul');
var ol = document.querySelector('ol');
//動(dòng)畫(huà)函數(shù)
function animate(obj, target) {
clearInterval(obj.timer);//調(diào)用防止點(diǎn)擊多次調(diào)用
obj.timer = setInterval(function () {
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step); //正直和負(fù)值取整
if (obj.offsetLeft == target) {
clearInterval(obj.timer);
} else {
obj.style.left = obj.offsetLeft + step + 'px';
}
}, 10)
}
//生成動(dòng)態(tài)導(dǎo)航圈圈
var tbpromWidth = tbpromo.offsetWidth;
for (var i = 0; i < ul.children.length; i++) {
var li = document.createElement('li');
ol.appendChild(li);
//記錄索引號(hào) 通過(guò)自定義屬性
li.setAttribute('index', i);
//排他思想 寫(xiě)圓圈變色
li.addEventListener('click', function () {
//清除所有圈圈顏色
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
this.className = 'one';
var index = this.getAttribute('index');
//點(diǎn)擊li 把li 的索引號(hào)分別給控制變量
num = index;
circle=index;
animate(ul, -index * tbpromWidth);
})
ol.children[0].className = 'one';
}
//克隆第一張圖片li放在最后面 無(wú)縫切換
var frist = ul.children[0].cloneNode(true);
ul.appendChild(frist);
//隱藏顯示 下一頁(yè)上一頁(yè)
tbpromo.addEventListener('mouseenter', function () {
prev.style.display = 'block';
next.style.display = 'block';
clearInterval(timer);
timer=0;//清除定時(shí)器變量
})
tbpromo.addEventListener('mouseleave', function () {
prev.style.display = 'none';
next.style.display = 'none';
timer=setInterval(function () {
next.click();//手動(dòng)調(diào)動(dòng)點(diǎn)擊事件
},1500)
})
//next prev動(dòng)畫(huà)
var num = 0;
//控制圓圈
var circle = 0;
//節(jié)流閥變量
var flag=true;
//下一頁(yè)
next.addEventListener('click', function () {
//最后一張進(jìn)行判斷 ul復(fù)原 left為0
if (num == (ul.children.length - 1)) {
ul.style.left = 0;
num = 0;
}
num++;
animate(ul, -num * tbpromWidth);
circle++;
if (circle == 3) {
circle = 0;
}
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[circle].className = 'one';
})
//上一頁(yè)
prev.addEventListener('click', function () {
if (num == 0) {
num = ul.children.length-1;
ul.style.left = -num*tbpromWidth+'px';
}
else {
num--;
animate(ul, -num * tbpromWidth);
circle--;
if (circle <0) {
circle = 2;
}
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[circle].className = 'one';
}
})
//自動(dòng)播放
var timer=setInterval(function () {
next.click();//手動(dòng)調(diào)動(dòng)點(diǎn)擊事件
},2000)
</script>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)京東輪播圖效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
JavaScript讀取中文cookie時(shí)的亂碼問(wèn)題的解決方法
讀取中文cookie時(shí)出現(xiàn)亂碼，下面是具體的解決方法，大家以后使用過(guò)程中，盡量不要用中文。2009-10-10
js通過(guò)元素class名字獲取元素集合的具體實(shí)現(xiàn)
獲取元素集合的方法有很多，接下來(lái)為大家介紹喜愛(ài)使用js通過(guò)元素class名字獲取元素集合的方法2014-01-01
詳解TypeScript中type與interface的區(qū)別
在寫(xiě) ts 相關(guān)代碼的過(guò)程中，總能看到 interface 和 type 的身影。它們的作用好像都一樣的，相同的功能用哪一個(gè)都可以實(shí)現(xiàn)，也都很好用，所以也很少去真正的理解它們之間到底有啥區(qū)別，因此本文將詳細(xì)講解二者的區(qū)別，需要的可以參考一下2022-04-04
下面小編就為大家?guī)?lái)一篇深入理解JS DOM事件機(jī)制。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
這篇文章主要介紹了VsCode插件整理（小結(jié)），小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
Layui表格行內(nèi)動(dòng)態(tài)編輯數(shù)據(jù)
本文主要介紹經(jīng)典前端框架 layui 中的動(dòng)態(tài)表格數(shù)據(jù)操作，結(jié)合 JQuery 動(dòng)態(tài)編輯單元格中的數(shù)據(jù)，具有一定的參考價(jià)值，感興趣的可以了解一下2021-08-08
js實(shí)現(xiàn)可折疊展開(kāi)的手風(fēng)琴菜單效果
這篇文章主要介紹了js實(shí)現(xiàn)可折疊展開(kāi)的手風(fēng)琴菜單效果,通過(guò)簡(jiǎn)單的樣式變換控制菜單項(xiàng)的展開(kāi)與折疊功能,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-09-09
微信小程序云開(kāi)發(fā)使用方法新手初體驗(yàn)
微信小程序云開(kāi)發(fā)使用方法新手初體驗(yàn)，開(kāi)發(fā)者可以使用云開(kāi)發(fā)開(kāi)發(fā)微信小程序、小游戲，無(wú)需搭建服務(wù)器，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
下面小編就為大家分享一篇使用selenium抓取淘寶的商品信息實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02