javaweb前端点击小图切换大图

转载 2015年11月18日 12:26:24


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript"  src="jquery.js"></script>
<script type="text/javascript">
$(function(){
 $("#smaPic a").click(function(){
  var largePath = $(this).attr("href");
  $("#bigPic").attr({ src: largePath});  return false;
 });
});
</script>
<style type="text/css">
body,ul{ padding:0; margin:0;}
ul{ list-style:none;}
#showPic{width:650px; height:600px; margin-left:30px auto;}
#bigPic{ width:550px; height:400px;border:1px solid #999; padding:3px; margin-left:27px;}
#smaPic li{ width:100px; height:100px; float:left; margin-left:10px;}
#smaPic li img{ border:none; border:1px solid #666; padding:2px;}
</style>

</head>
<body>
 <div id="showPic">
 <p><img id="bigPic" src="images/img1-lg.jpg"/></p>
 <ul id="smaPic">
  <li><a href="images/img2-lg.jpg"><img src="images/img2-thumb.jpg" /></a></li>
  <li><a href="images/img3-lg.jpg"><img src="images/img3-thumb.jpg" /></a></li>
  <li><a href="images/img4-lg.jpg"><img src="images/img4-thumb.jpg" /></a></li>
  <li><a href="images/img5-lg.jpg"><img src="images/img5-thumb.jpg" /></a></li>
  <li><a href="images/img6-lg.jpg"><img src="images/img6-thumb.jpg" /></a></li>
 </ul>
 </div>
</body>
</html>

jquery小图片左右滚动点击小图切换显示大图

一、我的资源中,有源码可以下载。 二、productDetailImage2.js,也可为以下方法实现 $(document).ready(function (){ //点击小图切换大图 ...
  • Liucheng417
  • Liucheng417
  • 2015年12月10日 11:30
  • 1454

分享一个点击小图切换大图的jquery,并说明一下原理

怎么才能实现点击小图切换大图呢? 首选我说一下思路,当点击小图的时候触发一个事件,当然小图有个big的路径,点击获取小图的big,然后根据大图的id,把获取big赋值给大图的src。思路就是这样,下...
  • u010674395
  • u010674395
  • 2015年01月20日 19:11
  • 3121

js触碰小图换大图

.datu{ width:504px; height:480px; cursor:pointer;}  .datu img{ width:504px; height:480px;}  ....
  • u013728512
  • u013728512
  • 2014年02月22日 09:51
  • 809

js点击小图预览大图

function imgShow(_this){      var src = _this.attr("src");      $("#bigimg").attr("src", src);   ...
  • zyc922
  • zyc922
  • 2016年02月03日 16:33
  • 945

JQ实现点击小图显示大图

JQ实现点击小图显示大图代码块js,例如: /*图片*/ $('.imgJs').each(function() { var imgHeight = $(this).heigh...
  • wwj791859814
  • wwj791859814
  • 2017年08月12日 16:16
  • 495

点击小图显示大图JS效果插件

jQuery plugin : Fancy Zoom Author : DFC Engineering License : GPL Release version : 1.5 Releas...
  • youaregoo
  • youaregoo
  • 2013年05月28日 16:14
  • 2198

小图轮播对应显示大图

自动轮播图     .dpcphdp{position: relative;overflow: hidden;width: 100%;margin-top: 10px;float: left...
  • a772116804
  • a772116804
  • 2017年12月13日 15:24
  • 91

web前端 点击显示大图效果实现

$(function(){ $(".pimg").click(function(){ var _this = $(this);//将当前的pimg元素作为_this传入函数 imgShow("#...
  • playboy5566
  • playboy5566
  • 2017年03月16日 11:11
  • 409

《大图里面找小图》的一种解决方案[并不特别完美]

前些天在论坛上发了以下一篇文章《大图里面找小图啊找小图~~~~~[求助思路]》,目的是从大图中找出某一张小图片的数量和位置信息。也许是真的没有什么好办法吧,最终我也就用自己想出来的一个不那么效率的方法...
  • BoweirrKing
  • BoweirrKing
  • 2007年12月20日 13:54
  • 3217

每天一个JavaScript实例-点击图片显示大图添加鼠标操作

每天一个JavaScript实例-点击图片显示大图添加鼠标操作 img{padding:5px;width:100px;height:auto;} #outer{ width:100%; ...
  • waiting7436
  • waiting7436
  • 2014年10月31日 16:50
  • 992
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javaweb前端点击小图切换大图
举报原因:
原因补充:

(最多只允许输入30个字)