1

私は写真ビジネスのためにポートフォリオのウェブサイトを構築しています。ポートフォリオが水平方向にスクロールするようにサイトを構築しました。

これは私がこれまでに持っているものです。 http://www.dscottclarkphoto.com/portfolio/adventure/adventure.html

クリックすると視聴者が次の写真にジャンプする矢印を含めることができるようにしたいと思います。

私はこれで示されたものを使ってみました： jQuery：次の<セクション>にジャンプ

Javascriptをjump.jsという名前の独自のファイルに保存しました。

<script src="../jquery.js"></script>
<script type="text/javascript" src="../jump.js"></script>
</head>

<div id="images">
 <ul> 
    <li><section id="1"><img src="../space.jpg" /></section></li>
    <li><section id="2"><img src="adventure/adv-01.jpg" /></section></li>
    <li><section id="3"><img src="adventure/adv-02.jpg" /></section></li>
    <li><section id="4"><img src="adventure/adv-03.jpg" /></section></li>
    <li><section id="5"><img src="adventure/adv-04.jpg" /></section></li>
  </ul>

また、サンプルを保存しようとしましたが、正しく動作していません。

</div>

これを機能させる方法やより良い方法について何か提案はありますか？

4

2 に答える 2

0

次のコードを試しました。それはあなたが望むように正確に動作します。

$(function(){
    var currentImage = 1;
    var imagesCount = $('#images li').length - 1;
    var spacerWidth = $('#images li:eq(1)').offset().left;
    $('#scroll').click(function(){
        currentImage++;
        if (currentImage == imagesCount) currentImage = 1;
        var left = $('#images li').eq(currentImage).offset().left;
        $(window).scrollLeft(left - spacerWidth);
    });
});

スクロール用の適切なボタンを追加するときは$('#scroll')、セレクターに変更するだけです。これで、「このようにスクロール>」というテキストに添付されます。

また、マークアップなどを追加する必要はありません<section>。

于 2012-12-05T21:29:29.260 に答える
0

投稿したリンクでは、垂直スクロール ( $(myEl).offset().top) を使用しています。水平スクロールを使用している場合は、それを変更する必要があります$(myEl).offset().left。試していませんが、そうあるべきです。また、質問とは関係ありませんが、ページの外観を改善するのに役立つ場合があります*.png interlaced。現在のようにスライドしないように画像を保存することをお勧めします。

于 2012-12-05T21:32:10.033 に答える