HTML滑動切換圖片功能可以使網頁更具有美感和交互性，也是現代網頁設計中常用的功能之一。實現該功能的代碼也比較簡單，下面就來介紹一下。
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
var currentIndex = 0,
items = $('.slider figure'),
itemAmt = items.length;
function cycleItems() {
var item = $('.slider figure').eq(currentIndex);
items.hide();
item.css('display','inline-block');
}
var autoSlide = setInterval(function() {
currentIndex += 1;
if (currentIndex >= itemAmt) {
currentIndex = 0;
}
cycleItems();
}, 3000);
$('.next').click(function() {
clearInterval(autoSlide);
currentIndex += 1;
if (currentIndex >= itemAmt) {
currentIndex = 0;
}
cycleItems();
});
$('.prev').click(function() {
clearInterval(autoSlide);
currentIndex -= 1;
if (currentIndex < 0) {
currentIndex = itemAmt - 1;
}
cycleItems();
});
});
</script>
<style>
.slider {
width: 80%;
max-width: 700px;
margin: 2em auto;
overflow: hidden;
}
.slider figure {
display: inline-block;
position: relative;
width: 20%;
opacity: 0.4;
/*將所有 figure 隱藏且不占用空間*/
}
.slider figure img {
width: 100%;
height: auto;
}
.next, .prev {
position: absolute;
top: 40%;
display: block;
padding: 1% 1%;
color: #fff;
background-color: rgba(0,0,0,0.8);
z-index: 2;
opacity: 0.8;
cursor: pointer;
}
.next:hover, .prev:hover {
opacity: 1;
}
.next {
right: 0;
}
.prev {
left: 0;
}
</style>
</head>
<body>
<div class="slider">
<div class="slide-nav">
<span class="prev"><img src="prev.png"></span>
<span class="next"><img src="next.png"></span>
</div>
<figure>
<img src="image1.jpg">
</figure>
<figure>
<img src="image2.jpg">
</figure>
<figure>
<img src="image3.jpg">
</figure>
<figure>
<img src="image4.jpg">
</figure>
</div>
</body>
</html>以上HTML+CSS+JavaScript代碼實現了一款簡單的滑動切換圖片功能，并且提供了“上一張”和“下一張”按鈕，用戶可以自由選擇需要查看的圖片。其中，每個圖片都是一個 figure 元素，以此實現圖片之間的切換，使用了 jQuery 庫，使 JavaScript 的代碼更加簡潔易懂。
上一篇ionic和java混合
下一篇java 定義接口和類