HTML+輪播圖下標跳轉代碼 如果您正在構建一個網站，并且需要為您的圖片設置一個漂亮的輪播圖，并且您希望自動和手動跳轉，那么這篇文章將介紹如何使用HTML以及CSS和Javascript來創(chuàng)建一個基本的輪播圖，并且為其添加下標跳轉功能。下面是示例代碼： html：

<div class="slider">
<div class="slide"><img src="img/slider1.jpg"></div>
<div class="slide"><img src="img/slider2.jpg"></div>
<div class="slide"><img src="img/slider3.jpg"></div>
<div class="slide"><img src="img/slider4.jpg"></div>
<div class="slide"><img src="img/slider5.jpg"></div>
<div class="controls">
<ul>
<li data-slide="0" class="active"></li>
<li data-slide="1"></li>
<li data-slide="2"></li>
<li data-slide="3"></li>
<li data-slide="4"></li>
</ul>
</div>
</div>

這段HTML代碼中，我們創(chuàng)建了一個名為“slider”的div元素，并在其中添加了五個名為“slide”的子元素，分別包含了五張圖片。 注意，我們還添加了一個名為“controls”的新元素，其中包含了一個ul（無序列表），這個列表包含了五個li（列表項）元素，用于表示輪播圖下方的圓形跳轉按鈕。 接下來，讓我們看看一些CSS代碼，用于將輪播圖設置成橫向滾動的：

.slider {
position: relative;
overflow: hidden;
width: 100%;
}
.slider .slide {
float: left;
position: relative;
width: 100%;
}
.slider .controls {
position: absolute;
bottom: 20px;
left: 0;
right: 0;
margin: 0 auto;
text-align: center;
}
.slider .controls ul {
display: inline-block;
padding: 0;
margin: 0;
}
.slider .controls li {
display: inline-block;
height: 10px;
width: 10px;
border-radius: 50%;
background-color: #fff;
margin-right: 10px;
cursor: pointer;
opacity: 0.5;
}
.slider .controls li.active {
background-color: #f00;
opacity: 1;
}

在這段CSS代碼中，我們設置了輪播圖的容器元素以及其滑動元素的樣式，為控件添加樣式，使其看起來像圓形按鈕，并且使用了紅色來標識當前顯示幻燈片的工具。 好的，現(xiàn)在我們開始用JavaScript代碼為圓形按鈕和圖片添加一些交互性。 我們將使用JavaScript事件處理程序將“active”類添加到當前幻燈片的下標按鈕中，并將“active”類從先前處于active狀態(tài)的下標按鈕中刪除。此外，我們還將使用jQuery來創(chuàng)建動畫效果。下面是完整的JS代碼：

var controls = $(".slider .controls li");
var slides = $(".slider .slide");
controls.on("click", function() {
controls.removeClass("active");
$(this).addClass("active");
var index = $(this).index();
var slide = slides.eq(index);
var offset = slide.position().left;
$(".slider .slides").animate({
left: -offset
}, 500);
});
function autoPlay() {
var active = $(".slider .controls li.active");
var next = active.next();
if (next.length === 0) {
next = controls.first();
}
next.trigger("click");
}
setInterval(autoPlay, 5000);

在此代碼中，我們?yōu)榭刂茍A形按鈕添加了單擊事件。當用戶單擊按鈕時，我們使用Index()方法來檢索幻燈片索引，并使用css()方法將滑塊位置設置為正確的位置。還添加了一個名為“autoPlay”的函數(shù)，使用setInterval（）方法自動切換幻燈片。 這就是我們的HTML+輪播圖下標跳轉代碼的文章。現(xiàn)在，您可以將此代碼嵌入到您自己的網站中，并按照您的需要進行自定義。