轻松实现Java脚本语言图片切换

本文实例为大家介绍Java脚本语言图片切换的实现方法，分享给大家供大家参考，具体内容如下

效果图：

网页看到非常常见的一个图片切换效果：在淘宝、JD等购物时，介绍产品的图片会有多张，一般是显示一张，底下有一排小图片，鼠标放到小图片上大图片会切换。参考vivo X5M移动第四代移动通信技术手机。下面记录一下实现的过程。

1.getElementById()

该方法是操作数字正射影像图非常常用的一个方法，比如有一p标签，id设为pid，通过getElementById(“PID”)就可以对该元素进行操作。

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title demo/title script type=' text/JavaScript ' function changettext(){ document。getelementbyid(' PID ').innerHTML='它起作用了！}/script/head body p id=' PID ' on mouse over=' changettext()' Hello word！/p/body/html上面代码中在身体中写了一个p标签，id为pid，当鼠标放到p标签上方的时候触发onmouseover事件，执行更改文本()方法，将p标签内的文档改变。

2.setAttribute()和getAttribute()

getAttribute()方法用于获取某一属性的值，setAttribute()方法用于给某一属性赋值。

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title demo/title script type=' text/JavaScript ' function change URL(){ var Baidu URL=document。getelementbyid(' aid ')；百度网址。GetAttribute(' href ')；baiduurl.setAttribute('href '，' http://www。淘宝。com’)；baiduurl.innerHTML='淘宝；}/脚本/头体a href=' http://www。百度。' com ' id=' aid ' on mouse over=' changeURl()'百度首页/a/body/html上面代码中身体中有一个a标签，通过getElementById()获取a标签，baiduurl.getAttribute("href ")的值为默认的href属性，通过“http://www.taobao.com”设置以后，该属性值改变。完整代码：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title on/title style type=' text/CSS ' media=' screen ' * { padd : 0；}正文{字体系列：微软雅黑；} # imgbox { width: 320px高度： 490像素；padd : 10pxbox-shadow : 5px；border: 1px固体# cccborder-radius : 10px；} # phone img { padd : 10pxborder-color : 1px实心# cccccc }/style/head body div id=' imgbox ' img src=' http : images/phone 1。jpg ' height=' 400 ' width=' 320 ' alt=' phone ' id=' phone img ' p id=' decimag ' phone image 1/p/div表体t tr TD width=' 50px ' img src=' http : images/phone 2。jpg ' height=' 100 ' width=' 80 ' title=' phone image2 ' var phone img=document。getelementbyid(' phone img ')；phoneimg.setAttribute('src '，imgattr)；var dec文本=什么pic。GetAttribute(' title ')；文件。getelementbyid(' decimag ').innerHTML=dectext}/脚本/正文/html下一步学习一下怎么实现局部放大，大家有什么好的方法吗？可以一起探讨。