Question

我正在尝试使用jQuery函数通过单击箭头左右滑动li项目。我正在使用名为TinyCarousel.js的jQuery脚本。当我正常运行时，它会继续向右滚动，直到最后一个li项目处于第一个位置。在主滑块下的“当前正在测试或发布的游戏”部分中，我目前可以看到here。如果你一直向右滚动，你会发现问题。

是否可以......

1）更改jQuery以使最后一个li项在窗口右侧一直显示时停止？我知道这必须是相对于浏览器窗口大小以及单个部分移动，因为窗口大小有一个部分项目显示。我也知道我必须知道我可以在php中完成的li项目数量。

2）或者两个，连续追加li以使滑块似乎永远不会结束。只是一遍又一遍地重复？我猜我需要不断添加li项目，如果它们不在屏幕上则删除它们。

我尝试创建jFiddle来显示问题。但它在jFiddle上做的事情各不相同，这更接近我的需要。它似乎在某个时候停止向右移动。但它不需要整个最后的li完全显示。它的作用与我停止的现场网站有什么不同？

非常感谢任何帮助。我做了搜索并找到了this，但在这种情况下它似乎没有用。谢谢你。

我使用的是jQuery 1.10.2，php 5.4，TinyCarousel.js 1.9版

这是我目前的情况。 CSS

.PrevArrow {
    width: 5%;
    float: left;
    margin-top: 20px;
}
.NextArrow {
    width: 5%;
    float: right;
    margin-top: 20px;
}
.ListImage img {
    margin-top: 5px;
    margin-bottom: 10px;
}
#slider-code .viewport {
    float: left;
    width:90%;
    height: 95px;
    overflow: hidden;
    position: relative;
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto;
}
#slider-code .buttons {
    display: block;
    margin: 0px 10px 0 10px;
    float: left;
}
#TickHead {
    margin-top: 3px;
}
#slider-code .prev {
    margin: 0 10px 0 10px;
}
#slider-code .next {
    margin: 0 10px 0 10px;
}
#slider-code .disable {
    visibility: hidden;
}
#slider-code .overview {
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    left: 0;
    top: 0;
}
.TestingTickerText {
    vertical-align: top;
    color: #666666;
    font-family:'Open Sans', "lucida grande", tahoma, verdana, arial, sans-serif;
    font-size: 10px;
}
#slider-code .overview li {
    float: left;
    margin: 0 20px 0 0;
    padding: 1px;
    height: 65px;
    width: 105px;
    left: 0;
}
#slider-code .pager {
    overflow:hidden;
    list-style: none;
    clear: both;
    margin: 0 0 0 45px;
}
#slider-code .pager li {
    float: left;
}
#slider-code .pagenum {
    text-decoration: none;
    text-align: center;
    padding: 5px;
    color: #555555;
    font-size: 14px;
    font-weight: bold;
    display: block;
}
#slider-code .active {
    color: #fff;
}

php

<div id="slider-code">
    <div class="PrevArrow">
        <a href="#" class="prev"><img src="Link to Left Arrow"/></a>
    </div>
    <div class="viewport">
        <ul class="overview">
             <li>Item 1</li>
             <li>Item 2</li>
             <li>Item 3</li>
             etc...
        </ul>
    </div>
    <div class="NextArrow">
        <a href="#" class="next"><img src="Link to Right Arrow"/></a>
    </div>';
<center>
        <span id="TickHead" class="cat_bg2">Games Currently Testing or Releasing</span>
    </center>
</div>

jQuery

(function ($) {
    $(document).ready(function(){               
        $('#slider-code').tinycarousel({ display: 1});
    });
}(jQuery));

Answer 1

我认为你遇到的问题是由于图像的css定位。尝试调整边距，使它们稍微远离彼此;这样当没有附加图像时，滑块将停止并且没有空间。如果那不是问题，请试试这个：

1：创建一个div并将所有滑块图像放入其中。

2：给每个箭头按钮一个单独的div和class。

3：当用户单击任一按钮时，使用jquery append函数动态地将图像添加到滑块类。

$(document).ready(function(){
    $('.arrowbutton').click(function(){
        $('.imageslider').append('.image');
    });
});

另外，请记住在css中为图像滑块指定设置宽度，并将overflow设置为隐藏。这应该确保没有附加图像超出滑块，并且不会出现滚动条。

jQuery滑块在结尾处动态停止或附加li项目以继续

1 个答案: