Question

我为幻灯片编写了一个JS（jQuery）脚本。它非常简单，只有一个下一个/上一个按钮。现在：

问题是幻灯片不是无缝的。当我点击下一个/上一个按钮时，它也会显示空白图像。所以，如果我有三张图像并开始从图像＃1导航，就会发生这样的事情：

1＃ - ＆gt; ＃2 - ＆gt; ＃3 - ＆gt;空

而不是空，它必须回到＃1图像，但事实并非如此。（而不是img我已经把p）

这是jsFiddle代码：

http://jsfiddle.net/mostafatalebi/SG3Rq/

这是JS代码：

$(document).ready(function() {                                          

    var x = $('.slide_top').children('p');

    x.hide();

    var i = 0;

    x.eq(i).show();

    $("#slide_next").click(function(event){ 

            event.stopPropagation();    
            event.preventDefault(); 
            x.eq(i).hide();     
            x.eq(i).next().show();  
            i = i + 1;  
            if(i === x.length)
            {
                i  = 0; 
            }

    });         
    $("#slide_prev").click(function(event){                             
            event.preventDefault();
            event.stopPropagation();
            x.eq(i).hide(); 

            x.eq(i).prev().show();      
            i = i - 1;
            if(i == x.length)
            {
                i  = 0; 
            }

    });
});

以下是HTML代码：

<div class='slide_top'>
    <p>This is the first Paragraph</p>
    <p>This is the second Paragraph</p>
    <p>This is the third Paragraph</p>
</div>
<ul id='slide_top_click'>
    <li><a id='slide_prev' href='#' class='slide-next-icon'>Next</a></li>
    <li><a id='slide_next' href='#'  class='slide-prev-icon'>Previous</a></li>
</ul>

Answer 1

在NEXT Block中：

  if(i == x.length){
        i  = 0; 
        x.eq(i).show();
  }

在PREV BLOCK中

 if(i === 0){
      i=x.length-1;
      x.eq(i).show();
 }else{
     i = i - 1;
 }

在if块中更新此代码。我看到一个错误，你在下一个按钮上调用prev方法，在prev按钮上调用下一个方法。不知道这是你的错误还是别的什么。

最终守则：

   $(document).ready(function(){                                            
        var x = $('.slide_top').children('p');
        x.hide();
        var i = 0;
        x.eq(i).show();
        $("#slide_next").click(function(event){ 
                event.stopPropagation();    
                event.preventDefault(); 
                x.eq(i).hide();     
                x.eq(i).next().show();  
                i = i + 1;  
                if(i === x.length){
                    i  = 0;  
                    x.eq(i).show();   
                }
        });         
        $("#slide_prev").click(function(event){                             
                event.preventDefault();
                event.stopPropagation();
                alert(i);
                x.eq(i).hide(); 
                x.eq(i).prev().show();      
                if(i === 0){
                     i=x.length-1;
                     x.eq(i).show();
                }else{
                    i = i - 1;
                } 
        });
    });

Answer 2

早上好

我让这个例子正常工作

请查看以下代码：http://jsfiddle.net/5HHew/6/

这应该是您的next和prev

的代码

$("#slide_next").click(function(){ 

event.stopPropagation();    
            event.preventDefault(); 
             x.eq(i).hide();
             i = i + 1;      


            if(i === x.length)
            {
                i  = 0; 

            }   

    x.eq(i).show();
    });         
    $("#slide_prev").click(function(event){                             
            event.preventDefault();
            event.stopPropagation();
             x.eq(i).hide();
             i = i - 1;      


            if(i === -1)
            {
                i  = x.length - 1; 

            }             
     x.eq(i).show();

    });     });

另外，你把事件围绕着

古德勒克！

jQuery幻灯片代码不能很好地工作

2 个答案: