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

最新推荐文章于 2021-06-03 05:33:11 发布

阿聪世家

最新推荐文章于 2021-06-03 05:33:11 发布

阅读量927

点赞数

分类专栏：网站常用jquery效果文章标签： web前端开发 jQuery

本文链接：https://blog.csdn.net/congcong875/article/details/49384431

版权

网站常用jquery效果专栏收录该内容

52 篇文章 0 订阅

订阅专栏

<!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>

阿聪世家

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
焦点图效果，点击小图显示大图

焦点图 $(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]
复制链接

扫一扫

专栏目录