JavaScript点击背景图片切换

本文献这次讲的是JavaScript背景图片切换，这次案列会用一个事件委派属性。

1.首先可以先给主页界面放一张图片，让打开网页就显示到一张图片出来，这里我放的是下面第三张图片。

 

2.然后把html的div图片框架打出来，一个div标签里面包裹了四个img标签，给div一个id，下面获取id的时候需要。

 

3.再给四个img标签打一下样式，能把效果显示的好看一点。

 

4.开始获取前面的id，先写一个window.onload页面加载事件，然后里面获取一下id，给id绑定点击事件。

5.到了这里我们如果是是有些浏览器低级的吧。显示不出来效果，我们就给它一个event事件，这个事件可以解决兼容性的问题也可以当一个事件返回值查看后台属性。

6.到了这里给它写个if语句，这里就需要用到一个事件委派了（事件的委派指的是将事件统一绑定给元素共同的祖先元素，这样当后代元素上的事件触发时，会一张冒泡到祖先元素，从而通过祖先与那是的响应函数来处理事件，事件对象的属性target）。

7.用事件委派获取到图片src属性然后再赋值给body页面图片加上图片路径的url（）里面的strurl就可以了。

8.下面就是显示效果了。

 

 

 

好的，上面就是我所学到的JavaScript的背景图片切换，新手上路，多多指教，如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！