javascript - jquery infinite slider 图片

Question

我正在尝试使用 jquery 创建一个无限 slider 。我的页面有一些标签，宽度等于窗口宽度。

我想在 10 秒后滑动每张图片，当最后一张图片出现并且第一张图片显示的时候，我希望它从右边静止不动。

现在我创建了一个宽度为 10000px 的 div 来保存我的无序列表的图像，它们有显示:无。我的问题是为什么当我为一个列表项提供 margin-left: -1000px 时，图像似乎一个重叠在另一个之上，而不是一个接一个地出现。我尝试截取屏幕截图，但我不知道我的保管箱发生了什么。

这是我的 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>

带有 .slider 类的 div 将在更多元素后关闭。

更新:

这是我写这篇文章后的 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);

}

有了这个，我的 slider 就可以到达我的列表。如何将第一项追加到最后一项之后，以此类推，以便它可以是无限的？

Answer 1

如果您的目标是支持转换和转换的现代浏览器，我会这样做......

演示在 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(您需要为转换和过渡属性添加 vendor 前缀)

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