利用DOM的方式点击切换图片及修改文字
本案例主要学习理解,用到的几个DOM方法
01、getAttribute()方法,获取元素的属性值
02、setAttribute('src',source) 方法,用后边的值修改前边这个元素的属性值
html基本框架代码
<h1>图片点击切换</h1>
<ul id="imagegallery">
<li><a href="images/654.jpg" title="图片一说明">图片一</a></li>
<li><a href="images/contentimg.jpg" title="图片二说明">图片二</a></li>
<li><a href="images/tuku.jpg" title="图片三说明">图片三</a></li>
</ul>
<img src="data:images/toutiao3.jpg" alt="占位图" id="img">
<p id="description">图片说明</p>
js相关代码
实现的思路分解:
01、用getAttribute()方法获取到a标签的href的属性值
02、用document.getElementById()方法获取到图片
03、用setAttribute('要修改的元素属性',用href的值修改)
点击修改图片基本思路就是这样。
修改文字的思路,这里为了练习dom的相关方法,没有使用innerHTML方法
01、用getAttribute()方法获取到a标签的title的属性值
02、获取要修改的id
03、获取p元素的第一个文本节点的值 用到firstChild.nodeValu获取
04、我们把获取到的title的属性值赋值给03步骤的变量
function showpic(winpic){
if(!document.getElementById('img')) return false;
var source = winpic.getAttribute('href');
var oImg = document.getElementById('img');
if(oImg.nodeName !='IMG') return false;
oImg.setAttribute('src',source);
if(document.getElementById('description')){
var description = document.getElementById('description');
var text = winpic.getAttribute('title');
description.firstChild.nodeValue = text;
//description.innerHTML = text;
}
return true;
} function prepareGallery(){
if(!document.getElementsByTagName) return false;
if(!document.getElementById) return false;
if(!document.getElementById('imagegallery')) return false;
var gallery = document.getElementById('imagegallery');
var links = gallery.getElementsByTagName('a');
for(var i=0;i<links.length;i++){
links[i].onclick = function(){
//return showpic(this) ? return : false;
showpic(this);
return false;
}
}
} prepareGallery();
利用DOM的方式点击切换图片及修改文字的更多相关文章
- jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片(仿相册插件)
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...
- 一个Android上的以滑动揭示的方式显示并切换图片的View
SlideView是一个Android上的以滑动揭示的方式显示并切换图片的View,以视觉对比的方式把一套相似的图片展示出来. 示例 翻页图片揭示效果: 特性 设置一组(List<ImageIn ...
- 22.用demo通过点击切换图片路径
用demo通过点击切换图片路径 html: <img src="images/driving.png" class="driving"/> js: ...
- 利用jQuery无缝滚动插件liMarquee实现图片(链接)和文字(链接)向右无缝滚动(兼容ie7+)
像新闻类的版块经常要求一条条的新闻滚动出现,要实现这种效果,可以使用jQuery无缝滚动插件liMarquee. 注意: 1. 它的兼容性是IE7+,及现代浏览器. 2. 引用的jquery的版本最好 ...
- JS原生隐藏显示图片,点击切换图片的效果
今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生JS代码, 我先说一下要求, 1.有两个按钮,内容为显示,和换, 2.当点击显示的时候,按钮文字变成隐藏,同时图片 ...
- 一起学HTML基础-利用CSS和JavaScript制作一个切换图片的网页
由于个人原因,不详细写步骤 思路: 一.布局 二.制作图片区和按钮区的div及颜色.边框.背景属性等 三.用PS将四张图片剪切到同一个尺寸,重叠放置在图片切换区,透明度设置为0 四.点击对应按钮时,将 ...
- Android之点击切换图片
package com.example.SlidePictures; import java.util.Timer; import java.util.TimerTask; import com.ex ...
- Fragment 回退栈 传递参数,点击切换图片使用Fragment ListView
Fragment回退栈 类似与Android系统为Activity维护一个任务栈,我们也可以通过Activity维护一个回退栈来保存每次Fragment事务发生的变化. 如果你将Fragment任务 ...
- C# 使用PictureBox控件--点击切换图片
效果: 1. 2. 代码: private Boolean fals = true; /// <summary> /// 单击事件 /// </summary> /// < ...
随机推荐
- SPOJ 3267: DQUERY 树状数组,离线算法
给出q个询问,询问一段区间里面的不同元素的个数有多少个. 离线做,用树状数组. 设树状数组的意义是:1--pos这个段区间的不用元素的种类数.怎么做?就是add(pos,1);在这个位置中+1,就是说 ...
- Linux Shell 中数组的语法及应用
#!/bin/sh## 数组的声明与初始化方法# 先声明后赋值:declare -a arrayarray=(one two three) # 声明并初始化:array_1=(1 2 3 four) ...
- RabbitMQ:消息发送确认 与 消息接收确认(ACK)
默认情况下如果一个 Message 被消费者所正确接收则会被从 Queue 中移除 如果一个 Queue 没被任何消费者订阅,那么这个 Queue 中的消息会被 Cache(缓存),当有消费者订阅时则 ...
- 进程的基础理论、并发(multiprocessing模块)
一.粘包优化方案 之前我们解决粘包的方式是用struct模块来制作一个报头,但是这个解决的方案是有漏洞的,当我们需要传送的文件大于2g时将会报错.所以我们今天将用json来制作报头. from soc ...
- python基础之循环语句
一.if条件语句: 语法: 1.if单分支(单重条件判断) if expression: expr_true_suite 注释:expession为真执行代码expr_true_suite if单分支 ...
- 牛客NOIP提高组(三)题解
心路历程 预计得分:$30 + 0 + 0 = 30$ 实际得分:$0+0+0= 0$ T1算概率的时候没模爆long long了... A 我敢打赌这不是noip难度... 考虑算一个位置的概率,若 ...
- DELL R730安装ESXI虚拟化
dell安装esxi需要dell官方提供的镜像文件地址:http://www.dell.com/support/article/us/en/04/SLN290857/dell%E5%AE%9A%E5% ...
- thinkphp分页+条件查询
最近项目上面有一个带条件查询的分页列表,一开始form用的post,点击第二页就没有跳转成功,原因是分页是get请求,post数据链接到其他页面就会被清除. 解决办法: 1.form表单method= ...
- JS整数验证
整数验证 方法1 function ValidatInteger(obj) { var reg = /^[1-9]\d*$/ if (!reg.test($(obj).val())) { $(obj) ...
- leetcode——2
1. 题目 Add Two Numbers You are given two linked lists representing two non-negative numbers. The digi ...