这种幻灯片如何实现？

类似一个九宫格，第一行有三格，第二行一格，第三行三格。如下：
div1   div2    div3
div4
div5   div6    div7鼠标经过div1 2 3 5 6 7时，div4切换对应的图片。最好有原代码，且能外部引用，谢谢！

解决方案 »

  1.   


    <!DOCTYPE html>
    <html>
        <head>
    <style>
    div{
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
    }
    .d{
    float: left;
    }
    .clear{
    clear: both;
    }
    #ct{
    width: 310px;
    border: none;
    margin: 0 auto;
    }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(function() {
    $('.d').mouseover(function(e) {
    if(!$('#div4>img')[0])
    $('#div4').append('<img>');
    var img = $('#div4>img');
    img.attr('src',$(this).find('img').attr('src'));
    });
    })
    </script>
        </head>
        <body>
    <div id="ct">
    <div id="div1" class="d">
    <img src="http://i1.ymfile.com/uploads/productimages/10/25/s_1025141945186018.jpg"/>
    </div>
    <div id="div2" class="d">
    <img src="http://i1.ymfile.com/importimg/s_628c788c8238fdc88a60270a6004ae6d.jpg"/>
    </div>
    <div id="div3" class="d">
    <img src="http://i1.ymfile.com/importimg/s_6eb040e278a255a8d2496fbe69cec3df.jpg"/>
    </div>
    <div id="div4" class="clear" style="margin-left:100px;"></div>
    <div id="div5" class="d">
    <img src="http://i1.ymfile.com/importimg/s_c2a5baf320a0e15ff71b0b440853a813.jpg"/>
    </div>
    <div id="div6" class="d">
    <img src="http://i1.ymfile.com/importimg/s_f2a931051806cb41137a3244fb4469a5.jpg"/>
    </div>
    <div id="div7" class="d">
    <img src="http://i1.ymfile.com/uploads/product/10/26/s_1026102319515198.jpg"/>
    </div>
    </div>
    </body>
    </html>
      

  2.   

    楼上是用JQUERY实现的。
    原理就是用JS修改DIV4下的IMG的SRC属性为为其它DIV下的图片SRC地址。
      

  3.   

    这就是鼠标滑过时候为div4中的img或者背景图片动态的改变图片的src的路径
      

  4.   


    谢谢！
    小贪婪一下：
    第二行的div下套了六个层，分别对应1 2 3 5 6 7，同时每个层中又包含两个div，左右各一个，左边是图片，右边是文字说明。不全部使用图片主要是出于方便搜索引擎爬字的考虑。
    第二行div中的六个层，设置为position: absolute，这样六个层可以叠在一起，不超出父层div。
    页面最初加载时，可以加载所有图层，然后通过JS脚本，当鼠标移动到div1, 2, 3, 5, 6 ,7时，使用onmouseover控制此6个内嵌图层是否显示哪一个。能否实现？谢谢！
      

  5.   

    有一个比较笨的办法就是在1 2 3 5 6 7的onmouseover中加入JS脚本，分别对div4的6个内嵌图层进行控制，但这也确实是太笨了
      

  6.   

    //图片鼠标滑过
    $("#sendBtn_pic").mouseover(
    function (){
    $(this).attr("src","../source/image/fs_0.jpg");
    }
    );
    //图片鼠标离开
    $("#sendBtn_pic").mouseout(
    function (){
    $(this).attr("src","../source/image/fs.jpg");
    }
    );