Javascript 为什么不是'；jQuery scrollTo（）是否正常工作？_Javascript_Jquery

Javascript 为什么不是'；jQuery scrollTo（）是否正常工作？

javascript jquery

Javascript 为什么不是'；jQuery scrollTo（）是否正常工作？,javascript,jquery,Javascript,Jquery,我尝试使用scrollTo插件的一个非常简单的实现：但我不能让它工作。知道为什么不水平滚动显示列表中的下一个图像吗 <!doctype html> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="http:

我尝试使用scrollTo插件的一个非常简单的实现：

但我不能让它工作。知道为什么不水平滚动显示列表中的下一个图像吗

<!doctype html>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js"></script>
<script type="text/javascript">
$(function() {

    $('.next').click(function(e) {
        $('ul#scrollThis').scrollTo( 'li:eq(1)', 1000, {axis:'x'} );    
        e.preventDefault(); 
    });

});
</script>

<style>

@import "http://developer.yahoo.com/yui/build/reset/reset.css";

body { padding: 100px; }

ul { list-style-type: none; width: 50px; height: 50px; overflow: hidden; }
ul li { float: left; }

</style>

<ul id="scrollThis">
    <li><img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" width="50" height="50" /></li>
    <li><img src="http://www.thecouchsessions.com/wp-content/uploads/2011/08/fat-cat.jpg" width="50" height="50" /></li>
    <li><img src="http://static.howstuffworks.com/gif/dog-best-friend-1.jpg" width="50" height="50" /></li>
</ul>

<a href="" class="next">Next >></a>


$（函数（）{
$（'.next'）。单击（函数（e）{
$（'ul#scrollThis'）。scrollTo（'li:eq（1）'1000，{axis:'x'}）；
e、 预防默认值（）；
});
});
@进口”http://developer.yahoo.com/yui/build/reset/reset.css";
正文{padding:100px；}
ul{列表样式类型：无；宽度：50px；高度：50px；溢出：隐藏；}
ul li{浮动：左；}

主要问题是flesler提醒您必须重新加载该js文件。。。试试我自己的插件

很好

(function($){
        $.fn.scrollTo = function(minus){
                if (!minus) minus = 0;
                var container = $("body");
                var scrollTo = $(this);
                if (scrollTo && container){
                        container.animate({
                            scrollTop: scrollTo.offset().top - container.offset().top - minus
                        });
                }
        }
})(jQuery);


$(function() {

     $('.next').click(function(e) {
         $('ul#scrollThis').scrollTo();    
         return false;
     });

 });

暂时忘记插件，您使用的是一个无序列表，因此图像实际上是垂直排列的，而不是水平排列的。您可以通过删除overflow:hiddedcss样式看到这一点

因此，您有一个垂直列表（沿Y轴向下），并且锁定插件以仅滚动x轴。如果删除{axis:'x'}参数，您将看到它垂直滚动

如果你想让它水平滚动，那么你只需要改变你的CSS，让UL一个接一个地水平显示

更新

要实现水平对齐的项目（以及水平滚动），您需要将UL更改为足够宽，以容纳并排的所有项目（如果您限制UL的宽度，它只会将项目向下推到下一行），并将空白设置为nowrap

然后将LI设置为display:inline（或者您可以使用float:left，我相信）

现在，项目已并排显示，您需要裁剪视图，以便只显示一个项目。为此，将UL包装在一个容器div中，并在此设置宽度和高度，以便只显示一个项目并将其溢出隐藏

最后将scrollto更改为，告诉容器滚动列表，而不是滚动列表

这应该会达到你想要的结果

<!doctype html>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js"></script>
<script type="text/javascript">
$(function() {

    $('.next').click(function(e) {
        $('#container').scrollTo( 'li:eq(1)', 1000, {axis:'x'} );    
        e.preventDefault(); 
    });

});
</script>

<style>

@import "http://developer.yahoo.com/yui/build/reset/reset.css";

body { padding: 100px; }

ul { list-style-type: none; white-space: nowrap; width: 70000px; }
ul li { display: inline; }
#container { width:50px; height:50px; overflow:hidden;  }

</style>

<div id="container">
    <ul id="scrollThis">
        <li><img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" width="50" height="50" /></li>
        <li><img src="http://www.thecouchsessions.com/wp-content/uploads/2011/08/fat-cat.jpg" width="50" height="50" /></li>
        <li><img src="http://static.howstuffworks.com/gif/dog-best-friend-1.jpg" width="50" height="50" /></li>
    </ul>
</div>

<a href="" class="next">Next >></a>


$（函数（）{
$（'.next'）。单击（函数（e）{
$（'#container'）。滚动到（'li:eq（1）'1000，{axis:'x'}）；
e、 预防默认值（）；
});
});
@进口”http://developer.yahoo.com/yui/build/reset/reset.css";
正文{padding:100px；}
ul{列表样式类型：无；空白：nowrap；宽度：70000px；}
ul li{显示：内联；}
#容器{宽度：50px；高度：50px；溢出：隐藏；}

问题是您分配给

ul

的宽度。仅容纳一个

li

就足够了。因此，其余的

li

，即使您已经为它们设置了

float:left

，也会被压缩

您需要的是在

ul

周围有一个包装div，它应该具有显示单个

li

项目所需的高度和宽度。

ul

的宽度应为所有

li

的总宽度。完成此操作后，在包装器div上应用

滚动到插件
工作中，我是jQuery.scrollTo的创建者。
我想有两个人已经回答正确了（这是CSS的事情），所以我不再重复了
我只想补充一点，为了使用现代版本，确保可用性和一致性，您可以：

从下载并自己托管
热链接到托管插件的免费CDN服务之一


（不是最新的）

是的，我在创建小提琴后注意到了警报，但在我的本地副本上，我没有进行热链接，它仍然不起作用。我会使用你的自定义插件，但是我正在做一个项目，这个项目已经在很多地方使用了，所以我需要使用scrollTo插件，它也需要水平滚动。嗨，是的，我也意识到了这一点。这似乎是一个css问题。我是css新手，我只是不知道如何让列表项彼此相邻而隐藏其他项。因为如果我为ul设置了一个固定的宽度，并像你提到的那样应用了overflow-hidden属性，这会导致lis彼此位于下面。你知道我如何让lis彼此相邻，并且只使用css显示一个吗？@Sam-看看这个工作演示和对你问题的解释。