Логика для слайд-шоу JQuery

Question 1

Я хочу реализовать вертикальное слайд-шоу с помощью JQuery. Я использую вертикальный барабан (div), который, в свою очередь, содержит изображения одно за другим, я уменьшаю верхнее положение барабана по размеру изображения каждые 2 секунды, что работает нормально, но когда я дойду до последнего изображения, я не могу реализовать логика запуска барабана с первых изображений. если мое объяснение неясно, я добавляю свой код:

 <script type="text/javascript">
    $(function() {
        setInterval(SlideImage, 2000);
    });

    function SlideImage() {
        $("#imgReel").animate({ "marginTop": "-=300px" }, 1000, function() { });
    }
</script>

<style type="text/css">
    img
    {
        width: 600px;
        height: 300px;
    }
    .imgContainer
    {
        overflow: hidden;
        width: 620px !important;
        height: 300px !important;
    }
    div
    {
        width: 620px;
    }
    .current
    {
        z-index: 0;
    }
    .next
    {
        z-index: 1;
    }
    .imgReel
    {
        width: 620px !important;
    }
    .
</style>

<body>
<div id="imgContainer" class="imgContainer">
    <div id="imgReel" class="imgReel">
        <div class="current">
            <img src="Images/Summerwave.jpg" />
        </div>
        <div>
            <img src="Images/Sunlight_and_the_Wild_Forest_Floor.jpg" />
        </div>
        <div>
            <img src="Images/Sunset.jpg" />
        </div>
        <div>
            <img src="Images/Swimming_with_the_fishys.jpg" />
        </div>
        <div>
            <img src="Images/Tearing_Apart.jpg" />
        </div>
        <div>
            <img src="Images/Teaser.jpg" />
        </div>
        <div>
            <img src="Images/Terra_Nova.jpg" />
        </div>
    </div>
</div>

Любая помощь была бы высоко оценена

jquery

0

Ulhas Tuscano 9 Фев 2011 в 13:42

Answer

Вы можете использовать другой подход: позвольте #imgReel исправить и изменить размер элементов:

Перемещение imgReel вниз приведет к тому, что если вы сделаете slideUp элементу вверху, добавив перед этим первым элементом в самом низу (после последнего элемента), вы получите эффект, что барабан движется, сначала исчезает верхняя часть текущего изображения.

В коде с помощью подключаемого модуля scrollTo:

var $reel = null;
function init() {
    $reel = $("#imgReel")
    // Keep the first element as first shown, now that we're going to take the reel to the bottom
    $reel.children("div:first").insertAfter($reel.children("div:last"))
    // Move to the bottom using scrollTo or whatever you want:
    $reel.scrollTo("max")
}

function next() {
    // Clone the first element (not visible) at the end
    var $topElement = $reel.children("div:first")
    var $bottomElement = $topElement.clone().appendTo($reel)

    // Hide the top element (cloned now at the bottom) and remove it when it's done
    $topElement.slideUp(1000, function() { $(this).remove() })

    // Mark the next 'current'
    $reel.children(".current").removeClass("current");
    $bottomElement.addClass("current");
}

С другой стороны, если вы не хотите создавать бесконечный цикл и сохраняете свой подход, используйте scrollTo < / a> так просто:

funnction next() {
    var $current = $reel.find("div.current").removeClass("current")
    var $next = $current.next()
    if(!$next.length) $next = $reel.children("div:first")
    $reel.scrollTo($next.addClass("current"), 1000)
}

function prev() {
    var $current = $reel.find("div.current").removeClass("current")
    var $next = $current.prev()
    if(!$next.length) $next = $reel.children("div:last")
    $reel.scrollTo($next.addClass("current"), 1000)
})

Надеюсь, это поможет :-)

1

Gonzalo Larralde 9 Фев 2011 в 16:49

Answer

Вы можете либо вернуться в верхнюю часть барабана, либо переместить просматриваемый div в конец барабана.

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

0

Gideon 9 Фев 2011 в 15:42

Question 2