JQuery.Cycle Plugin Слайд в первом изображении - PullRequest
Новая
       6

JQuery.Cycle Plugin Слайд в первом изображении

0 голосов
/ 09 марта 2011

Я пытаюсь заставить плагин JQuery Cycle применить эффект слайда к первому слайду. Есть пример, который показывает, как его постепенно увеличивать, но я использую эффект вслепую, так что было бы намного лучше, если бы я вставил изображение справа налево при загрузке.

Есть идеи?

Спасибо,

SebastianX

Ответы [ 2 ]

1 голос
/ 12 марта 2011

Спасибо, Лукаш.Ваш ответ дал мне идею.Вот как я это сделал.

CSS - перемещен первый слайд из «области анимации» 

.slideshow {
   position: relative;
   left: 550px;
   overflow: hidden;}

JavaScript jQuery - $ (document) .ready 

$('.slideshow').animate({marginLeft:'-550px'},1000, function(){
    $('.slideshow').cycle({
        fx: 'blindX',
        timeout: 1000
    });
});
1 голос
/ 10 марта 2011

Вы можете легко сделать это самостоятельно. Сделайте все слайды, кроме первого, изначально скрытыми. Затем разместите первый слайд таким образом, чтобы он находился справа от окна просмотра слайд-шоу (содержащего элемент). Затем, при загрузке, вызовите animate для него, используя свойство left.

HTML 

<div id="slides">
  <img>
  <img>
  ...
</div>

CSS 

#slides {
  position: relative;
  width: 100px;
  height: 100px;
  overflow: hidden;
}

#slides > img {
   position: absolute;
   top: 0;
   left: 0;
   visibility: hidden;
}
#slides > img:first-child {
  left: 100px;
  visibility: visible;
}

JavaScript при загрузке 

$('#slides > img:first').animate(
    { left: 0 },
    500,
    function() { $('#slides > img').css('visibility', 'visible');  
});
...