зацикливание изображений с помощью jquery - PullRequest
Новая
       23

зацикливание изображений с помощью jquery

0 голосов
/ 07 августа 2011

У меня есть простой список HTML: 

<ul>
    <li>
        <div class="slideshow1">
            <img class="bradius5 slide1" src="<?php base_url();?> img/ristorante1.jpg" height="150" width="170"/>
            <img class="bradius5 slide1" src="<?php base_url();?> img/ristorante1.jpg" height="150" width="170"/>
            <img class="bradius5 slide1" src="<?php base_url();?> img/ristorante1.jpg" height="150" width="170"/>
            <img class="bradius5 slide1" src="<?php base_url();?> img/ristorante1.jpg" height="150" width="170"/>
        </div>
    </li>

    <li>
        <div class="slideshow2">
            <img class="bradius5 slide2" src="<?php base_url();?> img/ristorante1.jpg" height="150" width="170"/>
            <img class="bradius5 slide2" src="<?php base_url();?> img/ristorante1.jpg" height="150" width="170"/>
            <img class="bradius5 slide2" src="<?php base_url();?> img/ristorante1.jpg" height="150" width="170"/>
            <img class="bradius5 slide2" src="<?php base_url();?> img/ristorante1.jpg" height="150" width="170"/>
        </div>
    </li>
</ul>

Я попытался перебрать изображения, выполнив это: 

$('.slide1,.slide2').hide();

$.each($('.slide1'), function() {
    $(this).fadeIn().delay(1900).fadeOut();
});

$.each($('.slide2'),function() {
    $(this).fadeIn().delay(1900).fadeOut();
});

Тем не менее, он не циклически отображает изображение за изображением; он циклически повторяет несколько изображений.

Я хочу просмотреть все изображения в первом li, а затем просмотреть все изображения во втором li.

Ответы [ 2 ]

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

потому что вы задерживаете их всех сразу. Первым параметром в каждом из них является текущий индекс.

Попробуйте что-то вроде этого: 

$.each($('.slide1'),function(i){
     $(this).fadeIn().delay(i*200).fadeOut();
});

это будет задерживать каждые 200 мс от последнего

Обновление

Вы действительно должны использовать плагин, подобный предложенному @ShankarSangoli, и просто заставить его работать с макетом, но что-то подобное должно работать и для вас. (это не было проверено, но только для начала) 

var _slide1 = $('.slide1');
var _slide2 = $('.slide2');
var_count1 = 0;
var _count2 = 0;

setInterval(function(){
    _slide1[_count1].fadeOut(300);
    _slide2[_count2].fadeOut(300);

    _count1 = _count1 >= _slide1.length ? 0 : _count1+=1;
    _count2 = _count2 >= _slide2.length ? 0 : _count2+=1;

    _slide1[_count1].fadeIn(300);
    _slide2[_count2].fadeIn(300);
}, 2000);
1 голос
/ 07 августа 2011

Почему вы не используете плагин цикла jquery? Он предлагает множество функций и очень прост в использовании

http://jquery.malsup.com/cycle/

...