javascript實現(xiàn)花樣輪播效果
更新時間：2021年09月06日 16:24:06 作者：最love酸奶
這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)花樣輪播效果，一種是帶按鈕的輪播，一種是自動輪播，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了javascript實現(xiàn)花樣輪播效果的兩種實現(xiàn)方法，供大家參考，具體內(nèi)容如下
第一種：簡單的帶按鈕的輪播
介紹：左右按鈕控制輪播，點擊左按鈕切換上一張圖片，點擊右按鈕切換下一張
html如下：
<div class="box">
<div class="imgbox">
<a><img src="img/banner1.jpg" alt=""></a>
<a><img src="img/banner2.jpg" alt=""></a>
<a><img src="img/banner3.jpg" alt=""></a>
<a><img src="img/banner4.jpg" alt=""></a>
<a><img src="img/banner5.jpg" alt=""></a>
</div>
<div class="btns">
<input type="button" id="left" value="<<<">
<input type="button" id="right" value=">>>">
</div>
css如下：
.box{width: 1000px;height: 300px;margin: 20px auto;position: relative;overflow: hidden;}
.box .imgbox{}
.imgbox a{width: 1000px;height: 300px;position: absolute;left:1000px;top:0;}
.imgbox a:nth-child(1){left:0;}
.imgbox img{width: 1000px;height: 300px;}
.btns input{width: 40px;height: 40px;position: absolute;top:130px;border: none;background: rgba(200,200,200,0.5);}
#left{left:0;}
#right{right: 0;}}
js如下：
class Banner{
constructor(){
this.left = document.getElementById("left");
this.right = document.getElementById("right");
this.child = document.querySelectorAll(".imgbox a");
// 要進(jìn)來的
this.iNow = 0;
// 要走的
this.iPrev = this.child.length - 1;
}
init(){
var that = this;
this.left.addEventListener("click",function(){
that.changeIndex(1);
})
this.right.addEventListener("click",function(){
that.changeIndex(2);
})
}
changeIndex(direct){
if(direct == 1){
if(this.iNow == 0){
this.iNow = this.child.length-1;
this.iPrev = 0;
}else{
this.iNow--;
this.iPrev = this.iNow + 1;
}
}else{
if(this.iNow == this.child.length-1){
this.iNow = 0;
this.iPrev = this.child.length-1;
}else{
this.iNow++;
// 要走的索引永遠(yuǎn)是進(jìn)來的索引-1
this.iPrev = this.iNow - 1;
}
}
// 根據(jù)索引開始運動
this.move(direct);
}
move(direct){
if(direct == 1){
// iPrev走
// 從0，走到1000
this.child[this.iPrev].style.left = 0;
move(this.child[this.iPrev],{left:1000});
// iNow進(jìn)來
// 從-1000，進(jìn)到0
this.child[this.iNow].style.left = -1000 + "px";
move(this.child[this.iNow],{left:0});
}else{
this.child[this.iPrev].style.left = 0;
move(this.child[this.iPrev],{left:-1000});
this.child[this.iNow].style.left = 1000 + "px";
move(this.child[this.iNow],{left:0});
}
}
}
var b = new Banner();
b.init();
第二種：自動輪播
介紹：兩個左右按鈕可以控制圖片左右切換，下面帶有數(shù)字的按鈕，點擊數(shù)字幾，就可以切換到第幾張，自動輪播的過程中，鼠標(biāo)進(jìn)入停止輪播，鼠標(biāo)離開繼續(xù)輪播
htm代碼如下：
<div class="box">
<div class="imgbox">
<a><img src="../img/banner1.jpg" alt=""></a>
<a><img src="../img/banner2.jpg" alt=""></a>
<a><img src="../img/banner3.jpg" alt=""></a>
<a><img src="../img/banner4.jpg" alt=""></a>
<a><img src="../img/banner5.jpg" alt=""></a>
</div>
<div class="btns">
<input type="button" id="left" value="<<<">
<input type="button" id="right" value=">>>">
</div>
<div class="list">
</div>
</div>
css代碼如下：
.box{width: 1000px;height: 300px;margin: 20px auto;position: relative;overflow: hidden;}
.box .imgbox{}
.imgbox a{width: 1000px;height: 300px;position: absolute;left:1000px;top:0;}
.imgbox a:nth-child(1){left:0;}
.imgbox img{width: 1000px;height: 300px;}
.btns input{width: 40px;height: 40px;position: absolute;top:130px;border: none;background: rgba(200,200,200,0.5);}
#left{left:0;}
#right{right: 0;}
.list{width: 1000px;height: 30px;position: absolute;left: 0;bottom: 0;display: flex;background: rgba(200,200,200,0.5);}
.list span{flex: 1;line-height: 30px;text-align: center;border-left:solid 1px black;border-right: solid 1px black;}
.list span.active{background: red;color: #fff;}
js代碼如下：
class Banner{
constructor(){
this.left = document.getElementById("left");
this.right = document.getElementById("right");
this.child = document.querySelectorAll(".imgbox a");
this.list = document.querySelector(".list");
this.box = document.querySelector(".box");
this.iNow = 0;
this.iPrev = this.child.length - 1;
}
init(){
var that = this;
this.left.addEventListener("click",function(){
that.changeIndex(1);
})
this.right.addEventListener("click",function(){
that.changeIndex(-1);
})
// L3.事件委托綁定事件
this.list.onclick = function(eve){
var e = eve || window.event;
var tar = e.target || e.srcElement;
if(tar.tagName == "SPAN"){
// L4.觸發(fā)事件時，執(zhí)行改變索引，同時將點前點擊的span傳入
that.listChangeIndex(tar);
}
}
}
changeIndex(direct){
if(direct == 1){
if(this.iNow == 0){
this.iNow = this.child.length-1;
this.iPrev = 0;
}else{
this.iNow--;
this.iPrev = this.iNow + 1;
}
}else{
if(this.iNow == this.child.length-1){
this.iNow = 0;
this.iPrev = this.child.length-1;
}else{
this.iNow++;
this.iPrev = this.iNow - 1;
}
}
this.move(direct);
}
move(direct){
// 根據(jù)左右按鈕傳入的狀態(tài)：左1，右-1
// 利用乘法
// 改變不同按鈕的方向問題
this.child[this.iPrev].style.left = 0;
move(this.child[this.iPrev],{left:this.child[0].offsetWidth * direct});
this.child[this.iNow].style.left = -this.child[0].offsetWidth * direct + "px";
move(this.child[this.iNow],{left:0});
this.setActive();
}
createList(){
// L1.創(chuàng)建對應(yīng)圖片數(shù)量的span，同時編號
var str = ``;
for(var i=0;i<this.child.length;i++){
str += `<span index='${i}'>${i+1}</span>`;
}
this.list.innerHTML = str;
// L2.設(shè)置默認(rèn)的當(dāng)前項
this.setActive();
}
setActive(){
for(var i=0;i<this.list.children.length;i++){
this.list.children[i].className = "";
}
this.list.children[this.iNow].className = "active";
}
listChangeIndex(tar){
// L5.確定要走的索引和要進(jìn)來的索引
// this.iNow 要走的
// 拿到點擊的span的編號 要進(jìn)來的
var index = parseInt(tar.getAttribute("index"));
// console.log(this.iNow, index);
// L6-1.判斷方向
if(index > this.iNow){
// L7-1.向左運動
this.listMove(1,index);
}
// L6-2.判斷方向
if(index < this.iNow){
// L7-2.向右運動
this.listMove(-1,index);
}
// L8.將當(dāng)前點擊的索引設(shè)置成下次要走的索引
this.iNow = index;
// L9.根據(jù)修改之后的索引，設(shè)置當(dāng)前項
this.setActive();
}
listMove(direct,index){
// this.iNow走
// 從哪走，走到哪
this.child[this.iNow].style.left = 0;
move(this.child[this.iNow],{left:-1000 * direct})
// index進(jìn)來
// 從哪進(jìn)來，進(jìn)到哪s
this.child[index].style.left = 1000 * direct + "px";
move(this.child[index],{left:0});
}
autoPlay(){
var t = setInterval(()=>{
this.changeIndex(-1);
},2000)
this.box.onmouseover = function(){
clearInterval(t);
}
var that = this;
this.box.onmouseout = function(){
t = setInterval(()=>{
that.changeIndex(-1);
},2000)
}
// console.log(that);
}
}
var b = new Banner();
b.init();
b.createList();
b.autoPlay();
兩個案例 js 里面的move是一個緩沖運動的封裝，代碼如下：
function move(ele,obj,cb){
clearInterval(ele.t);
ele.t = setInterval(() => {
// 假設(shè)狀態(tài)為：可以清除計時器
var i = true;
// 因為在計時器中才開始使用到對象中的信息，所以在計時器中遍歷
// 并提前換來的屬性和目標(biāo)變量
for(var attr in obj){
if(attr == "opacity"){
var iNow = getStyle(ele,attr) * 100;
}else{
var iNow = parseInt(getStyle(ele,attr));
}
let speed = (obj[attr] - iNow)/10;
speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed);
// 只要有一個屬性到目標(biāo)，就停了，不對
// 必須所有屬性到目標(biāo)，才能停
// 只要有一個屬性沒到目標(biāo)，絕對不能停
// 用狀態(tài)來標(biāo)記到底要不要停止計時器
// 只要有一個屬性沒到目標(biāo)：絕對不能清除計時器
if(iNow !== obj[attr]){
i = false;
}
if(attr == "opacity"){
ele.style.opacity = (iNow + speed)/100;
}else{
ele.style[attr] = iNow + speed + "px";
}
}
// 如果每次計時器執(zhí)行結(jié)束，所有屬性都執(zhí)行了一遍之后，狀態(tài)還是true，表示，沒有被改成false，如果沒有被改成false，表示沒有屬性沒到終點，那么狀態(tài)還是false就不清除
if(i){
clearInterval(ele.t);
// 用戶決定在動畫結(jié)束時要執(zhí)行的功能，萬一用戶沒傳參，做個默認(rèn)判斷
if(cb){
cb();
}
// cb && cb();
}
}, 30);
}
function getStyle(ele,attr){
if(ele.currentStyle){
return ele.currentStyle[attr];
}else{
return getComputedStyle(ele,false)[attr];
}
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Openlayers顯示地理位置坐標(biāo)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要為大家詳細(xì)介紹了JavaScript之cookie技術(shù),運用JS設(shè)置cookie、讀取cookie、刪除cookie ,需要的朋友可以參考下2016-11-11
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)按字母排列選擇城市功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了JavaScript引用賦值與傳值賦值總結(jié)，在JavaScript中基本數(shù)據(jù)類型都是傳值賦值，復(fù)合數(shù)據(jù)類型都是引用賦值(傳地址)也叫引用傳址，下文更多相關(guān)資料，需要的小伙伴可以參考一下2022-05-05
這篇文章主要介紹了js實現(xiàn)黑白div塊畫空心的圖形，畫出矩形、三角形、菱形、圓形，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要為大家詳細(xì)介紹了JavaScript DOM實現(xiàn)簡單留言板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)長圖滾動效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
javascript生成/解析dom的CDATA類型的字段的代碼
javascript生成/解析dom的CDATA類型的字段的代碼...2007-04-04
兩種方法實現(xiàn)在HTML頁面加載完畢后運行某個js
這篇文章主要介紹了通過兩種方法實現(xiàn)在HTML頁面加載完畢后運行某個js,需要的朋友可以參考下2014-06-06
ant-design-pro使用qiankun微服務(wù)配置動態(tài)主題色的問題
這篇文章主要介紹了ant-design-pro使用qiankun微服務(wù)配置動態(tài)主題色,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-03-03