新蛋网的大图展示效果，缩略图点击显示大图，上一个下一个

最新推荐文章于 2024-07-12 16:27:40 发布
最新推荐文章于 2024-07-12 16:27:40 发布
阅读量51 收藏
点赞数
文章标签： javascript xhtml ViewUI
原文链接：http://www.cnblogs.com/deve/archive/2009/11/17/2242652.html
版权

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<LINK
href="neweggshow/frame091106.css"
type=text/css rel=stylesheet><LINK
href="neweggshow/productList090825.css"
type=text/css rel=stylesheet>
<SCRIPT
src="neweggshow/jQuery-1.3.2.js"
type=text/javascript></SCRIPT>


<SCRIPT
src="neweggshow/WebApplication091103.js"
type=text/javascript></SCRIPT>


<SCRIPT
src="neweggshow/BizProduct091027.js"
type=text/javascript></SCRIPT>


</HEAD>
<BODY>
<DIV id=wrap>
<DIV id=body>
<DIV class=modA id=viewPic>
<DIV class=modBody>
<DIV class=thumb>
<UL>
<LI><A class=current href="javascript:void(0);"><IMG class=Picture40
οnclick=Biz.Product.Image.ChangeBigPic(this,10);
alt=""
src="neweggshow/11-c09-362.jpg"
index="0"
ref1="neweggshow/11-c09-362(1).jpg"></A>
</LI>
<LI><A class="" href="javascript:void(0);"><IMG class=Picture40
οnclick=Biz.Product.Image.ChangeBigPic(this,10);
alt=""
src="neweggshow/11-c09-362-01.jpg"
index="1"
ref1="neweggshow/11-c09-362-01.jpg"></A>
</LI>
<LI><A class="" href="javascript:void(0);"><IMG class=Picture40
οnclick=Biz.Product.Image.ChangeBigPic(this,10);
alt=""
src="neweggshow/11-c09-362-02.jpg"
index="2"
ref1="neweggshow/11-c09-362-02.jpg"></A>
</LI>
<LI><A class="" href="javascript:void(0);"><IMG class=Picture40
οnclick=Biz.Product.Image.ChangeBigPic(this,10);
alt=""
src="neweggshow/11-c09-362-03.jpg"
index="3"
ref1="neweggshow/11-c09-362-03.jpg"></A>
</LI>
<LI><A class="" href="javascript:void(0);"><IMG class=Picture40
οnclick=Biz.Product.Image.ChangeBigPic(this,10);
alt=""
src="neweggshow/11-c09-362-04.jpg"
index="4"
ref1="neweggshow/11-c09-362-04.jpg"></A>
</LI>
<LI><A class="" href="javascript:void(0);"><IMG class=Picture40
οnclick=Biz.Product.Image.ChangeBigPic(this,10);
alt=""
src="neweggshow/11-c09-362-05.jpg"
index="5"
ref1="neweggshow/11-c09-362-05.jpg"></A>
</LI>
<LI><A class="" href="javascript:void(0);"><IMG class=Picture40
οnclick=Biz.Product.Image.ChangeBigPic(this,10);
alt=""
src="neweggshow/11-c09-362-06.jpg"
index="6"
ref1="neweggshow/11-c09-362-06.jpg"></A>
</LI>
<LI><A class="" href="javascript:void(0);"><IMG class=Picture40
οnclick=Biz.Product.Image.ChangeBigPic(this,10);
alt=""
src="neweggshow/11-c09-362-07.jpg"
index="7"
ref1="neweggshow/11-c09-362-07.jpg"></A>
</LI>
<LI><A class="" href="javascript:void(0);"><IMG class=Picture40
οnclick=Biz.Product.Image.ChangeBigPic(this,10);
alt=""
src="neweggshow/11-c09-362-08.jpg"
index="8"
ref1="neweggshow/11-c09-362-08.jpg"></A>
</LI>
<LI><A class="" href="javascript:void(0);"><IMG class=Picture40
οnclick=Biz.Product.Image.ChangeBigPic(this,10);
alt=""
src="neweggshow/11-c09-362-09.jpg"
index="9"
ref1="neweggshow/11-c09-362-09.jpg"></A>
</LI></UL>
<DIV class=clear></DIV></DIV>
<DIV class=slideShow>
<DIV class=img><IMG id=bigImg alt=""
src="neweggshow/11-c09-362(1).jpg"
index="0"></DIV>
<DIV class=control><A class=prevStop id=btnPrev
href="javascript:Biz.Product.Image.MovePrev(10);"></A><A class=next id=btnNext
href="javascript:Biz.Product.Image.MoveNext(10);"></A></DIV>
</DIV>
</DIV>

</DIV></DIV></DIV>


</BODY></HTML>

http://www.corange.cn//uploadfiles/neweggshow_40088.rar

原文地址:http://www.corange.cn/archives/2009/11/3490.html

转载于:https://www.cnblogs.com/deve/archive/2009/11/17/2242652.html

weixin_30535043
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
网页扫描之如何实现缩略图图片同步
purpleshy的专栏
04-01 268
在用Dynamic Web TWAIN开发网页扫描程序的时候，不少朋友可能会需要把扫描的文档从一个图像查看器拷贝到另一个图像查看器，如下图所示： 熟悉这个扫描控件的朋友肯定觉得眼熟。对！它就是软件开发包里自带的一个示例。 function Dynamsoft_OnPostTransfer() { // OnPostTransfer事件在每一张图片扫描后被触发。 ...
Android实现点击缩略图放大效果
08-29
Android 实现点击缩略图放大效果主要是通过使用动画来实现从小图到大图的平滑过渡。下面是实现该效果的关键知识点： 1. 使用 AnimatorSet 来实现动画组合 在 Android 中，可以使用 AnimatorSet 来实现动画组合。...
20条技巧，让Chrome超越Firefox
nyist327的专栏
03-26 1102
20条技巧，让Chrome超越Firefox (2010-11-16更新) 作者: 善用佳软　　日期: 2010-11-16　　分类: 浏览器　　 标签: Chrome, Firefox 2010-11-16: 重写引言；新增目录；更新1-5的文字及配图。 Firefox 浏览器是很多人心中的经典。除了从NetScape开始的传奇色彩、对抗IE的英雄形象之外，在技术方面，Fi
20条技巧，让Chrome超越Firefox (2010-11-16更新)
boyhailong的专栏
04-14 1350
作者: 善用佳软　　日期: 2010-11-16　　分类: 浏览器　　 标签: Chrome, Firefox 2010-11-16: 重写引言；新增目录；更新1-5的文字及配图。 Firefox 浏览器是很多人心中的经典。除了从NetScape开始的传奇色彩、对抗IE的英雄形象之外，在技术方面，Firefox 最被人称道的就是极为丰富的扩展、极强的定制性。只要愿意花时间，用户可以
2012年4月份第2周51Aspx源码发布详情
weixin_30381317的博客
04-16 113
基于MVC通用商用企业站源码2012-4-13 [VS2010+SQL2005]源码描述：运行环境：VS2010SQL2005基于最新的mvc技术设计的三层架构。浏览器兼容：兼容各种主流浏览器。技术特点：MVC3，产品设计弹性力度很小，很难满足用户的变化性需求。MVC要求对应用分层，虽然要花费额外的工作，但产品的结构清晰，产品的应用通过模型可以得到更好地体现。三层架构开发，...
js缩略图控制大图上下滚动特效
04-07
当用户点击一个缩略图时，对应的事件监听器会被触发，执行预设的切换大图的函数。 4. **图片切换**：实现图片的切换通常需要改变`<img>`标签的`src`属性或者使用CSS来改变`background-image`。在上下滚动特效中，...
JS点击缩略图整屏居中放大图片效果
10-19
今天开发的时候，遇到要点击缩略图之后居中显示图片的大图查看（大致效果如上图所示）~想了好几种实现方式,下面通过本文给大家分享JS点击缩略图整屏居中放大图片效果，需要的朋友参考下吧
jQuery点击缩略图显示大图切换效果代码.zip
07-05
"jQuery点击缩略图显示大图切换效果代码"是利用jQuery实现的一种常见网页交互功能，通常应用于产品展示、图片画廊或者网站的焦点图模块。这个功能可以让用户在点击缩略图后，以更清晰、更大的形式查看相应的图片，并...
jQuery点击缩略图切换大图代码.zip
07-11
本项目“jQuery点击缩略图切换大图代码”正是利用jQuery的特性，为用户提供了一种简单而直观的图片查看方式，通过点击左侧的缩略图来切换右侧显示的大图。下面将详细讲解这个功能的实现原理和关键代码。 首先，我们...
更新商品前端接口编写
最新发布
weixin_55639995的博客
07-12 347
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
vue2 实现原生 WebSocket
weixin_38797742的博客
07-11 378
原生WebSocket： new WebSocket。
vue 自定义滚动条同步拖动（移动端）
u014206461的博客
07-12 178
vue 自定义滚动条同步拖动（移动端）
Webkit简介以及工作流程
读心悦
07-10 332
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
在项目中，如何使用springboot+vue+springsecurity+redis缓存+Axios+MySQL数据库+mybatis
huanghm88的专栏
07-11 692
在Spring Boot中，可以使用Spring Data JPA和MyBatis来配置MySQL数据库。在Vue项目中，可以创建一个config.js文件来配置后端的API地址，然后在需要发送请求的地方使用Axios发送请求。根据业务需求，在Spring Boot中编写相应的接口和服务层代码，包括数据访问、业务逻辑等。在Vue中，可以使用Axios发送HTTP请求，并将响应的数据展示在前端页面上。分别启动后端的Spring Boot应用和前端的Vue应用，访问前端页面，就可以看到与后端进行通信的效果。
vue2 、 vue3首屏优化，减少白屏时间
m0_56104994的博客
07-09 317
vue2、vue3首屏优化,减少白屏时间
前端 JS 经典：迭代器
weixin_64684095的博客
07-12 204
如果在最后一个值返回后再调用 next()方法，那么返回的对象中属性 done 的值为 true，属性 value 则包含迭代器最终返回的值（如果没有相关数据则返回 undefined）。可迭代对象具有 Symbol.iterator 属性，通过指定的函数可以返回一个作用于附属对象的迭代器。JavaScript 中有一些内置的可迭代对象，如数组、字符串、集合（Set）、映射（Map）等，它们都具有默认的迭代器。在 JavaScript 中，迭代器是一个对象，它定义了一个序列，并在终止时可能返回一个返回值。
Vue3 使用 Vue Router 时，prams 传参失效和报错问题
专注基础架构领域
07-12 491
我尝试使用 prams 传递数据当我跳转页面时,得到的 prams 数据为空 ,控制台也出现了 Vue Router 的警告点开链接后发现了原因,。也就是说，从Vue Router的2022-8-22 这次更新后，我们使用上面的方式在新页面无法获取：vue也给我们提出了解决方案：使用 query 的方式传参只要改成query 传参就好了,注意query传参只能用路由表中的 path ,不是 name ,并且所有参数都会显示在URL 地址上。将参数放在 pinia 或 vuex仓库里。
jQuery 轮播图 一个大图 下面显示五张缩略图 共8张图
04-06
以下是一个基本的jQuery轮播图示例，包括一个大图和五张缩略图： HTML代码： ```html <div class="slide"><img src="image1.jpg"> <div class="slide"><img src="image2.jpg"> <div class="slide"><img src=...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值