这种幻灯片如何实现？
类似一个九宫格，第一行有三格，第二行一格，第三行三格。如下：
div1 div2 div3
div4
div5 div6 div7
鼠标经过div1 2 3 5 6 7时，div4切换对应的图片。
最好有原代码，且能外部引用，谢谢！
[解决办法]
<!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>
[解决办法]
楼上是用JQUERY实现的。
原理就是用JS修改DIV4下的IMG的SRC属性为为其它DIV下的图片SRC地址。
[解决办法]
这就是鼠标滑过时候为div4中的img或者背景图片动态的改变图片的src的路径
[解决办法]
//图片鼠标滑过
$("#sendBtn_pic").mouseover(
function (){
$(this).attr("src","../source/image/fs_0.jpg");
}
);
//图片鼠标离开
$("#sendBtn_pic").mouseout(
function (){
$(this).attr("src","../source/image/fs.jpg");
}
);