我正在尝试编写一个代码,用于在页面上选择和显示ticker bxslider的li元素。当您使用自动收报机bxslider时,图像将从屏幕的一侧返回到另一侧。我想要一个滑块的随机图像,我点击它在屏幕上显示。 这里的股票代码是bxslider代码
<div class="row sliderticker">
<ul id="bxsliderID" class="bxslider">
<li class="class1"></li>
<li class="class2"></li>
<li class="class3"></li>
<li class="class4"></li>
<li class="class5"></li>
<li class="class6"></li>
<li class="class7"></li>
<li class="class8"></li>
</ul>
</div>
<div class="row changeable">
<li class="changeableitem"></li>
</div>
我将图像作为背景图像放到每个类中。可更改的div是显示我单击的图像的字段。 这里的脚本代码
<script type="text/javascript">
$('.bxslider').bxSlider({
minSlides: 7,
maxSlides: 8,
slideWidth: 1200,
slideMargin: 10,
ticker: true,
speed: 30000
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$( ".bxslider li" ).click(function() {
var className = $(this).attr('class');
$('li.changeableitem').addClass(className);
$(this).siblings().removeClass(className);
});
$( "li.changeableitem" ).click(function() {
$('li.changeableitem').hide();
});
});
</script>
当我使用这些代码时,我可以显示我在可变div上单击的图像。但是,如果我点击了class3 li,它会显示它然后如果我点击class1项目我看不到它。所以如果我选择classX li,我就不能在xth项之前选择li项。我只能展示一次li图像。如果我第二次点击它,它不起作用。你可以帮帮我吗?非常感谢你。
答案 0 :(得分:0)
我认为问题是由于
$(this).siblings().removeClass(className);
在你的第一个.click()函数中行。