js点击小图完成大图切换

思路：遍历伪数组，给四张小图绑定单击事件，让当前被单击的小图的src属性值赋给大图的src属性值，让小图的title的属性值，赋给下侧文本内容。

步骤：

1、页面的搭建

2、获取元素

3、遍历伪数组

4、给四个小美女绑定单击事件

5、把事件源的src属性值赋给大图的src属性值

6、把事件源的title属性值赋给标题的innerText属性值

重要步骤：

// 获取小图

var smallPic = document.getElementById("smallPicObj").getElementsByTagName("img");

// 获取大图

var bigPic = document.getElementById("bigPic");

具体代码:

<style>div img{width: 150px;}img{width: 600px;}
</style><body><h2>美女画廊</h2><div><img class="smallImg" src="./img/1.jpg" alt="" title="美女A"><img class="smallImg" src="./img/2.jpg" alt="" title="美女B"><img class="smallImg" src="./img/3.jpg" alt="" title="美女C"><img class="smallImg" src="./img/4.jpg" alt="" title="美女D"></div><img class="bottomImg" src="./img/1.jpg" alt="" title="美女A"><h3>美女A</h3>
</body><script>//获取dom 添加点击事件//处理程序：点击时把下面的img的src属性设置为上面的图片srcvar list = document.getElementsByClassName("smallImg")for(var i = 0;i<list.length;i++){list[i].onclick = function(){document.getElementsByClassName("bottomImg")[0].src=this.srcdocument.querySelector("h3").innerHTML = this.title}}
</script>

js点击小图完成大图切换相关推荐

功能强大漂亮的js图片相册,js点击小图显示大图
原生js点击图片触发弹窗页面显示模糊的小图片(small_X.jpg),点击全屏显示高清大图片(large_X.jpg) 可实现放大.缩小.拖拽.旋转.上一张.下一张以下为demo相关页面展示: ...
php图片点击查看大图,jQuery点击小图看大图，大图查看内容详情所有图片
jQuery点击小图看大图,大图查看内容详情所有图片: html代码如下: × < > CSS代码如下: * { margin:0; padding:0; } body { overflo ...
点击小图查看大图的定位功能
用户点击小图一般是要查看小图放大后的大图,或者鼠标移到小图后想要查看详细的信息的大图,这时候要考虑大图的定位问题,以下代码可以参考(需要引入 jq ): // 小图大图定位$(document). ...
js点击图片查看大图，并可以拖动，且滚动滑轮放大缩小
方法一:此方法在页面没有滚动条时无法缩放 JQuery function hideMax(){$(".MAX_div").remove();$("#Cover_Div&q ...
js点击左右按钮来切换多张图片
var _thtml=""; var imgs=data.img.split(","); _thtml+="<img id='t1' class ...
html页面点击小图弹出大图代码,利用JS实现点击小图弹出大图代码
特效描述:利用JS实现点击小图弹出大图代码.利用JS实现点击小图弹出大图代码代码结构 1. HTML代码 (function(){ var LightBox = function(options ...
php 大图找小图,点击小图弹出大图,点击网页任何部分隐藏大图
点击小图弹出大图,点击网页任何部分隐藏大图 left: 0; right: 0; display:none; bottom: 0; background-color: #000; opacity: . ...
用 JS 点击左右按钮使图片切换 - 最精简版-ljx2380000-ChinaUnix博客
用 JS 点击左右按钮使图片切换 - 最精简版-ljx2380000-ChinaUnix博客代码部分: 点击(此处)折叠或打开 <!DOCTYPE html PUBLIC "-// ...
js实现点击按钮图片自动切换_☆往事随風☆的博客
文章目录前言一.基本思路二.代码分析 1.创建数组保存图片的存储路径 2.获取按钮对象 3.调用定时器 4.关闭定时器三.整体代码四.效果展示前言利用js实现一个图片自动切换的功能. 一 ...

js点击小图完成大图切换

js点击小图完成大图切换相关推荐

最新文章

热门文章