1

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

有没有可能...

1）更改jQuery以使最后一个li项目在窗口右侧一直显示后停止？我知道这必须与浏览器窗口大小相关，并且在窗口大小显示部分项目的情况下进行一次部分移动。我也知道我必须知道我可以在 php.ini 中执行的 li 项目的数量。

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

我试图创建一个jFiddle来显示这个问题。但它在 jFiddle 上做了一些不同的事情，这更接近我的需要。它似乎在某个时候停止向右移动。但它不需要整个最后一个 li 才能完全显示。它与我在它停止的实时站点上所做的有什么不同？

任何帮助是极大的赞赏。我确实搜索并找到了这个，但在这种情况下它似乎不起作用。提前谢谢你。

我正在使用 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));
4

1 回答 1

0

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

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

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

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

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

另外，请记住在 CSS 中为您的图像滑块设置一个宽度，并将溢出设置为隐藏。这应该确保没有附加图像超出滑块，并且没有出现滚动条。

于 2013-10-14T05:55:28.473 回答