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

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

Я хочу, чтобы каждое изображение отображалось через 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 закроется после нескольких элементов.

ОБНОВИТЬ:

Это мой код 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); } 

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

Вот FIDDLE, который поможет вам начать.

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

  2. Клонируйте их и поместите в видимый div

  3. Анимация изображения путем изменения левого поля

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

  5. Вы можете настроить время скольжения по времени анимации.

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

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

Демо на 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; } направо .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; } 

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

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

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

Вы можете просто отображать элементы слайдера два раза (или более) подряд. Учитывая ваш 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 для их генерации, а не для клонирования.