Скользящий горизонтальный jquery - PullRequest
Новая
       0

Скользящий горизонтальный jquery

0 голосов
/ 05 декабря 2011

То, что у меня есть Это центрированный элемент на моей веб-странице, содержащий изображение, которое я хочу скользить справа налево, чтобы пользователь мог видеть другое изображение ... эффект, которого я хочу добиться, это это

надеюсь, вы поможете мне узнать, как это сделать

спасибо

Ответы [ 4 ]

2 голосов
/ 05 декабря 2011

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;
  }
0 голосов
/ 05 декабря 2011

Посмотрите на библиотеку пользовательского интерфейса jQuery.Существует эффект под названием slide , который может обеспечить нужную вам функциональность.

0 голосов
/ 05 декабря 2011

Лично я бы сделал большой div со всем содержимым внутри, плавающим влево.Затем я бы анимировал внешний div с помощью jQuery для анимации свойства left в нем в старых браузерах или с помощью CSS-преобразований / переходов в обычных браузерах.

В частности, HTML-код будет выглядеть так дляползунок: 

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

Я бы сделал внешний контейнер, скажем, шириной 960 пикселей и высотой 300 пикселей и скрыл бы переполнение.Я бы сделал slide_bit шириной всех внутренних битов, добавленных вместе (например, 3x ширина изображений).Я бы плавал изображения, оставленные в ползунке.

Я бы тогда анимировал div slide_bit, используя переходы / преобразования или анимацию.

Например, посмотрите на http://focalstrategy.com/blog/2010/08/howto/an-animated-image-slider-that-works-in-internet-explorer/

0 голосов
/ 05 декабря 2011

Слайдер Nivo - это один из возможных плагинов, который сделает это за вас: http://nivo.dev7studios.com/

...