轻松实现JavaScript图片切换
2016-01-12 00:00
736 查看
本文实例为大家介绍JavaScript图片切换的实现方法,分享给大家供大家参考,具体内容如下
效果图:
网页看到非常常见的一个图片切换效果:在淘宝、JD等购物时,介绍产品的图片会有多张,一般是显示一张,底下有一排小图片,鼠标放到小图片上大图片会切换.参考vivo X5M 移动4G手机 .下面记录一下实现的过程.
1. getElementById()
该方法是操作dom非常常用的一个方法,比如有一p标签,id设为pid,通过getElementById(“pid”)就可以对该元素进行操作.
上面代码中在body中写了一个p标签,id为pid,当鼠标放到p标签上方的时候触发onmouseover事件,执行changeText()方法,将p标签内的文档改变.
2. setAttribute()和getAttribute()
getAttribute()方法用于获取某一属性的值,setAttribute()方法用于给某一属性赋值。
上面代码中,body中有一个a标签,通过getElementById()获取a标签,baiduurl.getAttribute(“href”)的值为默认的href属性,通过baiduurl.setAttribute(“href”, “http://www.taobao.com“)设置以后,该属性值改变.完整代码:
下一步学习一下怎么实现局部放大,大家有什么好的方法吗?可以一起探讨。
css图片切换效果代码[不用js]
纯js实现背景图片切换效果代码
映彩衣的js随笔(js图片切换效果)
最简单的js图片切换效果实现代码
简单的实现点击箭头图片切换的js代码
javascript实现图片切换的幻灯片效果源代码
用html+css+js实现的一个简单的图片切换特效
jQuery图片切换插件jquery.cycle.js使用示例
效果图:
网页看到非常常见的一个图片切换效果:在淘宝、JD等购物时,介绍产品的图片会有多张,一般是显示一张,底下有一排小图片,鼠标放到小图片上大图片会切换.参考vivo X5M 移动4G手机 .下面记录一下实现的过程.
1. getElementById()
该方法是操作dom非常常用的一个方法,比如有一p标签,id设为pid,通过getElementById(“pid”)就可以对该元素进行操作.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <script type="text/javascript"> function changeText(){ document.getElementById("pid").innerHTML ="It works!"; } </script> </head> <body> <p id="pid" onmouseover="changeText()">Hello word!</p> </body> </html>
上面代码中在body中写了一个p标签,id为pid,当鼠标放到p标签上方的时候触发onmouseover事件,执行changeText()方法,将p标签内的文档改变.
2. setAttribute()和getAttribute()
getAttribute()方法用于获取某一属性的值,setAttribute()方法用于给某一属性赋值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <script type="text/javascript"> function changeUrl(){ var baiduurl=document.getElementById("aid"); baiduurl.getAttribute("href"); baiduurl.setAttribute("href", "http://www.taobao.com"); baiduurl.innerHTML="淘宝"; } </script> </head> <body> <a href="http://www.baidu.com" id="aid" onmouseover="changeUrl()">百度首页</a> </body> </html>
上面代码中,body中有一个a标签,通过getElementById()获取a标签,baiduurl.getAttribute(“href”)的值为默认的href属性,通过baiduurl.setAttribute(“href”, “http://www.taobao.com“)设置以后,该属性值改变.完整代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>on</title> <style type="text/css" media="screen"> *{ padding: 0; } body{ font-family: 微软雅黑; } #imgbox{ width: 320px; height: 490px; padding: 10px; box-shadow: 5px; border: 1px solid #ccc; border-radius: 10px; } #phoneimg{ padding: 10px; border-color: 1px solid #cccccc; } </style> </head> <body> <div id="imgbox"> <img src="images/phone1.jpg" height="400" width="320" alt="phone" id="phoneimg"> <p id="decimg">phone image1</p> </div> <table> <tbody> <tr> <td width="50px"> <img src="images/phone2.jpg" height="100" width="80" title="phone image2" alt="" onmouseover="changeImg(this)" ></td> <td width="50px"> <img src="images/phone3.jpg" height="100" width="80" title="phone image3" alt=""onmouseover="changeImg(this)" ></td> <td width="50px"> <img src="images/phone4.jpg" height="100" width="80" title="phone image4" alt=""onmouseover="changeImg(this)" ></td> <td width="50px"> <img src="images/phone5.jpg" height="100" width="80" title="phone image5" alt=""onmouseover="changeImg(this)" ></td> </tr> </tbody> </table> <script type="text/javascript"> function changeImg(whichpic){ var imgattr=whichpic.getAttribute("src"); var phoneimg=document.getElementById("phoneimg"); phoneimg.setAttribute("src",imgattr); var dectext=whichpic.getAttribute("title"); document.getElementById("decimg").innerHTML=dectext; } </script> </body> </html>
下一步学习一下怎么实现局部放大,大家有什么好的方法吗?可以一起探讨。
您可能感兴趣的文章:
纯js无flash仿搜狐女人频道FLASH图片切换效果代码css图片切换效果代码[不用js]
纯js实现背景图片切换效果代码
映彩衣的js随笔(js图片切换效果)
最简单的js图片切换效果实现代码
简单的实现点击箭头图片切换的js代码
javascript实现图片切换的幻灯片效果源代码
用html+css+js实现的一个简单的图片切换特效
jQuery图片切换插件jquery.cycle.js使用示例
相关文章推荐
- 基于JavaScript实现TAB标签效果
- 学习JavaScript设计模式之代理模式
- js替换普通file控件
- 网上找到的js实现Map的方法
- 字符串转换
- javascript正则匹配
- 腾讯手机QQ兴趣部落使用的Abstract.js框架初探
- 10030---JavaScript中的匿名函数及函数的闭包
- 使用PhantomJS实现网页截图服务
- 什么是JSON数据
- JSP页面的语法元素
- JSON 标准化的过程: 人为的将不标准的JSON数据(最外层不是{}或者[]),转换成 标准的 JSON 数据.
- 怎么把plist文件转换成JSON 文件 ,在把JSON文件转换成字典或者数组
- 如何将phantomjs单独部署在服务端
- js通过a链接控制多个DIV只显示其中一个其它隐藏
- js-变量、作用域和内存问题,引用类型
- JSP取得绝对路径
- js 遍历文档树
- 【jsp+servelt】Using <c:set target>
- Javascript 严格模式详解