Справка по плагину jQuery Cycle - PullRequest
Новая
       3

Справка по плагину jQuery Cycle

2 голосов
/ 17 августа 2011

Я пытаюсь создать скользящий ротатор с плагином jQuery Cycle, но у меня возникают некоторые проблемы с пользовательским дисплеем, который мне нужен ... В основном, у меня есть слайды, а сверху каждого слайда есть текстовое поле с текстом.Я просто хочу, чтобы слайды скользили, но я хочу, чтобы текст постепенно исчезал, а затем появлялся при появлении нового слайда.

Вот мой HTML: 

<div id="home-slider">
     <div class="slide">
          <img src="image.jpg" width="200" height="200" />
          <div class="text-box">
               <p>Some text here</p>
          </div>
     </div>
     <div class="slide">
          <img src="image.jpg" width="200" height="200" />
          <div class="textblock">
               <p>Some text here</p>
          </div>
     </div>
</div>

Вот JS: 

function onBefore() {
    jQuery("#home-slider .slide .textblock").hide();    
}
function onAfter() { 
    jQuery("#home-slider .slide .textblock").fadeIn('fast');
}
jQuery("#home-slider").cycle({
        speed:  500, 
        timeout: 3000,
    after:   onAfter,
    before: onBefore

});

Таким образом, слайды работают нормально, но текст скользит вместе с ним, когда я хочу, чтобы они просто постепенно исчезали.

Есть идеи?

Ответы [ 3 ]

2 голосов
/ 17 августа 2011

Для скольжения вы должны установить свойство fx в 'scrollHorz или scorllVert.Посмотрите на это рабочее демо.Также у вас есть некоторые опечатки в именах ваших классов.

Демо

1 голос
/ 17 августа 2011

Вы пропускаете "#" в ваших вызовах jquery и вызываемом им текстовом поле в одном разделе вашего html: 

function onBefore() {    
  jQuery("#home-slider .slide .text-box","#home-slider .slide .textblock").hide(); 
}
function onAfter(curr, next, opts) {     
  jQuery("#home-slider .slide .text-box","#home-slider .slide .textblock").fadeIn('fast');    
  jQuery("#home-slider .slide").css("zIndex","");
}
0 голосов
/ 17 августа 2011

Я полагаю, что происходит то, что div слайда уже скрыт, поэтому прежде не имеет никакого эффекта, как это показано позже.

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

Другим вариантом является создание div поверх текста, чтобы скрыть его, а затем скрыть текст ниже и удалить div и исчезнуть.

Третий вариант - выбрать только изображения в циклической функции. jQuery ("# ​​home-slider img"). цикл или, если это не сработает, поместите их в отдельный div для циклического перехода.

...