溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章運用簡單易懂的例子給大家介紹如何使用JavaScript和CSS實現簡單的輪播圖播放效果，代碼非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
輪播圖通常是關注的焦點，用于照片畫廊或許多當代網站的大中心舞臺。雖然過去Adobe Flash經常是使用CSS3和JavaScript的首選工具，但是輪播圖可以輕松實現而無需大量代碼。
我在這里使用的技術是使用標準JavaScript和CSS3實現簡單輪播圖的最簡單方法之一，具有良好的交叉漸變過渡效果。
基本HTML是微不足道的。只需將幾個圖像放入div容器中：
<div class="slides"> <img src="image/cup.jpg" > <img src="image/flower.jpg"> <img src="image/flowers.jpg"> <img src="image/strawberry.jpg"> <img src="image/greatwall.jpg"> </div>
使用CSS在容器內堆疊所有圖片并定義過渡（特定于瀏覽器的前綴可能必須用于過渡）：
/* the slide container with a fixed size */
.slides {
box-shadow: 0px 0px 6px black;
margin: 0 auto;
width: 500px;
height: 300px;
position: relative;
}
/* the images are positioned absolutely to stack. opacity transitions are animated. */
.slides img {
display: block;
position: absolute;
transition: opacity 1s;
opacity: 0;
width: 100%;
}
/* the first image is the current slide. it's faded in. */
.slides img:first-child {
z-index: 2;
/* frontmost */
opacity: 1;
}
/* the last image is the previous slide. it's behind the current slide and it's faded over. */
.slides img:last-child {
z-index: 1;
/* behind current slide */
opacity: 1;
}在這個簡單的設置之后，剩下的就是更改輪播圖的順序以推進輪播圖放映。以下代碼段定期將第一張圖像（當前圖片）移動到容器的末尾，從而使下一張圖像成為當前圖片。由于上面定義的CSS規則，更改以交叉漸變為動畫。
function nextSlide() {
var q = function(sel) {
return document.querySelector(sel);
}
q(".slides").appendChild(q(".slides img:first-child"));
}
setInterval(nextSlide, 3000)以上就是步驟的分析，下面是完整代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function nextSlide() {
if (typeof $ == "undefined") var $ = function(sel) { return document.querySelector(sel); }
$(".slides").appendChild($(".slides img:first-child"));
}
setInterval(nextSlide, 3000)
</script>
<style type="text/css">
img{
width: 500px;
height: 300px;
}
.slides {
box-shadow: 0px 0px 6px black;
margin: 0 auto;
width: 500px;
height: 300px;
overflow: hidden;
}
.slides img {
position: absolute;
transition: opacity 1s;
opacity: 0;
}
.slides img:first-child {
z-index: 2;
opacity: 1;
}
.slides img:last-child {
z-index: 1;
opacity: 1;
}
</style>
</head>
<body>
<div class="slides">
<img src="image/cup.jpg" >
<img src="image/flower.jpg">
<img src="image/flowers.jpg">
<img src="image/strawberry.jpg">
<img src="image/greatwall.jpg">
</div>
</body>
</html>效果如下：
關于如何使用JavaScript和CSS實現簡單的輪播圖播放效果就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
