您的位置：首页 > Web前端 > JQuery

焦点图效果，点击小图显示大图

2015-10-24 13:33 731 查看

<!doctype html>
<html>
<head>
<title>焦点图</title>
<meta charset="utf-8">
<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script>
</head>
<body>

<div class="box">
<img src="images/b-1.jpg"/>
<ul class="scroll">
<li><img  value="0" class="current"  src="images/s-1.jpg"/></li>
<li><img  value="1"  src="images/s-2.jpg"/></li>
<li><img  value="1"  src="images/s-3.jpg"/></li>
<li><img  value="1"  src="images/s-4.jpg"/></li>
</ul>

</div>
<script type="text/javascript">
$(function(){
var arrBigImg = new Array();
arrBigImg[0] = "img/b-1.jpg";
arrBigImg[1] = "img/b-2.jpg";
arrBigImg[2] = "img/b-3.jpg";
arrBigImg[3] = "img/b-4.jpg";

$(".arrButton").click(function(){
$(".scroll").animate({"left","-74"},200,function(){
$(".scroll").css("left","0");
$(".scroll li:first").insertAfter($(".scroll li:last"));
});
});

$(".scroll img").mouseover(function(){
var n = $(this).attr("value"); //获取当前的值
(".bigImg").attr("src",arrBigImg
); //对应当前的大图；
$(this).addClass("current").siblings().removeClass("current");

})

});

</script>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： web前端开发 jQuery

相关文章推荐

新的分享

章节导航