您好,登錄后才能下訂單哦!
這篇文章主要介紹“JS實現(xiàn)輪播圖效果的腳本怎么寫”的相關(guān)知識,小編通過實際案例向大家展示操作過程,操作方法簡單快捷,實用性強,希望這篇“JS實現(xiàn)輪播圖效果的腳本怎么寫”文章能幫助大家解決問題。
以下是具體的代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>w3cschool-億速云</title>
<!-- css樣式 -->
<style type="text/css">
/*清除邊距*/
div,ul,li{
margin: 0;
padding: 0;
}
/*首先準備一個放圖片的容器*/
.container{
width: 500px;
height: 280px;
position: relative;
top: 100px;
left: 30%;
/*border: 1px solid #ccc;*/
}
/*圖片樣式*/
.container img{
position: absolute; /*把所有圖片放在同一個位置*/
width: 100%;
transition-duration: 0.5s; /*設(shè)置過渡時間*/
opacity: 0; /*把所有圖片變透明*/
}
/*圖片顯示開關(guān)*/
.container img.on{
opacity: 1; /*用于顯示圖片*/
}
/*左右按鈕 按鈕用圖片更好點,這里為了簡便就用大于小于號*/
.left, .right{
position: absolute;
top: 30%;
width: 60px;
height: 100px;
line-height: 100px;
background-color: #666;
opacity: 0.5;
text-align: center;
font-size: 60px;
color: #ccc;
display: none; /*先隱藏按鈕*/
cursor: pointer; /*設(shè)置鼠標懸停時的樣式*/
}
.left{
left: 0;
}
.right{
right: 0;
}
.container:hover .left, .container:hover .right{
display: block; /*鼠標懸停才容器范圍內(nèi)時顯示按鈕*/
}
.left:hover, .right:hover{
color: #fff;
}
/*焦點*/
.container ul{
position: absolute;
bottom: 0;
max-width: 500px;
padding: 5px 200px;
}
.container ul li{
list-style: none;
float: left;
background-color: #ccc;
width: 10px;
height: 10px;
border-radius: 50%;
margin-left: 10px;
cursor: pointer;
}
.container ul li.active{
background-color: #282923; /*焦點激活時的樣式*/
}
</style>
</head>
<body>
<div class="container">
<!-- 先把第一張圖片顯示出來 -->
<img class="on" src="image/42.png" />
<img src="image/43.png" />
<img src="image/44.png" />
<img src="image/45.png" />
<!-- 左右切換 -->
<div class="left"><</div>
<div class="right">></div>
<!-- 焦點 -->
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!-- js部分 -->
<script type="text/javascript">
//1、找到container下的所有img標簽,li標簽,左右按鈕
var aImgs = document.querySelectorAll('.container img');
var aLis = document.querySelectorAll('.container li');
var btnLeft = document.querySelector('.container .left');
var btnRight = document.querySelector('.container .right');
//點擊事件
//點擊按鈕圖片切換
var index = 0; //當前圖片下標
var lastIndex = 0;
btnRight.onclick = function(){
//記錄上一張圖片的下標
lastIndex = index;
//清除上一張圖片的樣式
aImgs[lastIndex].className = '';
aLis[lastIndex].className = '';
index++;
index %= aImgs.length; //實現(xiàn)周期性變化
//設(shè)置當前圖片的樣式
aImgs[index].className = 'on';
aLis[index].className = 'active';
}
//左邊按鈕類似
btnLeft.onclick = function(){
//記錄上一張圖片的下標
lastIndex = index;
//清除上一張圖片的樣式
aImgs[lastIndex].className = '';
aLis[lastIndex].className = '';
index--;
if (index < 0) {
index = aImgs.length - 1;
}
//設(shè)置當前圖片的樣式
aImgs[index].className = 'on';
aLis[index].className = 'active';
}
</script>
</body>
</html>
關(guān)于“JS實現(xiàn)輪播圖效果的腳本怎么寫”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識,可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會為大家更新不同的知識點。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。