这种幻灯片怎么实现
日期：2014-05-16 浏览次数：20386 次
这种幻灯片如何实现？
类似一个九宫格，第一行有三格，第二行一格，第三行三格。如下：
div1 div2 div3
div4
div5 div6 div7
鼠标经过div1 2 3 5 6 7时，div4切换对应的图片。
最好有原代码，且能外部引用，谢谢！
------解决方案--------------------
类似一个九宫格，第一行有三格，第二行一格，第三行三格。如下：
div1 div2 div3
div4
div5 div6 div7
鼠标经过div1 2 3 5 6 7时，div4切换对应的图片。
最好有原代码，且能外部引用，谢谢！
------解决方案--------------------
- HTML code
<!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");
}
);
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
