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

Question

使用原理图

更容易解释

我有一个主div，里面包含另一个（灰色）div，还有几个用于视频拇指的div（可以点击完整的sizer视频）。 我想要的是制作一个按钮（方案上的白色箭头），用拇指（它们标有框架）改变div到下一个“页面” - 另一个div与另一组拇指，允许访问者浏览几个页面超过8个拇指。

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

我不是一个程序员，只是在html / css和一些java的第一步，所以任何帮助将不胜感激。

提前致谢！

Answer 1

最简单的方法是创建第二个页面，其中包含第二组视频大拇指，并使白色箭头图像成为该页面的链接。如果您不想这样，我会使用jQuery替换旧的视频拇指，当然点击白色箭头。

Answer 2

我昨天做了类似的事情用推特来实现这个目标：

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以适合您的模板。应该是非常直接的。