溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“JavaScript如何實現首頁圖片輪播圖效果”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“JavaScript如何實現首頁圖片輪播圖效果”文章能幫助大家解決問題。
效果展示：
輪播圖是指在一個模塊或者窗口，通過鼠標點擊或手指滑動后，可以看到多張圖片。這些圖片統稱為輪播圖，這個模塊叫做輪播模塊。
<body> <div class="m-view"> <div class="slide" > <img src="1.jpg" alt="4"> <img src="2.jpg" alt="0"> <img src="3.jpg" alt="1"> <img src="4.jpg" alt="2"> <img src="5.jpg" alt="3"> <img src="3.jpg" alt="4"> <img src="2.jpg" alt="0"> </div> <div class="prev"><</div> <div class="next">></div> <div class="pointer"> <span class="button on" index="0"></span> <span class="button" index="1"></span> <span class="button" index="2"></span> <span class="button" index="3"></span> <span class="button" index="4"></span> </div> </div>
<style>
.m-view,.m-view .slide img{
position: relative;/*作為絕對定位的父元素*/
width: 500px;
height: 300px;
}
.m-view{
overflow: hidden;/*將超出該div的子元素隱藏*/
}
.m-view .slide{
position: absolute;
width: 500px;
height: 300px;
}
.m-view .slide img{
margin-right: -5px;
}
.m-view .prev,.m-view .next{
position: absolute;
top: 40%;
font: 60px/60px Microsoft YaHei;
color: #00BFFF;
}
.m-view .prev{
left: 10px;
}
.m-view .next{
right: 10px;
}
.m-view .pointer{
position: absolute;
bottom: 40px;
left: 33%;
}
.m-view .pointer span{
display: inline-block;/*水平排列*/
width: 40px;
height: 40px;
border-radius: 20px;
margin-right: 10px;
background-color: #00FF00;
}
.m-view .pointer .on{/*點亮當前圖片對應的圓圈*/
background-color: #1E90FF;
}
img{
object-fit: contain;
}
</style> var view=document.getElementsByClassName('m-view')[0];
var slide=document.getElementsByClassName('slide')[0];
var prev=document.getElementsByClassName('prev')[0];
var next=document.getElementsByClassName('next')[0];
var button=document.getElementsByClassName('button');
var curIndex=0;//當前圖片的索引位置
var toggled=true;//是否正在切換，true表明切換已完成，此時才能切換
/* Toggle函數實現切換一張圖片的功能 */
function Toggle () {
var TIMER=50;//滑動一次所用的時間，它是setInterval的第二個參數
var time=800;//每切換一張圖片總共用的時長
var times=time/TIMER;//每切換一張圖片需滑動的次數
var stepLenth=800/times;//每次滑動的步長
var leftToggle=function () {
var t1=times;
function leftStep(){
slide.style.left=parseInt(slide.style.left)+stepLenth+"px";
t1--;
if (!t1) {
clearInterval(interval);
curIndex--;
if (curIndex<0) {
slide.style.left=parseInt(slide.style.left)-4000+"px";
curIndex=4;
};
toggled=true;
};
};
if (toggled==true) {
toggled=false;
button[curIndex].className="button";
if (curIndex!=0) {
button[curIndex-1].className="button on";
}else{
button[curIndex+4].className="button on";
}
var interval=setInterval(leftStep,TIMER);
};
};
var rightToggle=function () {
var t2=times;
function leftStep(){
slide.style.left=parseInt(slide.style.left)-stepLenth+"px";
t2--;
if (!t2) {
clearInterval(interval);
curIndex++;
if (curIndex>4) {
slide.style.left=parseInt(slide.style.left)+4000+"px";
curIndex=0;
};
toggled=true;
};
};
if (toggled==true) {
toggled=false;
button[curIndex].className="button";
if (curIndex!=4) {
button[curIndex+1].className="button on";
}else{
button[curIndex-4].className="button on";
};
var interval=setInterval(leftStep,TIMER);
};
}
this.leftToggle=leftToggle;//輸出對外的接口
this.rightToggle=rightToggle;
};
var toggle=new Toggle();
prev.onclick=function () {
toggle.leftToggle();
};
next.onclick=function () {
toggle.rightToggle();
};
/* 點擊圓圈跳轉功能 */
for (var i = 0; i < button.length; i++) {
button[i].onclick=function () {
var newIndex=parseInt(this.getAttribute("index"));
if (newIndex!=curIndex) {
var distance=-800*(newIndex-curIndex);
slide.style.left=parseInt(slide.style.left)+distance+"px";
button[curIndex].className="button";
button[newIndex].className="button on";
curIndex=newIndex;
};
};
}
/* 自動播放功能，鼠標移上去停止播放，移開再次播放 */
var intervalo=setInterval(toggle.rightToggle,3000);
view.onmouseover=function () {
clearInterval(intervalo);
}
view.onmouseout=function () {
intervalo=setInterval(toggle.rightToggle,3000);
}關于“JavaScript如何實現首頁圖片輪播圖效果”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
