溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下使用純CSS、JS實現(xiàn)圖片輪播效果的示例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
1、js屬于一種解釋性腳本語言；2、在絕大多數(shù)瀏覽器的支持下，js可以在多種平臺下運行，擁有著跨平臺特性；3、js屬于一種弱類型腳本語言，對使用的數(shù)據(jù)類型未做出嚴(yán)格的要求，能夠進(jìn)行類型轉(zhuǎn)換，簡單又容易上手；4、js語言安全性高，只能通過瀏覽器實現(xiàn)信息瀏覽或動態(tài)交互，從而有效地防止數(shù)據(jù)的丟失；5、基于對象的腳本語言，js不僅可以創(chuàng)建對象，也能使用現(xiàn)有的對象。
代碼如下：
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<!--輪播-->
<style>
.carousel {
width: 648px;
height: 400px;
margin: 0 auto;
text-align: center;
position: absolute;
left: 24%;
/*border: 1px solid red;*/
}
.inner {
/*border: 12px solid blue;*/
width: 648px;
height: 400px;
position: absolute;
}
.inner-img {
width: 200px;
height: 500px;
display: none;
/*position: absolute;*/
position: relative;
/*top:0;*/
/*left:0;*/
/*z-index:1000;*/
}
.inner-img.active {
display: block;
}
.leftBtn,
.rightBtn {
position: absolute;
width: 40px;
height: 60px;
background: rgba(0, 0, 0, 0.3);
/*近乎透明色*/
font-size: 30px;
color: #fff;
text-align: center;
line-height: 60px;
cursor: pointer;
display: none;
}
.leftBtn {
left: 5px;
top: 170px;
}
.rightBtn {
/*right:5px;*/
left: 603px;
top: 170px;
}
.carousel ul {
position: absolute;
/*left:20px;*/
padding-left: 228px;
bottom: 10px;
/*z-index: 999;*/
list-style: none;
width: 200px;
height: 20px;
}
.carousel ul .page {
float: left;
width: 18px;
height: 18px;
line-height: 18px;
border-radius: 18px;
/*變成圓形*/
background: black;
margin-right: 6px;
/*距離6個px單位*/
color: #fff;
font-size: 14px;
/*text-align: center;*/
cursor: pointer;
}
.carousel ul .page.active {
background-color: red;
}
.carousel p {
/*float: left;*/
margin-top: -360px;
margin-right: -600%;
color: black;
text-decoration: none;
list-style: none;
}
</style>
</head>
<body>
<!--輪播-->
<p class="carousel">
<p class="inner">
<a href="#" class="inner-img active"><img src="https://s2.ax1x.com/2019/11/06/MCxe0O.jpg" alt="圖片加載中" width="648" height="400"></a>
<a href="#" class="inner-img"><img src="https://s2.ax1x.com/2019/11/06/MCxl9A.jpg" alt="圖片加載中" width="648" height="400"></a>
<a href="#" class="inner-img"><img src="https://s2.ax1x.com/2019/11/06/MCxJnf.jpg" alt="圖片加載中" width="648" height="400"></a>
<a href="#" class="inner-img"><img src="https://s2.ax1x.com/2019/11/06/MCxtHS.jpg" alt="圖片加載中" width="648" height="400"></a>
<a href="#" class="inner-img"><img src="https://s2.ax1x.com/2019/11/06/MCxaNQ.jpg" alt="圖片加載中" width="648" height="400"></a>
<a href="#" class="inner-img"><img src="https://s2.ax1x.com/2019/11/06/MCx6BT.jpg" alt="圖片加載中" width="648" height="400"></a>
<a href="#" class="inner-img"><img src="https://s2.ax1x.com/2019/11/06/MCxW4J.jpg" alt="圖片加載中" width="648" height="400"></a>
<a href="#" class="inner-img"><img src="https://s2.ax1x.com/2019/11/06/MCx43R.jpg" alt="圖片加載中" width="648" height="400"></a>
<p class="leftBtn"><</p>
<!--左按鈕-->
<p class="rightBtn">></p>
<!--右按鈕-->
</p>
<ul>
<li class="page active">1</li>
<li class="page">2</li>
<li class="page">3</li>
<li class="page">4</li>
<li class="page">5</li>
<li class="page">6</li>
<li class="page">7</li>
<li class="page">8</li>
</ul>
</p>
</body>
<script>
var carousel = document.getElementsByClassName('carousel')[0], //獲取carousel的class類
// 獲取所有包含圖片的鏈接
innerImg = document.getElementsByClassName('inner-img'),
// 獲取左右按鈕
btnL = document.getElementsByClassName('leftBtn')[0],
btnR = document.getElementsByClassName('rightBtn')[0],
// 獲取分頁器
page = document.getElementsByClassName('page'),
num = 0; // 聲明變量 初始圖片為第一張0
// 聲明時間控制函數(shù)
var timer = setInterval(moveR, 2500); //調(diào)用moveR 時間間隔2.5s
// 圖片向右輪播
function moveR() {
num++; // 變量每3000毫秒遞增一次,圖片向右輪播
// 如果是最后一張圖片的時候從0開始顯示
if(num == innerImg.length) {
num = 0;
}
move();
};
// 圖片向左輪播
function moveL() {
num--; // 每調(diào)用一次moveL(),變量遞減一次
// 如果是第一張圖片，則從最后一張圖片開始顯示
if(num == -1) {
num = innerImg.length - 1;
};
move();
} // 圖片切換
function move() { // 把所有的innerImg隱藏和page背景全部變成黑色
for(var i = 0; i < innerImg.length; i++) {
innerImg[i].style.display = 'none';
page[i].style.background = 'black';
}
// 把當(dāng)前num下標(biāo)的innerImg顯示和page背景變成red
innerImg[num].style.display = 'block';
page[num].style.background = 'red'; }
// 分頁器鼠標(biāo)滑過時圖片切換
for(var i = 0; i < page.length; i++) {
// 用來保存下標(biāo)，page[i].index == 0 / 1 / 2 / 3 /4...
page[i].index = i;
// console.log(page[i].index);
// 因為已經(jīng)保存好的下邊，這里的page[i], page[0], page[1], page[2], page[3]
page[i].onmouseover = function() {
for(var j = 0; j < page.length; j++) {
page[j].style.background = 'black';
innerImg[j].style.display = 'none';
}
this.style.background = 'red'; // console.log(this.index);可以查看是多少
innerImg[this.index].style.display = 'block';
num = this.index;
}
}
btnL.onclick = function() {
moveL();
}
btnR.onclick = function() {
moveR();
}
// 鼠標(biāo)劃上carousel時讓左右按鈕顯示 并清除時間函數(shù)
carousel.onmouseover = function() {
// 清除時間函數(shù)
clearInterval(timer); //暫停 圖片不繼續(xù)循環(huán)
btnR.style.display = 'block';
btnL.style.display = 'block';
}
// 鼠標(biāo)離開carousel時讓左右按鈕隱藏
carousel.onmouseout = function() {
// 開啟時間函數(shù)
timer = setInterval(moveR, 2500);
btnR.style.display = 'none';
btnL.style.display = 'none';
}
</script></html>以上是“使用純CSS、JS實現(xiàn)圖片輪播效果的示例”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼