本篇內容主要講解“javascript怎么實現輪播圖效果”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“javascript怎么實現輪播圖效果”吧!
本文實例為大家分享了javascript實現花樣輪播效果的兩種實現方法，供大家參考，具體內容如下
第一種：簡單的帶按鈕的輪播
介紹：左右按鈕控制輪播，點擊左按鈕切換上一張圖片，點擊右按鈕切換下一張
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");
// 要進來的
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++;
// 要走的索引永遠是進來的索引-1
this.iPrev = this.iNow - 1;
}
}
// 根據索引開始運動
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進來
// 從-1000，進到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();第二種：自動輪播
介紹：兩個左右按鈕可以控制圖片左右切換，下面帶有數字的按鈕，點擊數字幾，就可以切換到第幾張，自動輪播的過程中，鼠標進入停止輪播，鼠標離開繼續輪播
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.觸發事件時，執行改變索引，同時將點前點擊的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){
// 根據左右按鈕傳入的狀態：左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.創建對應圖片數量的span，同時編號
var str = ``;
for(var i=0;i<this.child.length;i++){
str += `<span index='${i}'>${i+1}</span>`;
}
this.list.innerHTML = str;
// L2.設置默認的當前項
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.確定要走的索引和要進來的索引
// this.iNow 要走的
// 拿到點擊的span的編號 要進來的
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.將當前點擊的索引設置成下次要走的索引
this.iNow = index;
// L9.根據修改之后的索引，設置當前項
this.setActive();
}
listMove(direct,index){
// this.iNow走
// 從哪走，走到哪
this.child[this.iNow].style.left = 0;
move(this.child[this.iNow],{left:-1000 * direct})
// index進來
// 從哪進來，進到哪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(() => {
// 假設狀態為：可以清除計時器
var i = true;
// 因為在計時器中才開始使用到對象中的信息，所以在計時器中遍歷
// 并提前換來的屬性和目標變量
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);
// 只要有一個屬性到目標，就停了，不對
// 必須所有屬性到目標，才能停
// 只要有一個屬性沒到目標，絕對不能停
// 用狀態來標記到底要不要停止計時器
// 只要有一個屬性沒到目標：絕對不能清除計時器
if(iNow !== obj[attr]){
i = false;
}
if(attr == "opacity"){
ele.style.opacity = (iNow + speed)/100;
}else{
ele.style[attr] = iNow + speed + "px";
}
}
// 如果每次計時器執行結束，所有屬性都執行了一遍之后，狀態還是true，表示，沒有被改成false，如果沒有被改成false，表示沒有屬性沒到終點，那么狀態還是false就不清除
if(i){
clearInterval(ele.t);
// 用戶決定在動畫結束時要執行的功能，萬一用戶沒傳參，做個默認判斷
if(cb){
cb();
}
// cb && cb();
}
}, 30);
}
function getStyle(ele,attr){
if(ele.currentStyle){
return ele.currentStyle[attr];
}else{
return getComputedStyle(ele,false)[attr];
}
}到此，相信大家對“javascript怎么實現輪播圖效果”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
