Question

您好我正在使用此网站http://logicbox.net/jquery/simplyscroll/

中的简单滚动插件

但是我遇到的问题是，当滚动器结束并尝试循环回到开头而不是平滑过渡时，它会跳回到开头，这对眼睛来说有点粗糙，而且客户端是不太喜欢它。

如果你去这个网站http://www.newwhey.com/，你可以看到问题，然后看看我们的零售商所在的底部，当它到达终点时，我有标识向下滚动它，我是与其他网站使用相同的问题只需滚动任何建议吗？

这是我到目前为止所拥有的代码

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.simplyscroll.js"></script>



<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/js/jquery.simplyscroll.css" media="all" type="text/css">

<script type="text/javascript">

(function($) {
    $(function() {
        $("#scroller").simplyScroll({
        autoMode: 'loop',
        width: 3000,
        startOnLoad: true
        });
    });
})(jQuery);
</script>

这是我的css文件，其中包含顶部的简单滚动

/* Container DIV - automatically generated */

.simply-scroll-container {
    position: relative;
}

/* Clip DIV - automatically generated */

.simply-scroll-clip {
    position: relative;
    overflow: hidden;
}

/* UL/OL/DIV - the element that simplyScroll is inited on    
Class name automatically added to element */

.simply-scroll-list {
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style: none;
}   

.simply-scroll-list li {
    padding: 0;
    margin: 0;
    list-style: none;
}   

.simply-scroll-list li img {
    border: none;
    display: block;
}

/* Custom class modifications - adds to / overrides above
    .simply-scroll is default base class */

/* Container DIV */

.simply-scroll {
    width: 1576px;
    height: 200px;
    margin-bottom: 1em; 
}

/* Clip DIV */

.simply-scroll .simply-scroll-clip {
    width: 1576px;
    height: 200px;
}   

/* Explicitly set height/width of each list item */ 
.simply-scroll .simply-scroll-list li {
    float: left; /* Horizontal scroll only */
    height: 200px;
}

Answer 1

为什么你在插件上设置了“宽度”值？

$（ “＃卷轴”）。simplyScroll（{ autoMode：'loop'， 宽度：3000， startOnLoad：true }）;

还有：

$("#scroller .simply-scroll-list").css({"width":"auto"})

看起来你正在玩插件的“知识”之外的元素的宽度以及它的初始化之后。

我建议尝试删除它，只需使用CSS中的容器宽度，这里不需要JS。

Answer 2

通过夸大整个“.simply-scroll”宽度来容纳滚动元素，它不应该跳过并重新启动。 “.simply-scroll-clip”将隐藏溢出。

.simply-scroll {
  width: 6000px;
  height: 200px;
  margin-bottom: 1em; 
}

.simply-scroll .simply-scroll-clip {
  width: 1576px;
  height: 200px;
}

只需滚动插件跳转即可开始

2 个答案: