想实现图片的效果,鼠标点击一张图片在上面就显示那张图片的大图。。不知道如何实现,完全没有想法

如图

下面小图添加onclick事件,onclick事件中把上面大图img.src = 当前小图的src

直接看人家网站的源代码就知道了

小图片绑定点击动作,触发大图直接换图片,这样可以吗?

获取点击的图片大图显示到上面就OK

把大图设置好 隐藏状态 点击小图激活显示大图?

$(function () {
$(".pimg").click(function () {
var _this = $(this);//将当前的pimg元素作为_this传入函数
imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
});
}
//html部分加入下面代码

$(function () {
$(".pimg").click(function () {
var _this = $(this);//将当前的pimg元素作为_this传入函数
imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
});
}

https://www.cnblogs.com/manzai520/p/5960558.html

选中图片后在下面的属性栏里做大图或新图片的连接呢

你可以通过替换上面的那个图片的路径,鼠标移在下面的图片上的时候 就把当前鼠标所在的那张图片的路径给到上面大的图片那里就好了

用jquery很好实现,页面进入时隐藏(hide)大图,当点击小图时(show)出大图

加载JSP代码实现,网上有很多教程。。


funciton a(obj)
{
$('.img').attr('src',$(obj).attr('attr-href'))
}

html 还有一句发出来 显示发不了 反正就是 给img 加一个属性 attr-hrerf=“ 显示图片的路径”

http://sc.chinaz.com/tag_jiaoben/tupianlunbo.html
这个网站里有各种js图片轮播特效,下载下来加到自己的网站里就可以了












$(function (){ //设置默认值 var defaultSrc=$("#smallImg>li:first>img").attr("src"); $("#showBig>img").attr("src",defaultSrc); $("#smallImg>li>img").click(function(){ var clickSrc=$(this).attr("src"); $("#showBig>img").attr("src",clickSrc); }) })

<!DOCTYPE html>



ImageShowBig
<br> *{<br> margin: 0;<br> padding: 0;<br> border: none;<br> }<br> #showBig&gt;img{<br> width:600px;<br> }<br> #smallImg&gt;li{<br> list-style: none;<br> float:left;<br> margin-left: 10px;<br> }<br> #smallImg&gt;li&gt;img{<br> width:190px;<br> }<br>












$(function (){ //设置默认值 var defaultSrc=$("#smallImg>li:first>img").attr("src"); $("#showBig>img").attr("src",defaultSrc); $("#smallImg>li>img").click(function(){ var clickSrc=$(this).attr("src"); $("#showBig>img").attr("src",clickSrc); }) })