代码之家 › 专栏 › 技术社区 › P. Nick

jQuery幻灯片,转到上一张图片

next jquery javascript

P. Nick · 技术社区 · 8 年前

试图使.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 回复 | 直到 8 年前

smdsgn 8 年前

您的问题是,滑块第一个子项不存在prev('img')。因此,请这样更改您的函数:

$("#sliderArrowLeft").click(function() {
    $('#slider :first-child').hide();
    $('#slider :last-child').delay(1).fadeIn().prependTo('#slider');
});

Rakesh Sojitra 8 年前

试试这个#sliderarrowleft

           $('#slider img:gt(0)').hide();
            setInterval(function () {
                $('#slider :first-child').hide()
                        .next('img').delay(1).fadeIn()
                        .end().appendTo('#slider');
                },30000);

            $("#sliderArrowRight").click(function () {
                $('#slider :last-child').hide();
                $('#slider :first-child').hide()
                        .next('img').delay(1).fadeIn()
                        .end().appendTo('#slider');
            });

            $("#sliderArrowLeft").click(function () {
                $('#slider :first-child').hide();
                $('#slider :last-child').hide()
                        .prev('img').delay(1).fadeIn()
                        .end().prependTo('#slider');
            });

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前