Слайдер изображений jquery: добраться до последнего изображения, необходимо нажать «Далее», чтобы вернуться к первому - PullRequest
Новая
       20

Слайдер изображений jquery: добраться до последнего изображения, необходимо нажать «Далее», чтобы вернуться к первому

0 голосов
/ 21 января 2012

Я использовал слайдер NIVO и несколько других. Редактировать это не проблема. На этот раз я пытаюсь создать свой собственный простой слайдер. Я могу сделать так, чтобы изображения постепенно переходили друг в друга, но после окончательного изображения - они исчезали в пустоте, и мне нужно выяснить, как сделать так, чтобы они просто сбрасывались на первое изображение. В настоящее время я использую только «следующий», и я уверен, что когда я это сделаю, я смогу найти кнопку «предыдущий».

Я попробовал заявление if, но не могу туда добраться. Я свел это к минимуму, чтобы попытаться сделать вещи легко читаемыми. Цени любую помощь.

Вот весь мой код:

CSS: 

p {margin: 0; padding: 0}

.slides{
width: 500px; height: 200px;
position: relative;
margin: 20px auto;
overflow: hidden;
}

.img1, .img2, .img3 {
width: 500px; height: 200px;
display: block;
position: relative;
float: left;
}

.img1 {background-image: url(img1.png)}
.img2 {background-image: url(img2.png)}
.img3 {background-image: url(img3.png)}

.title {
width: 480px; height: 30px;
color: white; font-size: 15px;
padding: 10px;
position: absolute; top: 0;
background: url(tbg.png) 0 0 repeat;
}

.description {
width: 480px; height: 30px;
color: white; font-size: 15px;
padding: 10px;
position: absolute; bottom: 0;
background: url(tbg.png) 0 0 repeat;
}

.prev, .next {
width: 50px; height: 50px;
position: absolute; z-index: 10;
top: 50px; display: block;
background: url(prevnext.png) 0 0 no-repeat;
border: none; cursor: pointer;
}

.active{top: 0; left: 0}


.prev {left: 20px}
.next {right: 20px; background-position: -50px 0}

#img:not(.active) {display:none}

JQuery: 

$(function() {
$('#next').click(function(event) {
    $('#slides .active').fadeOut('slow').removeClass('active')
    .next('#img').fadeIn('slow').addClass('active');

});
});

HTML: 

<div id="slides" class="slides">
    <div id="img" class="img1 active">
        <div class="title"><p>This Is My Title</p></div>
        <div class="description"><p>This Is My Description</p></div>
    </div>
    <div id="img" class="img2">
        <div class="title"><p>This Is My Title</p></div>
        <div class="description"><p>This Is My Description</p></div>
    </div>
    <div id="img" class="img3">
        <div class="title"><p>This Is My Title</p></div>
        <div class="description"><p>This Is My Description</p></div>
    </div>
    <a id="prev" class="prev"></a>
    <a id="next" class="next"></a>
</div>

1 Ответ

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

Попробуйте это: 

$('#next').click(function(event) {
    var active = $('#slides .active');
    active.fadeOut('slow').removeClass('active');
    if(active.next('#img').length != 0)
        active.next('#img').fadeIn('slow').addClass('active');
    else
        $('#slides #img:first').fadeIn('slow').addClass('active');
});
...