https://jsfiddle.net/R0bert0M3/uc8kntes
<html>
<link href="./style.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="divs">
<div class="cls1">
<div>Yes 1 </div>
<div>Element 1 </div>
</div>
<div class="cls2">
<div>Yes 2 </div>
<div>Element 2 </div>
</div>
<div class="cls3">
<div>Yes 3 </div>
<div>Element 3 </div>
</div>
</div>
<a id="next">next</a>
<a id="prev">prev</a>
<br>
<br>
<br>
<br>
<li class="nav-dots">
<label class="nav-dot" id="img-dot-1" onclick=""></label>
<label class="nav-dot" id="img-dot-2"></label>
<label class="nav-dot" id="img-dot-3"></label>
</li>
<script>
$(document).ready(function(){
$(".divs>div").each(function(e) {
if (e != 0)
$(this).hide();
});
$("#next").click(function(){
const visibleDiv = $(".divs>div:visible");
const nextDiv = visibleDiv.next();
if(nextDiv.length > 0) {
visibleDiv.hide();
nextDiv.show();
}
});
$("#prev").click(function(){
const visibleDiv = $(".divs>div:visible");
const prevDiv = visibleDiv.prev();
if(prevDiv.length > 0) {
visibleDiv.hide();
prevDiv.show();
}
});
});
</script>
</html>
當我單擊下一步時，我希望它與點匹配，當我單擊點時，我希望我的幻燈片也發生變化。CSS 在 jsfiddle 鏈接中。我嘗試使用 OnClick，但我不知道該怎么做。有沒有辦法讓它作業。
uj5u.com熱心網友回復：
在這個小提琴中找到一個作業示例：https ://jsfiddle.net/mg0u85sq/
為了讓點與顯示的當前幻燈片相匹配，我使用了一個類.nav-dot--active來提供樣式。這最初設定在第一個點上，然后設定在selectSlide函式內部。
為了使點能夠選擇幻燈片，我們可以使用button元素和aria-label屬性來提供更好的可訪問性支持。
您可以將點擊事件與以下內容掛鉤：
$(".nav-dot").each((index) => {
$(this).click(() => {
selectSlide(index);
});
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/476353.html
標籤：javascript html jQuery css
上一篇：重置每個表的計數
下一篇：查找HTML表頭索引