jQuery слайд-шоу и проблема поворота изображения - PullRequest
Новая
       2

jQuery слайд-шоу и проблема поворота изображения

1 голос
/ 31 января 2012

Я написал код для показа изображений по одному из моего div.Мой код работает, но проблема в том, что когда достигается последнее изображение, то следующее изображение снова будет первым.В моем случае слайд-шоу останавливается на последнем изображении.Предположим, у моего div есть четыре изображения.Когда я проверяю это, то по одному изображению показывается за один раз, но когда последние изображения достигнуты, тогда показ слайдов останавливается.Я имею в виду следующее изображение не показывает.Где первое изображение должно отображаться как следующее.

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

URL моей реализации http://jsfiddle.net/tridip/jwxzv/

 $(document).ready(function () {
    slideShow();
});

function slideShow() {
    $('#gallery img').css({ opacity: 0.0 });
    $('#gallery img:first').css({ opacity: 1.0 });
    setInterval('gallery()', 2000);
}

function gallery() {
    var current = ($('#gallery .show') ? $('#gallery .show') : $('#gallery img').first());
    var next = (current.next().length > 0 ? current.next() : $('#gallery img').first());
    next.css({ opacity: 0.0 })
    .addClass('show')
    .animate({ opacity: 1.0 }, 1000);
    current.animate({ opacity: 0.0 }, 1000).removeClass('show');
}

<style type="text/css">

.clear {
clear:both
}

#gallery {
    position:relative;
    height:360px
}
#gallery img {
    float:left;
    position:absolute;
}

#gallery img {
    border:none;
}

#gallery show {
    z-index:500
}

 </style>

<div id="gallery">
<img src="images/flowing-rock.jpg" alt="Flowing Rock" width="580" height="360" title="" alt="" class="show"  />
<img src="images/grass-blades.jpg" alt="Grass Blades" width="580" height="360" title="" alt="" />
<img src="images/ladybug.jpg" alt="Ladybug" width="580" height="360" title="" alt="" />
<img src="images/lightning.jpg" alt="Lightning" width="580" height="360" title="" alt="" />
</div>

Ответы [ 2 ]

1 голос
/ 31 января 2012

Вот исправленный код http://jsfiddle.net/jwxzv/3/

1 голос
/ 31 января 2012

Проблема найдена.Эта строка кода .... 

var next = ((current.next().length) ? ...

должна быть 

var next = ((current.next().length > 0) ? ...

Рабочий пример: http://jsfiddle.net/jwxzv/4/

Кроме того, ваш JS и CSSможно сильно упростить, не беспокоясь о классе show.Это также решит вашу проблему выше.

Рабочий образец: http://jsfiddle.net/jwxzv/11/

CSS 

.clear {
    clear:both
}
#gallery {
    position:relative;
    height:360px
}
#gallery img {
    float:left;
    position:absolute;
    display:none;
    border:none;    
    z-index:500
}

JS 

$(document).ready(function () {
    slideShow();
});

function slideShow() {
    $('#gallery img').hide();
    $('#gallery img:first').fadeIn('fast')
    setInterval('gallery()', 2000);
}

function gallery() {
    var current = $('#gallery img:visible');
    var next = current.next('#gallery img');
    if (next.length==0) next = $('#gallery img:first')
    current.fadeOut('medium');
    next.fadeIn('medium');
}
...