Question

我有一组图像，所有图像的高度相同但宽度不同。我需要保持固定的宽度，我需要图像在无限循环中向左滑动。我还需要图像来填充容器宽度，以便显示部分图像。滚动将按步骤（例如200px）和设定的间隔进行。

我浏览了大量的jQuery幻灯片插件，包括Cycle，NivoSlider，EasySlider和其他六个。但是我所看到的似乎没有让我知道客户需要它做什么。我不需要可点击导航或居中。只是一个连续的幻灯片，以设定的宽度步长和设定的间隔滚动。

我在想，就连续循环部分而言，我可以等到最左边的图像消失了。最初，我尝试使用append()，但是当最左边移动到最后时幻灯片跳了起来。那么我尝试append() clone() $('#slides').children()到最后remove()，然后从$('#slides')开始<div id="outer" style="width:300px;"> <div id="slides"> <img src="/images/slide1.jpg" alt="" style="height:150px;width:200px;" /> <img src="/images/slide2.jpg" alt="" style="height:200px;width:200px;" /> <img src="/images/slide3.jpg" alt="" style="height:150px;width:200px;" /> <img src="/images/slide4.jpg" alt="" style="height:300px;width:200px;" /> </div> </div>。

到目前为止，我有：

/* some code ideas taken from easySlider */
(function($){
    $.fn.stepSlider = function() {
        var slideInterval;

        this.each(function() {
            // this will be the width of $('#slides')
            var width = 0;
            // shortcut I saw in easySlider code; liked it, used it.
            var o = $(this);
            // set width of $('#slides') based on total width of child images
            o.children().each(function(){width+=$(this).width();});

            function scroll() {
                o.children().each(
                    function(index){
                        // slide each of the children to the left by 150px
                        $(this).animate({'left':'-=150'}, 2000);
                    }
                );

                // after children have been animated() left, check to see
                // if the left-most child has gone out of sight
                if (o.children(':first-child').position().left + o.children(':first-child').width() < 0) {
                    // cloning the first child now
                    var el = o.children(':first-child').clone(true);
                    // removing the first child
                    o .children(':first-child').remove();
                    // trying to reset the css('left') of all of the children now that the first
                    // element is supposed to be gone
                    o.children().css('left', o.children(':first-child').position().left + o.children(':first-child').width());
                    // appending the clone()
                    o.append(el);
                }
            }

            slideInterval = setInterval(function(){scroll();}, 2000);
        });
    }
})(jQuery);

和

{{1}}

滑动工作。但是第一张图像移动到最后会导致幻灯片跳跃。然后事情开始分解到完全停止的程度。

非常感谢任何见解。不，我不是jQuery的新手，但是是的：这是我的第一个插件尝试。

谢谢和最好的问候

Answer 1

我建议你可以使用scrollTo插件（或自己编写）。以下内容将以300像素滚动一个区域，因此您放入的内容无关紧要。您必须管理区域的位置和宽度，以便在最后停止或根据需要进行操作。

ScrolTo：http://demos.flesler.com/jquery/scrollTo/

JSFiddle：http://jsfiddle.net/YZ9vA/2/

    $(document).ready(function(){
    var areaWidth = 0, x=0;        
    $('#slideshow img').each(function() {
        areaWidth = areaWidth + $(this).width();
    });
    $('#slideshow').width(areaWidth);

    function ScrollMe() {
     x += 300;
     $('#sliders').scrollTo({top:0, left:x},800);

     }


   setInterval(ScrollMe,1000);

});

原始答案：

我给你的建议是使用jquery循环，它将永远重复。而不是循环图像，循环div，你可以将这些宽度设置为200px，你内部的图像可以放置你需要（居中，宽度100％等）。

http://jquery.malsup.com/cycle/

#slides, #slides div {width:200px;height:300px}
#slides img {width:100%;height:100%}  

<div id="slides">
    <div><img src="/images/slide1.jpg" alt="" style="" /></div>
    <div><img src="/images/slide2.jpg" alt="" style="" /></div>
    <div><img src="/images/slide3.jpg" alt="" style="" /></div>
    <div><img src="/images/slide4.jpg" alt="" style="height:300px;width:200px;" /></div>
<!-- I left the last inline style on, you can use that to override or use css externally -->
</div>

$('#slides').cycle({fx:'scrollHorz', 
                   continuous: 1, 
                   easeIn: 'linear',
                   easeOut: 'linear'});

Answer 2

所以感谢lucuma的帮助，我有一些工作。

<强> CSS：

<style type="text/css">
    #outer  {height: 250px; width: 760px; overflow:hidden;}
    #mid    {height: 250px; width: 760px; overflow:hidden;}
    #slides {height: 250px; width: auto; overflow:hidden;}
    #slides img {float: left; height: 250px;} /* height specified just for clarity */
</style>

<强> HTML：

我必须将#slides div包装在另外两个div而不是一个div中。只有一个包装器，scrollTo插件最终将div设置为100％宽度，而不是遵守我的760px约束。由于时间限制，我没有进一步调查。我刚刚添加了额外的div并且称它为一天。

<div id="outer">
    <div id="mid">
        <div id="slides">
            <img src="images/image1.jpg" alt="" style="width:760px;" />
            <img src="images/image2.jpg" alt="" style="width:529px;" />
            <img src="images/image3.jpg" alt="" style="width:720px;" />
            <img src="images/iamge4.jpg" alt="" style="width:563px;" />
            <!-- my live version has 16 total images -->
        </div>
    </div>
</div>

<强> JavaScript的：

<script type="text/javascript" src="scripts/jquery.scrollTo.min.js"></script>
<script type="text/javascript">
    $(function(){
        var areaWidth = 0, x = 0, lelements=$('#slides img').length * -1;

        /* This is the same essential functionality that I had in my original post
         * to set the width of the images container
         */
        function setWidth() {
            $('#slides img').each(function() {
                areaWidth = areaWidth + $(this).width();
            });
            $('#slides').width(areaWidth);
        }

        /* This is also essentially what I was doing before: checking
         * to see if an image is no longer viewable. It appends a clone
         * to the $('#slides'), but it differs from my original idea by
         * not trying to remove any :first element.
         * So $('#slides img').length will continue to increase as the
         * program runs. I was trying to avoid this, but in reality, it
         * probably doesn't matter a ton unless someone is watching the
         * same page for quite a long time.
         */
        function checkIt() {
            $('#slides img').slice(lelements).each(function() {
                if ($(this).position().left + $(this).width() < 0) {
                    $(this).clone().appendTo($('#slides'));
                }
            });
        }            

        /* This is where we use Flesler's scrollTo plugin to handle the motion.
         * I changed scrollTo({}, 3000) to scrollTo({}, {duration: 1000})
         * to slow the transition speed.
         */
        function scrollMe() {
            $('#outer').scrollTo({top:0, left:x}, {duration:1000});

            /* x += 300 was the first line in scrollMe(), but ended up
             * resulting in a 600px slide for the first transition,
             * so I moved it here. The first transition takes longer
             * to occur, but all other transitions are fine
             */
            x += 300;

            checkIt();
            setWidth();
        }

        setInterval(scrollMe, 3000);  
    });
</script>

我要做的另一件事是确保我的第一张幻灯片是全宽（760px）。如果它小于那个，那么第二个图像最初将是不可见的，然后它会突然出现在容器的左侧空间中，然后会发生滚动。所有后续图像都很好。显然，让第一个图像填满整个宽度可以消除这种伪影。

再次感谢lucuma - 你是一帮帮助！

jQuery +滑块插件：具有不同宽度图像的固定宽度连续滑块

2 个答案: