gpt4 book ai didi

javascript - 如何在单击按钮时显示 Bx-slider

转载 作者:太空宇宙 更新时间:2023-11-04 10:53:13 26 4
gpt4 key购买 nike

我想在点击按钮时显示 bx-slider。我需要用三个按钮连续显示三个 slider 。当有人单击任何按钮时,一个 slider 将激活,而其他 slider 将被隐藏。但是,当我过去常常单击按钮时,它不会显示图像,只有 slider 打开并且箭头可见。这是我的代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.css">
<style>
.slider{
display:none;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.js"></script>
<script>
$(document).ready(function(){
$('.bxslider').bxSlider();

$('.open').click(function(){
$('.slider').show();
$('.bxslider').bxSlider();
});

});
</script>
</head>
<body>
<a href="javascript:;" class="open">Open Slider</a>
<div class="slider">
<ul class="bxslider">
<li><img src="http://landscapelook.com/wp-content/uploads/2015/10/beauty_of_nature_images_gallery.jpg" /></li>
<li><img src="http://stuffpoint.com/nature/image/277236-nature-nature-beauty-scenery-bridge.jpg" /></li>
<li><img src="http://www.images-gededah.in/wp-content/uploads/Beauty-of-Nature20.jpg" /></li>
</ul>
</div>
</body>
</html>

jsfiddle 链接 https://jsfiddle.net/h8teec45/

最佳答案

您应该删除隐藏 slider 的 CSS 行并使用 jQuery 隐藏 slider (参见 $('.slider').hide();):

$(document).ready(function(){
$('.bxslider').bxSlider();
$('.slider').hide();
$('.open').click(function(){
$('.slider').show();
$('.bxslider').bxSlider();
});

});

它应该工作得很好。

Fiddle .

关于javascript - 如何在单击按钮时显示 Bx-slider,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34852650/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com