Question

我试图使用jquery创建无限滑块。我的页面有一些标签，宽度等于窗口宽度。

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

现在我创建了一个宽度很大的div，10000px来保存我的无序图像列表，它们有display：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>

具有类.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);

}

有了这个，我的滑块就到了我的列表。如何在最后一个项目之后附加第一个项目，以便它可以是无限的？

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 （您需要为转换和转换属性添加供应商前缀）

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

这是一个FIDDLE，可以帮助您入门。

将所有图片放入隐藏的div
克隆它们并将它们放入可见的div
通过更改左边距
您可以通过设置间隔功能
您可以按动画时间调整幻灯片时间。
因为它是一个无限循环，我按下按钮可以随时停止动画。

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 3

我为此制作了两个简单的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函数来生成它们，而不是克隆东西。

jquery无限滑块图像

3 个答案: