我有一個(gè)簡(jiǎn)單的圖像滑塊，如下面的小提琴所示，當(dāng)有更多圖像要顯示時(shí)，單擊活動(dòng)圖像即可滑動(dòng)。如何在活動(dòng)圖像的左側(cè)和右側(cè)添加尖括號(hào)，以告知用戶并使用戶能夠在圖像之間進(jìn)行轉(zhuǎn)換？我還想確保當(dāng)沒(méi)有更多幻燈片可以過(guò)渡到左側(cè)或右側(cè)時(shí)，尖括號(hào)不會(huì)顯示。我能夠在圖像上包含箭頭，但無(wú)法讓它們執(zhí)行與單擊下一個(gè)或上一個(gè)圖像時(shí)觸發(fā)幻燈片更改相同的操作。謝謝您的幫助。
1 回答
jeck貓
TA貢獻(xiàn)1909條經(jīng)驗(yàn) 獲得超7個(gè)贊
您好，請(qǐng)嘗試以下更改：
<div id="Arrows">G-Money Send Money
<i id="Prev" onclick="changeSlide('prev');"class=" fa fa-chevron-left fa-3x" aria-hidden="true"></i>
<i id="Next" onclick="changeSlide('next');"class=" fa fa-chevron-right fa-3x" aria-hidden="true"></i>
</div>
</div>
你的 javascript 函數(shù)應(yīng)該是這樣的：
<script>
$(document).ready(function() {
let $slider = $(".sliderG");
let sliderItem = $slider.children(".item.active");
let i = $slider.children(".item");
//let i2 = $slider.children("#prev");
let ind = 0;
$slider
.children(".item")
.each(function() {
$(this).attr("data-index", ind++);
});
i.on("click", function(e) {
const that = $(this);
let dataIndex = that.data("index");
//alert(dataIndex);
$(".item").removeClass("active");
that.addClass("active");
});
});
function changeSlide(n) {
$('#Next').css("display", "block");
$('#Prev').css("display", "block");
let $slider = $(".sliderG");
//console.log(n);
var len = $slider.children(".item").length;
if(n == 'prev'){
//alert(n);
var sliderItem = $slider.children(".item.active").prev();
}
else {
var sliderItem = $slider.children(".item.active").next();
}
let index = sliderItem.data("index");
if(index != undefined) {
//alert(index);
$(".item").removeClass("active");
sliderItem.addClass("active");
if(index == 0) {
$('#Prev').css("display", "none");
}
else if(index == len-1) {
$('#Next').css("display", "none");
}
}
}
</script>
- 1 回答
- 0 關(guān)注
- 119 瀏覽
添加回答
舉報(bào)
0/150
提交
取消