JS實現輪播圖效果的3種簡單方法
阿新 • • 發佈：2021-11-08
本文例項為大家分享了3種方法實現輪播圖效果的具體程式碼，供大家參考，具體內容如下
Js實現輪播圖01
實現思路
這可能是輪播圖最簡單點的實現之一，通過更改圖片的src來實現該效果，首先需要將圖片命名格式統一比如pic01.jpg，pic02.jpg…,再通過js使用定時器去改變img標籤裡面的src圖片連結的名字來實現切換效果。程式碼如下：
實現效果
<!DOCTYPE html>
<html>
<head>
<meta charhttp://www.cppcns.comset="utf-8">
<title>輪播圖實現01</title>
<style type="text/">
.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.定義定時器
clibpm
Js實現輪播圖02
實現思路
這可能是輪播圖最簡單點的實現之一，通過改變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/">
var index = 1;
function lunbo(){
index ++ ;
//判斷number是否大於3
if(index > 3){
index = 1;
}
//獲取img物件
var img =clibpm
Js實現輪播圖03
本輪播圖的實現，首先通過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.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.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.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)
}
}
程式碼可能寫的不是很好，存在很多不足，歡迎大家指點批評，我會努力去改正，有疑問歡迎留言，我會盡力去解答，謝謝大家花寶貴的時間來閱讀這篇文章。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。