javascript - 如何制作几个div，互相替换？

Question

用示意图更容易解释

我有主 div，其中包含另一个（灰色）div，以及几个用于视频拇指的 div（可点击用于全尺寸视频）。我想要的是制作一个按钮（方案上的白色箭头），将带有拇指的div（它们用框架标记）更改为下一个“页面” - 另一个带有另一组拇指的div，允许访问者浏览多个页面超过 8 个拇指。

顶部的大图是特色视频，它不应该改变（所以如果我认为我可以把它放在一切之上，而不是在灰色 div 内，因为当你点击按钮时，它应该被另一个具有不同拇指设置的 div 替换)

我不是编码员，只是在 html/css 和一些 java 中迈出了第一步，因此将不胜感激。

提前致谢！

Answer 1

The easiest would be to create a second page which has the second set of video thumbs, and make your white arrow image a link to that page. If you don't want that, I would use jQuery to replace the old video thumbs with new ones, upon click of the white arrow of course.

Answer 2

我昨天用 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 以适合您的模板。不过应该很直截了当。