求js 点击小图上面的大图跟着变
如图，点击下面的小图上面的大图跟着改变，获得焦点的图片透明度变为100%，无焦点的透明度60%。怎么做啊各位大神...
如图，点击下面的小图上面的大图跟着改变，获得焦点的图片透明度变为100%，无焦点的透明度60%。怎么做啊各位大神
展开
2个回答
展开全部
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<title> New Document </title>
<script src="jquery.js"></script>
<script>
$().ready(function(){
//下面三行是初始化页面时，默认1的透明度是100%；2，3的透明度是60%。
$('#pica').css('opacity', '1.0');
$('#picb').css('opacity', '0.6');
$('#picc').css('opacity', '0.6');
initevent();
});
//页面加载时为小写1，2，3注册单击事件。
function initevent(){ $('span').each(function(){
$(this).click(function(){//当点击发生时
//下面五行的作用是，当单击事件发生时，默认将所有小写1，2，3透明度变成60%。
$('span').each(function(){
$('#pica').css('opacity', '0.6');
$('#picb').css('opacity', '0.6');
$('#picc').css('opacity', '0.6');
});
//这行就是当单击事件发生时，对应提示也改变的代码了。你是图片，道理也是一样的。
$('#bigpic').text($(this).html());
$(this).css('opacity', '1.0');//这行的作用是，被单击的那个透明度编程100%
});
});
}
</script>
</head>
<body> <div id="bigpic">1</div>
<span id="pica">1</span> <span id="picb">2</span> <span id ="picc">3</span> </body>
</html>
我这边用的是数字，你将他换成你的图片就可以了。上面代码我已经运行，是可以的（注意要把jquery库引入）。
<head>
<title> New Document </title>
<script src="jquery.js"></script>
<script>
$().ready(function(){
//下面三行是初始化页面时，默认1的透明度是100%；2，3的透明度是60%。
$('#pica').css('opacity', '1.0');
$('#picb').css('opacity', '0.6');
$('#picc').css('opacity', '0.6');
initevent();
});
//页面加载时为小写1，2，3注册单击事件。
function initevent(){ $('span').each(function(){
$(this).click(function(){//当点击发生时
//下面五行的作用是，当单击事件发生时，默认将所有小写1，2，3透明度变成60%。
$('span').each(function(){
$('#pica').css('opacity', '0.6');
$('#picb').css('opacity', '0.6');
$('#picc').css('opacity', '0.6');
});
//这行就是当单击事件发生时，对应提示也改变的代码了。你是图片，道理也是一样的。
$('#bigpic').text($(this).html());
$(this).css('opacity', '1.0');//这行的作用是，被单击的那个透明度编程100%
});
});
}
</script>
</head>
<body> <div id="bigpic">1</div>
<span id="pica">1</span> <span id="picb">2</span> <span id ="picc">3</span> </body>
</html>
我这边用的是数字，你将他换成你的图片就可以了。上面代码我已经运行，是可以的（注意要把jquery库引入）。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
提供一个思路：
1，大图片和小图片为同一图片，只不过尺寸不一样（等比缩放）
2，点击小图片的时候可以使用js动态的改变大图片的路径
3，透明度通过图片样式就可以达到你要的要求
1，大图片和小图片为同一图片，只不过尺寸不一样（等比缩放）
2，点击小图片的时候可以使用js动态的改变大图片的路径
3，透明度通过图片样式就可以达到你要的要求
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
