3

ポートフォリオ Web サイトのスライダーを作成しようとしています。

私が達成しようとしていることを表現するのを助けるために、ここに私がそれをどのように見せたいかのイメージがあります... ここに画像の説明を入力

基本的に、次または前の矢印を押すと、スクリーンショットと説明テキストの両方が個別に (カルーセル効果のように) スライドし、次のスクリーンショットと説明が表示されます。これはjQueryで行われていると思いますが、私が見て試してみた他のjQueryスライダーは、一度にたくさんスライドします。

私がやろうとしていることを達成する方法を知っている人、またはチュートリアルのあるウェブサイトを知っている人はいますか?

よろしくお願いします

トム

4

3 に答える 3

0

まず、jquery-ui-slider タグは、スライダー上の手の位置によって値が変化するスライダーを指します。jquery とはまったく別の部分です。

とにかく、コンテンツ div をスライドできるようにするスライダー プラグインが必要です。ここにその例を示します。

次に、divに画像と説明を配置し、cssできれいに見えるようにスタイルを設定します

このように

<div class="sliderWrap">
     <div class="sliderContent">
          <img src="..." />
          Content 1 goes here
     </div>

     <div class="sliderContent">
          <img src="..." />
          Content 2 goes here
     </div>  
</div>
于 2012-10-05T16:26:55.697 に答える
0

これは非常に高度な質問なので、同様の回答しかできません。これが私があなたのデザインに取り組む方法です。手順:

1) スライドと説明を UL にレイアウトします。各 IL には同じレイアウトが含まれていますが、画像と説明が異なります。

2) CSS を使用して、UL のスタイルを設定し、すべての LI 要素を固定幅のインライン ブロックとして表示します。

3) UL をラッパー DIV に配置し、オーバーフローを非表示に設定します。

4) JQuery または単純な JavaScript を使用して、UL の相対位置を LI の固定幅に等しい増分で単純に増減します。JQuery を使用すると、モーションをより簡単にアニメーション化できます (JQuery Animate() を参照)。

基本的な構造は次のようになります。

<div id="slider">
    <ul>
        <li><img src="slide1.png">Slide 1 description text Slide 1 description text Slide 1 description text Slide 1 description text </li>
        <li><img src="slide2.png">Slide 2 description text Slide 2 description text Slide 2 description text Slide 2 description text </li>
        <li><img src="slide3.png">Slide 3 description text Slide 3 description text Slide 3 description text Slide 3 description text </li>
        <li><img src="slide4.png">Slide 4 description text Slide 4 description text Slide 4 description text Slide 4 description text </li>
        <li><img src="slide5.png">Slide 5 description text Slide 5 description text Slide 5 description text Slide 5 description text </li>
        <li><img src="slide6.png">Slide 6 description text Slide 6 description text Slide 6 description text Slide 6 description text </li>
    </ul>
</div>

<input type="button" id="slide_left" value="LEFT"> 
<input type="button" id="slide_right" value="RIGHT">

これは非常に基本的なスケルトンですが、良いスタートになるはずです。残りは CSS で行うことができます。

CSSは次のとおりです。

#slider { width:600px; height:250px; background:url('slider_laptop_bg.png'); background-color:#eee; overflow:hidden; }
#slider ul { position:relative; left:0px; list-style-type:none; width:5000px; hieight:100%; padding:0; margin:0; }
#slider ul li { float:left; width:600px; height:250px; display:inline; padding:0px; margin:0; }
#slider ul li img { float:left; width:250px; height:200px; }

そして、これを有効にする JQuery を次に示します。より手の込んだものについては、Animate() を調べてください。スライドチェックの終わりとその他の詳細を追加する必要があります.

$(document).ready(function () {

    $('#slide_left').on('click', function () {
        $('#slider ul').css('left', $('#slider ul').position().left - 608);
    });

    $('#slide_right').on('click', function () {
        $('#slider ul').css('left', $('#slider ul').position().left + 608);
    });

});

お役に立てれば。

于 2012-10-05T16:34:09.800 に答える