Question

更新：杰出的先生。 tpaksu解决了我的问题，你可以看到水平的ScrollTo在行动@ www.visioville.fi/en/

我有时间摆弄CSS，但我得出的结论是，如果没有Javascript / jQuery，这是我唯一无法完成的事情。

我一直在尝试实施Goro的建议jQuery.ScrollTo by Ariel Flesler，但我似乎无法让它以任何方式运作。再加上我是Javascript的新手，你会明白我的观点。我下载了最新的jQuery并将其命名为'jquery.js'

以下是一些消息来源：

<head>
<script type='text/javascript' src='../js/jquery.scrollTo-1.4.2-min.js'></script>
<script type='text/javascript' src='../js/jquery.js'></script>
</head>
...
<div>
    <p id="gallerytext">...</p>
    <a title="$(div.smallpics).scrollTo( '0%', 800, {axis:'x'} );" id="previmg" href="#image1"></a>
        <div id="smallwindow">
            <div class="smallpics">
                <ul>
                <li><a href="#image1"><img alt="Jerseys" src="../images/peliasuja.jpg" /></a></li>
                ...
                <li><a href="#image14"><img alt="Drawing" src="../images/kynailya.jpg" /></a></li>
               </ul>
           </div>
        </div>
    <a title="$(div.smallpics).scrollTo( '50%', 800, {axis:'x'} );" id="nextimg" href="#image8"></a>
</div>

然后是CSS：

#smallwindow    { float:left; overflow/*-y*/: hidden; width:890px; } /* overflow-y whips out the vertical scrollbar */

div.smallpics   { float:left; position:relative;  width:1595px; }

#previmg, #nextimg { float: left; width: 17px; height: 54px; background: white; overflow: hidden; background: url("images/galleryarrows_17x54.jpg"); }
#previmg        { background-position: left top; margin-right: 1px; left top; }
#nextimg        { background-position: right top; position: absolute; float: right; left: 935px; margin-left: 1px; margin-right: 1px; }
#previmg:hover  { background-position: left bottom; }
#nextimg:hover  { background-position: right bottom; }

.smallpics ul   { list-style: none; padding: 0; margin: 0; }

.smallpics li   { float: left; text-align: center;  margin-right: 1px; margin-bottom: 1px; white-space: nowrap; }

Goro提到将click（）事件绑定到我的箭头按钮，但我不知道我应该键入什么“功能”或放置代码。我猜是在.scrollTo事件的前面，假设甚至需要click（）。

提前谢谢！在编程和编码方面，你们绝对是最好的。

Answer 1

首先，您需要在jquery脚本之后包含您的scrollto脚本。

<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/jquery.scrollTo-1.4.2-min.js"></script>

然后，你需要这样的东西：

$("#nextimg").on("click",function(){
    $("#smallwindow").scrollTo( '50%', 800, {axis:'x'} ); 
});

click事件中的函数应该更改。但是一旦你开始工作，剩下的就很容易理解了。

让简单的Javascript / jQuery工作（ScillTo by Ariel Flesler）

1 个答案: