溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“JS實現輪播圖效果的方法有哪些”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“JS實現輪播圖效果的方法有哪些”吧！
實現思路
這可能是輪播圖最簡單點的實現之一，通過更改圖片的src來實現該效果，首先需要將圖片命名格式統一比如pic01.jpg，pic02.jpg…,再通過js使用定時器去改變img標簽里面的src圖片鏈接的名字來實現切換效果。代碼如下：
實現效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>輪播圖實現01</title>
<style type="text/css">
.lunbo{
width: 900px;
height: 400px;
margin:100px auto;
}
.lunbo img{
width: 100%;
height:100%;
}
</style>
</head>
<body>
<!--輪播圖模塊 -->
<div class="lunbo">
<img id="lunbo_img" src="./pic/img3.jpeg" >
</div>
<!-- Js代碼 -->
<script>
var index = 1;
function lunbo(){
index ++ ;
//判斷index是否大于3
if(index > 3){
index = 1;
}
//獲取img對象
var img = document.getElementById("lunbo_img");
img.src = "./pic/img"+index+".jpeg";
}
//2.定義定時器
setInterval(lunbo,2000);
/*切記定時器里調用lunbo方法不能加(),setInterval(lunbo,2000);如果加()會執行lunbo（）方法，而導致定時器沒用。
</script>
</body>
</html>實現思路
這可能是輪播圖最簡單點的實現之一，通過改變background的圖片鏈接來實現該效果，首先需要將圖片命名格式統一比如pic01.jpg，pic02.jpg…,再通過js使用定時器去改變background屬性里面的url（）圖片鏈接的名字來實現切換效果。代碼如下：
實現效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>輪播圖實現02</title>
<style>
body{
margin: 0;
padding: 0;
}
.lunbo{
width:100%;
height:720px;
background-image: url(pic/img1.jpeg);/*背景圖片*/
background-size:100% 100%;
}
</style>
</head>
<body>
<div class="lunbo">
</div>
<script type="text/javascript">
var index = 1;
function lunbo(){
index ++ ;
//判斷number是否大于3
if(index > 3){
index = 1;
}
//獲取img對象
var img = document.getElementsByClassName("lunbo")[0];
img.style.background = "url(pic/img"+index+".jpeg)";
img.style.backgroundSize="100% 100%";
}
//2.定義定時器
setInterval(lunbo,3000);
</script>
</body>
</html>本輪播圖的實現，首先通過CSS代碼將全部存放圖片的li標簽通過opacity屬性設置為0來隱藏不顯示， 通過js代碼使用定時器不斷調用類active突出顯示li標簽，同時隱藏兄弟li標簽，再通過index++來實現切換循環顯示的效果，當點擊兩邊的按鈕時，調用index++所在的方法實現切換的效果，沒有復雜的算法，一點點基礎一看代碼就會學會，請大家參考。
實現效果
HTML代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1,maximum-scale=1,user-scalable=no" /> <!--引入CSS代碼--> <link rel="stylesheet" type="text/css" href="./css/index.css" /> <!--引入Js代碼--> <script src="./js/index.js"></script> <title>Js實現輪播圖</title> </head> <body> <div class="lunbo"> <div class="content"> <ul id="item"> <li class="item"> <a href="#" ><img src="img/pic1.jpg" ></a> </li> <li class="item"> <a href="#" ><img src="img/pic2.jpg" ></a> </li> <li class="item"> <a href="#" ><img src="img/pic3.jpg" ></a> </li> <li class="item"> <a href="#" ><img src="img/pic4.jpg" ></a> </li> <li class="item"> <a href="#" ><img src="img/pic5.jpg" ></a> </li> </ul> <div id="btn-left"><</div> <div id="btn-right">></div> <ul id="circle"> <li class="circle"></li> <li class="circle"></li> <li class="circle"></li> <li class="circle"></li> <li class="circle"></li> </ul> </div> </div> </body> </html>
CSS代碼
*{
margin: 0;
padding: 0;
}
a{
list-style: none;
}
li{
list-style: none;
}
.lunbo{
width: 100%;
}
.content{
width: 800px;
height: 300px;
margin: 20px auto;
position: relative;
}
#item{
width: 100%;
height: 100%;
}
.item{
position: absolute;
opacity: 0;
transition: all 1s;
}
.item.active{
opacity:1;
}
img{
width: 100%;
}
#btn-left{
width: 30px;
height: 69px;
font-size: 30px;
color: white;
background-color:rgba(0,0,0,0.4);
line-height: 69px;
padding-left:5px;
z-index: 10;/*始終顯示在圖片的上層*/
position: absolute;
left: 0;
top: 50%;
transform: translateY(-60%);/*使按鈕向上偏移居中對齊*/
cursor: pointer;
opacity: 0;/*平時隱藏*/
}
.lunbo:hover #btn-left{
/*鼠標滑入，顯示圖標*/
opacity: 1;
}
#btn-right{
width: 26px;
height: 69px;
font-size: 30px;
color: white;
background-color:rgba(0,0,0,0.4);
line-height: 69px;
padding-left: 5px;
z-index: 10;
position: absolute;
right: 0;
top: 50%;
cursor: pointer;
opacity: 0;
transform: translateY(-60%);
}
.lunbo:hover #btn-right{
opacity: 1;
}
#circle{
height: 20px;
display: flex;
position: absolute;
bottom: 35px;
right: 25px;
}
.circle{
width: 10px;
height: 10px;
border-radius: 10px;
border: 2px solid white;
background: rgba(0,0,0,0.4);
cursor: pointer;
margin: 5px;
}
.white{
background-color: #FFFFFF;
}JS代碼
window.onload=function(){
var items=document.getElementsByClassName("item");
var circles=document.getElementsByClassName("circle");
var leftBtn=document.getElementById("btn-left");
var rightBtn=document.getElementById("btn-right");
var content=document.querySelector('.content');
var index=0;
var timer=null;
//清除class
var clearclass=function(){
for(let i=0;i<items.length;i++){
items[i].className="item";
circles[i].className="circle";
circles[i].setAttribute("num",i);
}
}
/*只顯示一個class*/
function move(){
clearclass();
items[index].className="item active";
circles[index].className="circle white";
}
//點擊右邊按鈕切換下一張圖片
rightBtn.onclick=function(){
if(index<items.length-1){
index++;
}
else{
index=0;
}
move();
}
//點擊左邊按鈕切換上一張圖片
leftBtn.onclick=function(){
if(index<items.length){
index--;
}
else{
index=items.length-1;
}
move();
}
//開始定時器，點擊右邊按鈕，實現輪播
timer=setInterval(function(){
rightBtn.onclick();
},1500)
//點擊圓點時，跳轉到對應圖片
for(var i=0;i<circles.length;i++){
circles[i].addEventListener("click",function(){
var point_index=this.getAttribute("num");
index=point_index;
move();
})
}
//鼠標移入清除定時器，并開啟一個三秒的定時器，使慢慢轉動
content.onmouseover=function(){
clearInterval(timer);
timer=setInterval(function(){
rightBtn.onclick();
},3000)
}
//鼠標移出又開啟定時器
content.onmouseleave=function(){
clearInterval(timer);
timer=setInterval(function(){
rightBtn.onclick();
},1500)
}
}感謝各位的閱讀，以上就是“JS實現輪播圖效果的方法有哪些”的內容了，經過本文的學習后，相信大家對JS實現輪播圖效果的方法有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
