1

嗨，我正在使用来自该站点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;
}
4

2 回答 2

1

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

$("#scroller").simplyScroll({ autoMode: 'loop', width: 3000, startOnLoad: true });

还有：

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

似乎您正在使用插件“知识”之外的元素宽度以及它的初始化。

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

于 2012-08-08T20:35:18.870 回答
0

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

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

.simply-scroll .simply-scroll-clip {
  width: 1576px;
  height: 200px;
}
于 2017-02-02T18:16:57.633 回答