0

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

  1. 默认情况下，滑块应显示第一个内容

  2. 在“下一个”点击我想显示下一个内容（在我的 div（类名：sp）内）应该显示从右到左滑动和

  3. 在“上一个”点击我想显示以前的内容应该显示从右到左滑动

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

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

你也可以在这里查看我的代码：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;}

查询：

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


});
4

1 回答 1

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

是问题所在。

小提琴

于 2013-09-07T04:58:31.960 回答