利用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> /// < ...
随机推荐
- Problem D. Dwarf Tower spfa
http://codeforces.com/gym/100269/attachments 首先建图,然后图中每条边的权值是会变化的,是由dis[x] + dis[y] ---> dis[m ...
- 6 - 编码解码器-一种channelHandler
6.1 解码器 6.1.1 抽象类-ByteToMessageDecoder decode(ChannelHandlerContext ctx, ByteBuf in, List<Object& ...
- 一个简单的CI分页类
[php] view plaincopy <span style="font-size:16px;">/** * * 关于 页码有效性的判断需要加在 控制器中判断,即当 ...
- 关于docker下容器和宿主机器时间不一致问题
在前几天,在阿里云的ECS上部署一个docker应用时,发现部署的应用在请求第三方应用时,一直出现超时的异常提示,刚开始以为是第三方应用系统的问题(此系统无赖躺枪,反正也不是一次两次了,多躺几次也就习 ...
- 自定义列表dl
语法格式 <dl> <dt>名词1</dt> <dd>名词1解释1</dd> <dd>名词1解释2</dd> ... ...
- css3动画-加载中...
写几个简单的加载中动画吧. 像前面三种都是相当于几个不同的点轮流来播放同一动画:变大变小.css3里面有一个用于尺度变换的方法:scale(x,y):定义 2D 缩放转换,改变元素的宽度和高度. 第四 ...
- visual studio2010中C#生成的,ArcGIS二次开发的basetool的dll,注册为COM组件tlb文件,并在arcmap中加载使用
写了个标题好长啊~~~~ 这两天又认识了一个新玩意,记录一下下,啦啦啦~~~~~ 话说,认识arcgis快十年了,从桌面版到engine的二次开发,其实不过才认识到它的冰山一角, 它总是能带来很多还未 ...
- VS中生成网站和发布网站的区别
VS中生成网站和发布网站的区别 生成网站:是网站项目的编译. 我们知道像一样的C#编译性语言,在运行程序的时候,首先都要经过编译成计算机识别的二进制代码,才能运行.还有网站编译后,浏览 ...
- grunt + sass 使用记录
环境依赖 Nodejs for grunt Ruby for sass 配置文件 package.json { "name": "app", "ver ...
- C#问题记录-CallbackOnCollectedDelegate
做项目的时候遇到了这个问题: 检测到:CallbackOnCollectedDelegate 对“xx.HookProc::Invoke”类型的已垃圾回收委托进行了回调.这可能会导致应用程序崩溃.损坏 ...