SLIDER DEMO

var imgN = $('#slider img').length;
var galW = $('#gallery').outerWidth(true);

$('#slider, #info').width(galW*imgN);

$('#nav li').click(function(){
  var ind = $(this).index();
  $('#slider').stop(1).animate({left: '-'+galW*ind },1500);
  $('#info').stop(1).delay(250).animate({left: '-'+galW*ind },1800);
  $(this).addClass('active').siblings('li').removeClass('active');
});

HTML：

  <div id="gallery">
    <div id="slider">
      <img src="http://dummyimage.com/700x350/9ae/fff&text=1">
      <img src="http://dummyimage.com/700x350/e44/fff&text=2">
      <img src="http://dummyimage.com/700x350/878/fff&text=3">
    </div>


  <div id="nav">
    <ul>
      <li class="active">Go to slide 1</li>
      <li>Go to slide 2</li>
      <li>Go to slide 3</li>
    </ul>
  </div>

    <div id="info">
      <div class="info"><h3>Info panel 1</h3></div>
      <div class="info"><h3>Info panel 2</h3></div>
      <div class="info"><h3>Info panel 3</h3></div>

    </div>
  </div>

CSS：

  #gallery{
    width:700px;
    height:490px;
    position:relative;
    margin:20px auto;
    background:#eee;
    overflow:hidden;
  }
  #slider{
    position:absolute;
  }
  #slider img{
    position:relative;
    float:left;
  }
  #nav{
    width:700px;
    z-index:2;
    position:absolute;
    top:305px;
    text-align:center;
  }
  #nav li{
    cursor:pointer;
    display:inline;
    background:#ddd;
    padding:10px;
    margin:1px;
    border-bottom:1px solid #999;
    -moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 6px 6px 0px 0px;
border-radius: 6px 6px 0px 0px; 
  }
  #nav li.active{
    background:#eee;
    border-bottom:1px solid #eee;
  }

  #info{
    position:absolute;
    top:350px;
    height:140px;
    width:700px;
    background:#eee;
    border-top:1px solid #999;

  }
  div.info{
    position:relative;
    float:left;
    width:650px;
    padding:10px 25px;
    height:120px;
  }

Answer 2

Nivo滑块是一个可能的插件，为您执行此操作：http://nivo.dev7studios.com/

Answer 3

看一下jQuery UI库。有一种称为slide的效果可以提供您正在寻找的功能。

Answer 4

就我个人而言，我会用一个大的div来包含它里面的所有内容，向左浮动。然后我通过使用jQuery在旧浏览器中为其左侧属性设置动画，或者在普通浏览器中使用CSS转换/转换来设置外部div的动画。

更具体地说，HTML对于滑块看起来像这样：

<div id="container">
    <div id="sliding_bit">
        <img src="" alt="" />
        <img src="" alt="" />
        <img src="" alt="" />
    </div>
</div>

我会让外部容器说960px宽和300px高，并设置溢出隐藏。我将sliding_bit的所有内部位的宽度加在一起（例如3x宽度的图像）。我会浮动滑块中剩下的图像。

然后我会使用过渡/变换或动画来设置sliding_bit div的动画。

例如，请查看http://focalstrategy.com/blog/2010/08/howto/an-animated-image-slider-that-works-in-internet-explorer/

滑动水平jquery

4 个答案:

SLIDER DEMO