css和js怎么控制html点击一张小图片就显示一张大图片?

就像网页里的大图片下面有小图片,点击小图片就会出大图片,再点一张小图片又出一张大图片,就像这样
点击这个望远镜就会的图片就会出现这个望远镜的大图片
还望指教

第一种方法:
将三张大图放在div里面,这三个div大小还有别的属性都一样,但是默认是隐藏的,
display:none;隐藏
display:block;显示
然后点击一张图片,对应的大图div显示出来,点击第二张,第一个大图div隐藏,第二个大图div显示。

第二种方法,只有一个大的div,里面放<img>标签,但是src也就是路径是空的,然后当你点击第一个小图的时候,给这个img标签的src赋值,也就是第一个大图的路径,点击第二个,路径变更。

第三种,去网上找找这样的源代码,图片轮转。好多源代码 各种样式的都有。

希望能帮助到你
温馨提示:内容为网友见解,仅供参考
第1个回答  2014-11-13
看下这里是不是有你想要的效果,应该是第6个效果

http://blog.ui90.com/12-lightbox-plugins.html

css和js怎么控制html点击一张小图片就显示一张大图片?
第一种方法:将三张大图放在div里面,这三个div大小还有别的属性都一样,但是默认是隐藏的,display:none;隐藏 display:block;显示 然后点击一张图片,对应的大图div显示出来,点击第二张,第一个大图div隐藏,第二个大图div显示。第二种方法,只有一个大的div,里面放<img>标签,但是src也就是路...

在html中怎么用js实现鼠标指向图片时图片放大到原图那么大?(具体实现...
1、新建html文档,在body标签中添加图片标签,为这个标签设置“id”属性,然后设置图片的默认显示大小css属性:2、添加“onmouseover”js事件,首先使用“document.getElementById”获取到图片标签,然后定义鼠标移动到图片上时发生的事件,这时图片将会放大:3、添加“onmouseout”js事件,首先获取图片标签,然后...

html页面里面如何实现点击小图放大查看大图
1、首先,打开html编辑器,新建html文件,例如:index.html。2、在index.html中的<style>标签中,输入css代码:div {width: 72px;height: 72px;background: url(small3.png) no-repeat;overflow: hidden;} 3、浏览器运行index.html页面,此时成功将矩形图片只显示了正方形部分。4、点击小图后,成...

完全用css控制鼠标移到小图片上在上边显示大图片
你为这个呀,可以到是可以。只不过在ie6及其以前的版本上是不可以的。给你一个代码,你自己看吧。把自己的图片换一下就可以了。<!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN" " http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd"> <html xmlns=" http:\/\/ww...

html鼠标点击切换图片?
2、原理:使所有的图片隐藏然后控制对应的图片显示。初始化:现将所有的图片隐藏控制第一张显示。(可通过css实现)。过程:当鼠标经过数字的时候,先控制所有的图片全部隐藏,控制数字对应的图片显示即可。3、第一步:将N张图片去排版定位。第二步:现在已经知道了这3张图片的位置,接下来就是去点击它...

HTML,当我鼠标移动到小图片上面的时候,鼠标后面就显示大图片?
<script src="..\/javascripts\/ToolTip.js" type="text\/javascript"><\/script> 最后把图片绑定到a标记就可以了:<a href="<%#DataBinder.Eval(Container.DataItem,"imageBigUrl") %>" class="tooltip"> \/\/大图片提示 <asp:ImageButton ID="image1" runat="server" ImageUrl='<%#DataBinder....

如何在做网站时,点击某张图片弹出来大图,使用layer轻松解决
首先,确保你已经安装了layui框架。接下来,将layui的CSS和JS文件引入到需要使用该功能的页面中。在需要弹出原图的图片标签上添加一个`onclick`事件,你可以自定义方法名。在该事件中,你需要获取原图的地址,并将其作为参数传递。这样,在点击图片时,系统能够获取到正确的原图链接。使用`layer`组件中的...

js+css鼠标移动图片放大 你以前问过的 ,正在找这个效果
1、利用css制作:<a href='#'> <img src='' \/> <p>...<\/p> <\/a> a img { width:100px; height:100px;} \/\/这里的值可以自己设定 a:hover img { width:120px; height:120px; } \/\/这里就是a的hover时img大小 将hover加在a上而不是img,是因为ie6只支持a的hover选择器...

html怎么实现当鼠标经过一个图片时显示另一张图片
1、准备切换图片素材,一般是两张,如图,放入img文件夹,跟HTML同级。2、然后用img嵌入到网页,嵌入其中的一张,另外一张待会切换。3、如图,现在是静态的,鼠标放上去也不会产生切换反应,因为没有用JS。4、如图,获取img,转成JS对象,加个[0]就可以转js对象了。5、然后设定经过事件,切换成另一...

如何编写html代码控制图片显示的大小?
1、首先新建一个HTML页面,这里命名为“new_file.html”2、接着给标签设置背景图片,例如设置的是<body>标签。3、接着新建一个css文件,如图,命名为“1.css”4、这里给body标签设置background-size属性,如果标签是div就写div,然后可以设置宽度和高度。5、如图所示,在new_file.html里面写上这个:<...

相似回答