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

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

<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>

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

источник

2011-02-09 Tuscan

Вы можете использовать другой подход: пусть #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 так просто, как это:

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) 
})

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

источник

2011-02-09 13:49:52

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

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

источник

2011-02-09 12:42:20 Gidon

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

ответ

Смежные вопросы