jquery 无限滑块 图片

Question

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

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

现在我创建了一个宽度为 10000 像素的 div 来保存我的无序列图像列表，并且它们具有 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，可以帮助您入门。

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

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 函数来生成它们，而不是克隆。