<!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[n]); //对应当前的大图;
$(this).addClass("current").siblings().removeClass("current");
})
});
</script>
</body>
</html>
焦点图效果,点击小图显示大图
最新推荐文章于 2021-05-11 19:24:12 发布