2

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

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

1# -> #2 -> #3 -> 空

而不是空的，它必须返回到＃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>
4

2 回答 2

1

在下一个块中：

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

在上一个块

 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;
                } 
        });
    });
于 2013-09-05T05:15:22.920 回答
0

早上好

我得到了这个例子完美地工作

只需查看此代码即可：http://jsfiddle.net/5HHew/6/

这应该是您的下一个和上一个代码

$("#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();

    });     });

还有，你把你的活动到处乱搞

祝你好运！

于 2013-09-05T05:42:06.677 回答