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

我有一张照片，上面有一组图像，所有的图像都是相同的高度，但宽度不同。我需要图像保持固定的宽度，我需要图像以无限循环的方式向左滑动。我还需要图像来填充容器的宽度，以便即使是部分图像也能显示出来。滚动将分步骤（例如200px）并以设定的间隔进行

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

我在想，就连续循环部分而言，我可以等到最左边的图像消失。最初，我尝试只使用

append（）

，但当最左边的幻灯片移到末尾时，幻灯片跳了起来。因此，我尝试将它的

附加（）

克隆（）到

$（“#幻灯片”）.children（）

，然后

从
$（“#幻灯片”）的开头删除它

到目前为止，我已经：

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



及

/*一些源于easySlider的代码思想*/
（函数（$）{
$.fn.stepSlider=函数（）{
var滑动区间；
这个。每个（函数（）{
//这将是$（“#幻灯片”的宽度）
var宽度=0；
//我在easySlider代码中看到的快捷方式；喜欢它，使用它。
var o=$（本）；
//根据子图像的总宽度设置$（“#幻灯片”）的宽度
o、 子函数（）.each（函数（）{width+=$（this.width（）；}）；
函数滚动（）{
o、 孩子们（）每人(
功能（索引）{
//将每个孩子向左滑动150像素
动画（{'left'：'-=150'}，2000）；
}
);
//将子对象设置为动画（）后，请检查以查看
//如果最左边的孩子已经看不见了
if（o.children（':first children'）.position（）.left+o.children（':first children'）.width（）<0）{
//现在克隆第一个孩子
var el=o.children（':first children'）.clone（true）；
//移除第一个孩子
o.children（“：first child”）.remove（）；
//正在尝试重置所有子级的css（“左”），因为第一个
//元素应该已经消失了
o、 children（）.css（'left'，o.children（':first children'）.position（）.left+o.children（':first children'）.width（））；
//附加克隆（）
o、 追加（el）；
}
}
slideInterval=setInterval（函数（）{scroll（）；}，2000）；
});
}
})（jQuery）；

滑动工作。但是第一张图片移到末尾会导致幻灯片跳跃。然后事情就开始崩溃，完全停止了

非常感谢您的任何见解。不，我对jQuery并不完全陌生，但是是的：这是我第一次尝试插件

谢谢并致以最诚挚的问候
我建议您可以使用scrollTo插件（或者自己编写）。以下内容将以300像素的速度滚动一个区域，因此您在其中输入的内容无关紧要。您必须管理区域的位置和宽度，以便在末端停止或根据需要进行操作

斯克罗托：

JSFiddle：

原始答复：

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


#幻灯片，#幻灯片分割{宽度：200px；高度：300px}
#幻灯片图像{宽度：100%；高度：100%}
$（'#幻灯片'）。循环（{fx:'scrollHorz'，
连续:1,，
伊辛：“线性”，
easeOut:'线性'}）；
多亏了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>

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


#外部{高度：250px；宽度：760px；溢出：隐藏；}
#中间{高度：250px；宽度：760px；溢出：隐藏；}
#幻灯片{高度：250px；宽度：自动；溢出：隐藏；}
#幻灯片img{float:left；高度：250px；}/*为清晰起见指定的高度*/

HTML:

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

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

我不得不把#slides 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:

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

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


$（函数（）{
变量areaWidth=0，x=0，LeElements=$（“#幻灯片img”）。长度*-1；
/*这与我在最初的帖子中使用的基本功能相同
*设置图像容器的宽度的步骤
*/
函数setWidth（）{
$（“#幻灯片img”）。每个（函数（）{
areaWidth=areaWidth+$（this）.width（）；
});
$（“#幻灯片”）。宽度（区域宽度）；
}
/*这也是我以前做的：检查
*查看图像是否不再可见。它附加了一个克隆
*到$（“#幻灯片”），但它与我最初的想法不同
*不尝试删除任何：第一个元素。
*因此，$（'#slides img'）。长度将随着
*程序运行。我试图避免这种情况，但事实上，它
*可能没关系