jquery бесконечный слайдер изображения

Question

Я пытаюсь создать бесконечный слайдер с помощью jquery. На моей странице есть теги, ширина которых равна ширине окна.

Я хочу, чтобы каждое изображение отображалось через 10 секунд, и когда появляется последнее изображение, и пришло время для показа первого изображения, я хочу, чтобы он остался справа.

Теперь я создал div с большой шириной, 10000px для хранения моего неупорядоченного списка изображений, и у них есть отображение: none. Мой вопрос в том, почему, когда я даю margin-left: -1000px для одного элемента списка, изображения кажутся перекрывающимися один над другим, вместо того, чтобы появляться один за другим. Я попытался сделать снимок экрана, но я не знаю, что происходит с моим Dropbox.

Это мой CSS:

.slider { 
    position: relative; 
    height: 498px; 
    /*display: inline-block;*/ 
    overflow: hidden; 
} 
.slider-list { 
    /*display: inline-block;*/ 
    float: left; 
    padding: 0; 
    margin: 0; 
    width: 10000px 
    /*height: 496px;*/ 
} 

.slider-list li{ 
    display: inline-block; 
    /*float: left;*/ 
    /*width: 100%;*/ 
    height: 496px; 
    z-index: 1; 

А вот мой HTML:

<div class="slider"> 
     <ul class="slider-list"> 
      <li><img class="homepage-img"src="images/homepage.jpg"></li> 
      <li><img class="homepage-img"src="images/image1.jpg"></li> 
      <li><img class="homepage-img"src="images/image2.jpg"></li> 
      <li><img class="homepage-img"src="images/image3.jpg"></li> 
      <li><img class="homepage-img"src="images/image4.jpg"></li> 

     </ul> 

DIV с классом .slider будет закрыт после еще несколько элементов.

UPDATE:

Это мой JQuery код, так как я написал этот пост:

$(document).ready(function(){ 
     slide(); 

}); 

    slide = function() { 
    var img = $('.homepage-img'); 
    var content = $('.slider-content'); 
    var slider = $('.slider-list'); 
    var elements = $('.slider-list li').children(); 
    var auto_slide_speed = 100;//ms 
    var timer; 
    var i = 0; 

    img.width($(window).width()); 
    $("li").width($(window).width()); 
    img.height($('.slider-list').height()); 
    content.height($('.slider-list').height()); 

    var img_width = $('.slider-list li').outerWidth(); 
    console.log($('.slider-list li').length); 
    console.log(elements); 
    //calculam margin-left = -latimea unei imagini 
    // while(1) 
    // { 
     var left = parseInt(slider.css('margin-left')) - img_width; 
    for(i = 0; i <= $('.slider-list li').length; i++) 
    { 
     console.log(i); 

     slider.animate({ 
     "margin-left": "+=" + left}, 
     1500, 
     function() { 
     // $('.slider-list li:last').after($('.slider-list li:first')); 
     // $('slider').css({'margin-left' : '0px'}); 

     }); 
     // left = left + left; 
     // $('slider li').append($(elements[i]).clone()); 
    } 

    console.log(i); 

} 

С этим, мой слайдер оны идет, насколько мой список можно продолжать. Как добавить первый элемент после последнего элемента и так далее, чтобы он мог быть бесконечным?

Answer 1

Адрес FIDDLE, который позволит вам начать работу.

1. Поместите все изображения в скрытом DIV

2. Clone их и поместить их в видимой DIV

3. анимировать изображение, изменяя левый край

4. Вы можете настроить время между изображениями с помощью функции заданного интервала

5. Вы можете настроить слайдер t ime на время анимации.

6. Поскольку это бесконечный цикл, я помещал кнопку, чтобы остановить анимацию в любое время.

JS

var pictxtnumber = 1; 
loadpictxt(pictxtnumber); 

var fadeintime = 500; 
animatediv(); 

function animatediv() 
{ 
    var number = 0; 
    var interval = setInterval(function() { 
              pictxtnumber = pictxtnumber + 1; 
              if(pictxtnumber > 6) 
              { 
               pictxtnumber = 1; 
               } 
              loadpictxt(pictxtnumber); 
              $('#stopanim').on('click', function(){ 
                       clearInterval(interval); 
                       }); 
              }, 1000); 
} 

function loadpictxt(num) 
{ 
    $('.picturediv').html(''); 
    $(".hiddenimage img:nth-child(" + num + ") ").clone().appendTo('.picturediv'); 
    $('.picturediv img').css('margin-left', '100px'); 
    $('.picturediv img').animate({marginLeft: "0"}, 100);  
} 

Answer 2

Если вы ориентируетесь современные браузеры, которые поддерживают переходы и преобразования я хотел бы сделать это таким образом ..

Демо наhttp://jsfiddle.net/gaby/dbLu5/

JQuery

var slides = $('.slider-list li'); // cache a reference to the slides 

setInterval(function(){ 
    var current = slides.filter('.current'), // find slide in view 
     next = current.next(); // find next slide 

    if (!next.length){next = slides.first();} // loop if at last slide 

    slides.removeClass('off'); // reposition already viewed slides to the right 
    current.removeClass('current').addClass('off'); // set current slide to animate left 
    next.removeClass('off').addClass('current'); // set next slide to slide in view 
}, 10000); // set the interval 

CSS (вам нужно добавить префиксы для преобразования и переходных свойств)

.slider-list { 
    position:relative; 
    padding: 0; 
    margin: 0; 
    overflow:hidden; 
    height: 496px; 
} 
.slider-list li { 
    width:100%; 
    height: 100%; 
    display: block; 
    z-index: 1; 
    transition:transform 1s; 
    transform:translateX(100%); 
    left:0; top:0; 
    position:absolute; 
    overflow:hidden; 
} 
.slider-list li.current{ 
    transform:translateX(0%); 
    z-index:100; 
} 
.slider-list li.off{ 
    transform:translateX(-100%); 
    z-index:100; 
} 

Answer 3

Я сделал два простых плагинов JQuery для этого:

• https://github.com/lingtalfi/jItemSlider
• https://github.com/lingtalfi/jInfiniteSlider

Я рекомендую ползунок пункта, поскольку элементы вынуждены быть выровнены, и это проще, в конце концов.

Теперь, чтобы ответить на ваш вопрос: Как добавить первый элемент после последнего элемента и так далее, чтобы он мог быть бесконечным?

Вы можете просто отображать элементы слайдера два раза (или более) в строке. Учитывая ваш HTML код:

var jSliderList = $(".slider-list"); 
var jSliderOriginalItems = $("li", jSliderList); // keep track of this one 

function init(){ 
    jSliderList.append(jSliderOriginalItems.clone()); // should work, not tested 
} 

Затем с помощью CSS, вы бы сужать ползунок ширины вашего выбора.

Предложения:

Я хотел бы предложить вам добавить страницу, а не только один пункт.

Основной подход будет инкапсулировать вещи в функцию, например:

slideToRight() 
    appendItemsToTheRight() 
    removeUnecessaryItemsToTheLeft() 
    slide() 

Для выполнения слайда, вы можете использовать CSS переходы. В вашем CSS, положить что-то вроде этого:

.sliderContainer { 
    transition: transform 2s ease; 
} 

, а затем в коде JS, скользить, просто использовать функцию, например:

function moveSlider(the_offset) { 
    jSliderContent.css({ 
     transform: "translate3d(" + the_offset + "px, 0px, 0px)" 
    }); 
} 

Теперь на самом деле добавить элемент, вы могли бы используйте функцию renderItem для их генерации, а не для клонирования.