Question

我正在尝试使用jquery创建内容滑块。

默认情况下，滑块应显示第一个内容
点击“下一步”点击我想显示下一个内容（位于我的div（类名：sp）内），该内容应显示从右向左滑动
在“上一次”点击中，我想显示之前显示从右到左滑动的内容

我已经开发了以下代码，但它根本不起作用。

你能告诉我错误在哪里吗？

您也可以在此处查看我的代码：http://jsfiddle.net/zLGQJ/1/

HTML

<div id="button-previous"><a>prev</a></div><div id="button-next"><a>next</a></div>

<div class="featured_Content">

<div class="sp">
  <div><h2>Demo Title 1</h2></div>
 <div style="float:right;"><img src="image.jpg" width="250" height="150" /></div>
  <div style="float:right;">My text</div>
  <div style="clear:both;"></div> 
</div>

<div class="sp">
  <div><h2>Demo Title 1</h2></div>
 <div style="float:right;"><img src="image.jpg" width="250" height="150" /></div>
  <div style="float:right;">My text</div>
  <div style="clear:both;"></div> 
</div>

<div class="sp">
  <div><h2>Demo Title 1</h2></div>
 <div style="float:right;"><img src="image.jpg" width="250" height="150" /></div>
  <div style="float:right;">My text</div>
  <div style="clear:both;"></div> 
</div>

</div>

CSS：

.featured_Content{
  width:500px;
  height:200px; 
  position:relative;

 } 
.sp {width:500px; height:200px; position:absolute;}

Jquery的：

 $(document).ready(function(){
 $('.sp').first().addClass('active');
 $('.sp').hide();    
 $('.active').show();


 $('#button-next').click(function(){

   $('.active').removeClass('active').addClass('oldActive');    

    if ( $('.oldActive').is(':last-child')) {
    $('.sp').first().addClass('active');
    }
    else{
    $('.oldActive').next().addClass('active');
    }

    $('.oldActive').removeClass('oldActive');
    $('.sp').fadeOut();
    $('.active').show("slide", { direction: "left" }, 1000);


});

$('#button-previous').click(function(){
$('.active').removeClass('active').addClass('oldActive');   

   if ( $('.oldActive').is(':first-child')) {

        $('.sp').last().addClass('active');

    }
       else{
 $('.oldActive').prev().addClass('active');
       }
 $('.oldActive').removeClass('oldActive');
 $('.sp').fadeOut();
 $('.active').show("slide", { direction: "left" }, 1000);
 });


});

Answer 1

$('#button-previous').click(function () {
    $('.active').removeClass('active').addClass('oldActive');

    if ($('.oldActive').is(':first-child')) {

        $('.sp').last().addClass('active');

    } else {
        $('.oldActive').prev().addClass('active');
    }
    $('.oldActive').removeClass('oldActive');
    $('.sp').fadeOut();
    $('.active').show("slide", {
        direction: "right"
    }, 1000);
});

$('.active').show("slide", {
        direction: "left"
    }, 1000);

是问题所在。

Fiddle

Jquery内容滑块不起作用

1 个答案: