轻松实现JavaScript图片切换

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

效果图:

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

1. getElementById()

该方法是操作dom非常常用的一个方法,比如有一p标签,id设为pid,通过getElementById(“pid”)就可以对该元素进行操作.

demo

上面代码中,body中有一个a标签,通过getElementById()获取a标签,baiduurl.getAttribute(“href”)的值为默认的href属性,通过baiduurl.setAttribute(“href”,“http://www.taobao.com“)设置以后,该属性值改变.完整代码:

on