尝试使.next()以相反的方式工作,所以它会转到幻灯片中的前一个图像而不是下一个,但是,当我按下按钮时,它会变成空白(什么也没有出现)。
<div id="slider">
<img src="slide1.png" class="sliderImage" />
<img src="slide2.png" class="sliderImage" />
<img src="slide3.png" class="sliderImage" />
</div>
<a href="javascript:void(0)"><div id="relative"><i class="fa fa-chevron-left" id="sliderArrowLeft"></i></div></a>
<a href="javascript:void(0)"><div id="relative"><i class="fa fa-chevron-right" id="sliderArrowRight"></i></div></a>
脚本:
$('#slider img:gt(0)').hide();
setInterval(function(){
$('#slider :first-child').hide()
.next('img').delay(1).fadeIn()
.end().appendTo('#slider');},
30000);
$("#sliderArrowRight").click(function() {
$('#slider :first-child').hide()
.next('img').delay(1).fadeIn()
.end().appendTo('#slider');
});
$("#sliderArrowLeft").click(function() {
$('#slider :first-child').hide()
.prev('img').delay(1).fadeIn()
.end().appendTo('#slider');
});
任何帮助都很感激。
2条答案
按热度按时间n6lpvg4x1#
您的问题是prev('img ')不存在于滑块的第一个子项。这样修改你的函数:
2guxujil2#
试试这个#sliderarrowleft