0

回路図で説明する方が簡単です

ここに画像の説明を入力してください

メインのdivがあり、その中に別の（灰色の）divがあり、ビデオサム用のいくつかのdivがあります（フルサイズのビデオではクリック可能です）。私が欲しいのは、親指でdiv（フレームでマークされている）を次の「ページ」に変更するボタン（スキームの白い矢印）を作成することです-別の親指のセットで別のdivを作成し、訪問者が複数のページを閲覧できるようにします8本以上の親指で。

上部の全体像は注目のビデオです。変更しないでください（ボタンをクリックすると、親指が異なる別のdivに置き換える必要があるため、灰色のdiv内ではなく、すべての上に配置できると思います） ）。

私はコーダーではありません。html/cssと少しのJavaで最初の一歩を踏み出すだけなので、どんな助けでもありがたいです。

前もって感謝します！

4

2 に答える 2

0

最も簡単なのは、ビデオサムの2番目のセットを持つ2番目のページを作成し、白い矢印の画像をそのページへのリンクにすることです。それを望まない場合は、もちろん白い矢印をクリックすると、jQueryを使用して古いビデオサムを新しいものに置き換えます。

于 2012-07-24T21:15:31.603 に答える
0

私はこれを達成するために昨日Twitterフィードで同様のことをしました：

ここに画像の説明を入力してください

HTML：

<div class="twitterMask">
   <div class="twitterNav" data-id="+"></div>
   <div class="twitterNav twitterNavNext" data-id="-"></div>
   <div id="jsTwitter">
      <div class="tweet">single slide (in your example, this should contain 8 images)</div>
      <div class="tweet">single slide (in your example, this should contain the next 8 images)</div>
      <div class="tweet">single slide (in your example, this should contain another 8 images)</div>
      <div class="tweet">etc etc</div>
   </div>
</div>

CSS：

.twitterMask{width:185px; height:122px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; background: #fff; padding: 10px; position: relative; overflow:hidden}
.twitterArrow{position: relative; background: url(../images/twitterBirdArrow.png); width:93px; height:69px; left: 109px;}

#jsTwitter{width: 780px; height: 150px; overflow: hidden; position: relative; }
#jsTwitter .tweet{overflow: hidden; position: relative; float: left; font-size: 14px; width:185px; height:122px; margin-right: 10px; color: #000; text-align: right; font-style: italic; font-family: Times;}
#jsTwitter .tweet .time{position: absolute; height: 18px; bottom:0; right: 13px; font-size: 12px;}

.twitterMask .twitterNav{position: absolute; background: url(../images/twitterArrows.png); width:10px; height:19px; display: block; z-index: 9; bottom: 8px; left: 10px; cursor: pointer}
.twitterMask .twitterNavNext{background:url(../images/twitterArrows.png) -172px 0px; right: 10px !important; left:auto}
.twitterMask .twitterNav[data-id='+']{display: none}

jQuery

$('.twitterNav').click(function(){
    var maxLeft = 0-parseInt($('#jsTwitter').width() - $('.tweet').width() - parseInt($('.tweet').css('margin-right').replace("px","")));
    $('#jsTwitter').animate({
        left: $(this).attr('data-id')+'='+($('.tweet').width()+parseInt($('.tweet').css('margin-right').replace("px",""))),
      }, 100, function() {
        var currentLeft = $('#jsTwitter').css('left');
        currentLeft = parseInt(currentLeft.replace("px",""));
        if (currentLeft <= maxLeft){
            $(".twitterNav[data-id='-']:visible").hide();
        } else {
            $(".twitterNav[data-id='-']:hidden").show();
        }
        if (currentLeft >= 0){
            $(".twitterNav[data-id='+']:visible").hide();
        } else {
            $(".twitterNav[data-id='+']:hidden").show();
        }
      });
})

明らかに、テンプレートに合うようにCSSを調整する必要があります。しかし、かなり簡単なはずです。

于 2012-07-24T21:49:32.110 に答える