我有一个自定义的滑动滑块库,当您单击图库图像时会激活该库。但前一个和下一个箭头不起作用。当您选择它们时,图库将恢复为原始图像。我试过用
z-index: 100;
但它似乎无法运作。我是JavaScript的新手,所以我认为它与整个div可点击的事实有关。
这是JS Fiddle似乎有箭头,但不是我在下面插入的代码。
$(function() {
$(".div2").hide();
$(".div1").on("click", function() {
$(".div2").hide();
$(".div1").show();
$(this).hide();
$(this).next().show();
});
$(".div2").on("click", function() {
$(this).hide();
$(this).prev().show();
});
});
$('.carousel-one').slick({
arrows: true,
infinite: true,
speed: 500,
slidesToShow: 1,
centerMode: true,
variableWidth: true,
autoplay: true,
autoplaySpeed: 2000
});

.slick-next {
right: 20px;
/* background-color: black; */
z-index: 100;
}
.slick-prev {
left: 20px;
/* background-color: black; */
z-index: 100;
}

<link href="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<div class="div1"><img src="http://lorempixel.com/600/200" alt="Image three"></div>
<div class="div2">
<div class="carousel-one">
<div><img src="http://lorempixel.com/400/200" alt="Image three"></div>
<div><img src="http://lorempixel.com/400/200" alt="Image one"></div>
<div><img src="http://lorempixel.com/300/200" alt="Image two"></div>
<div><img src="http://lorempixel.com/320/200" alt="Image four"></div>
<div><img src="http://lorempixel.com/400/200" alt="Image five"></div>
<div><img src="http://lorempixel.com/200/200" alt="Image seven"></div>
<div><img src="http://lorempixel.com/300/200" alt="Image six"></div>
</div>
</div>
<div class="div1"><img src="http://lorempixel.com/600/200" alt="Image three"></div>
<div class="div2">
<div class="carousel-one">
<div><img src="http://lorempixel.com/400/200" alt="Image three"></div>
<div><img src="http://lorempixel.com/400/200" alt="Image one"></div>
<div><img src="http://lorempixel.com/300/200" alt="Image two"></div>
<div><img src="http://lorempixel.com/320/200" alt="Image four"></div>
<div><img src="http://lorempixel.com/400/200" alt="Image five"></div>
<div><img src="http://lorempixel.com/200/200" alt="Image seven"></div>
<div><img src="http://lorempixel.com/300/200" alt="Image six"></div>
</div>
</div>
<div class="div1"><img src="http://lorempixel.com/600/200" alt="Image three"></div>
<div class="div2">
<div class="carousel-one">
<div><img src="http://lorempixel.com/400/200" alt="Image three"></div>
<div><img src="http://lorempixel.com/400/200" alt="Image one"></div>
<div><img src="http://lorempixel.com/300/200" alt="Image two"></div>
<div><img src="http://lorempixel.com/320/200" alt="Image four"></div>
<div><img src="http://lorempixel.com/400/200" alt="Image five"></div>
<div><img src="http://lorempixel.com/200/200" alt="Image seven"></div>
<div><img src="http://lorempixel.com/300/200" alt="Image six"></div>
</div>
</div>
&#13;
答案 0 :(得分:1)
按钮点击事件冒泡, $(".div2").on("click", function(e) {
console.log("div2 click event:", event); // js event obj
console.log("div2 click event:", e); // jQuery event object
if (event.target.nodeName == "BUTTON") return; // exit if button
$(this).hide();
$(this).prev().show();
});
点击处理程序捕获它。处理它的一种方法是,如果单击的元素是一个按钮,则退出该函数。
这是一种在javascript中执行此操作的方法。我还添加了一些console.log,让你可以在你的控制台中查看并玩游戏。去尝试在jquery中使用,使用类选择器等
do {
System.out.println("Enter number: ");
Scanner scanintro = new Scanner(System.in);
intro = scanintro.next();
} while (!intro.equals("1") && !intro.equals("2"));