前言：
? ? ? ? 這一期我們?nèi)ネㄟ^JavaScript的代碼實(shí)現(xiàn)輪播圖的制作，下面有效果展示和代碼資源，其中的圖片資源和代碼資源我都上傳上去了，如果需要運(yùn)行的話，你們可以去直接下載下來(lái)。希望各位喜歡！
效果展示?
1694164869515
功能說明：這個(gè)輪播圖可以自動(dòng)輪播（周期2秒），可以點(diǎn)擊向左和向右進(jìn)行圖片切換，還可以去點(diǎn)擊下面的小圓點(diǎn)去直接切換到想要的圖片。?
其中的向左和向右的按鍵是可以去通過阿里巴巴矢量圖庫(kù)去直接下載的
代碼
html代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
<link rel="stylesheet" href="./font/iconfont.css">
</head>
<body>
<div class="box">
<ul class="list">
<li><img src="../../image/t01164c857e5ef6a87b.jpg" alt="" width="1000px" height="620px"></li>
<li><img src="../../image/fa3dfe8a37336b982fdda9eeebdae5180fce177a.jpg" alt="" width="1000px" height="620px"></li>
<li><img src="../../image/bba7df2327d4bfca9b6353ecdace295251f0e622.png" alt="" width="1000px" height="620px"></li>
</ul>
<div class="left btn">
<i class="iconfont icon-xiangzuo1"></i>
</div>
<div class="right btn">
<i class="iconfont icon-xiangyou1"></i>
</div>
<div class="page">
<span></span>
<span></span>
<span></span>
</div>
</div>
<script async src="./index.js"></script>
</body>
</html>CSS代碼
*{
margin: 0;
padding: 0;
}
.box
{
margin: 100px auto;
height: 620px;
width: 1000px;
overflow: hidden;
border: 1px solid red;
position: relative;
}
ul>li{
list-style: none;
}
.left,.right{
position: absolute;
width: 50px;
height: 50px;
top: 50%;
margin-top:-10px ;
}
.left{
left: 20px;
}
.right{
right: 20px;
}
.btn i{
color: #a69d9d;
font-size: 63px;
}
.page{
display: flex;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -50.5px;
}
.page span{
display: block;
background-color: #e1c8c8;
width: 15px;
height: 15px;
border-radius: 50%;
margin-left: 25px;
}JavaScript代碼
//注意當(dāng)前元素是第幾個(gè)
let img=0;//默認(rèn)第一個(gè) 0 1 2
let left=document.getElementsByClassName('left')[0];
let right=document.getElementsByClassName('right')[0];
let list_span=document.querySelectorAll('.page span');
let list_img=document.querySelectorAll('.list img')
let box=document.getElementsByClassName('box')[0];
left.onclick=function(){
img--;
if(img<0){
//當(dāng)圖片下標(biāo)小于0，就回到第三張圖
img=2;
}
show(img);
}
right.onclick=function(){
img++;
if(img>2){
//如果當(dāng)圖片下標(biāo)大于2，就回到第一個(gè)圖片
img=0;
}
show(img);
}
//初始化(默認(rèn)顯示第一張圖片)
list_span[img].style.background='yellow';
//展示當(dāng)前的圖片
function show(index){
for (let i=0;i<list_img.length;i++){
list_img[i].style.display='none';
list_span[i].style.background='#e1c8c8';
}
//顯示當(dāng)前的圖片和下標(biāo)
list_img[index].style.display='block';
list_span[index].style.background='yellow';
}
//小圓點(diǎn)按鈕點(diǎn)擊換圖
for(let j=0;j<3;j++){
list_span[j].onclick=function(){
img=j;
show(img);
}
}
// 自動(dòng)輪播圖片(定時(shí)器)
let time=setInterval(function(){
right.onclick();
},2000);//兩秒鐘換一張圖片
//鼠標(biāo)移入就暫停
box.onmouseover=function(){
clearInterval(time);
};
//鼠標(biāo)移出就繼續(xù)輪播
box.onmouseout=function(){
time=setInterval(function(){
right.onclick();
},2000);
};
大致思路?
?實(shí)現(xiàn)去通過html和CSS進(jìn)行靜態(tài)布局，搭建好了網(wǎng)頁(yè)的框架之后就去通過JavaScript來(lái)實(shí)現(xiàn)周期自動(dòng)輪播、向左和向右切換以及點(diǎn)擊切換的動(dòng)態(tài)效果。
好了，以上就是本期的全部?jī)?nèi)容了，我們下一期再見！文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-700986.html
分享一張壁紙：?
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-700986.html
到了這里，關(guān)于JavaScript-----輪播圖案例展示的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
