溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下使用純CSS、JS實現圖片輪播效果的示例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
1、js屬于一種解釋性腳本語言；2、在絕大多數瀏覽器的支持下，js可以在多種平臺下運行，擁有著跨平臺特性；3、js屬于一種弱類型腳本語言，對使用的數據類型未做出嚴格的要求，能夠進行類型轉換，簡單又容易上手；4、js語言安全性高，只能通過瀏覽器實現信息瀏覽或動態交互，從而有效地防止數據的丟失；5、基于對象的腳本語言，js不僅可以創建對象，也能使用現有的對象。
代碼如下：
<!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
// 聲明時間控制函數
var timer = setInterval(moveR, 2500); //調用moveR 時間間隔2.5s
// 圖片向右輪播
function moveR() {
num++; // 變量每3000毫秒遞增一次,圖片向右輪播
// 如果是最后一張圖片的時候從0開始顯示
if(num == innerImg.length) {
num = 0;
}
move();
};
// 圖片向左輪播
function moveL() {
num--; // 每調用一次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';
}
// 把當前num下標的innerImg顯示和page背景變成red
innerImg[num].style.display = 'block';
page[num].style.background = 'red'; }
// 分頁器鼠標滑過時圖片切換
for(var i = 0; i < page.length; i++) {
// 用來保存下標，page[i].index == 0 / 1 / 2 / 3 /4...
page[i].index = i;
// console.log(page[i].index);
// 因為已經保存好的下邊，這里的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();
}
// 鼠標劃上carousel時讓左右按鈕顯示 并清除時間函數
carousel.onmouseover = function() {
// 清除時間函數
clearInterval(timer); //暫停 圖片不繼續循環
btnR.style.display = 'block';
btnL.style.display = 'block';
}
// 鼠標離開carousel時讓左右按鈕隱藏
carousel.onmouseout = function() {
// 開啟時間函數
timer = setInterval(moveR, 2500);
btnR.style.display = 'none';
btnL.style.display = 'none';
}
</script></html>以上是“使用純CSS、JS實現圖片輪播效果的示例”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
