JavaScript如何实现简单图片切换
导读：本文共3662.5字符，通常情况下阅读需要12分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： JavaScript是什么JavaScript是一种直译式的脚本语言，其解释器被称为JavaScript引擎，是浏览器的一部分，JavaScript是被广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。JavaScript实现简单图片切换的具体内容如下下边给出几种方法进行图片切换：方法一 （小白专用款！简单易懂） 下边附上代码... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。JavaScript是什么
JavaScript是一种直译式的脚本语言，其解释器被称为JavaScript引擎，是浏览器的一部分，JavaScript是被广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。
JavaScript实现简单图片切换的具体内容如下
下边给出几种方法进行图片切换：
方法一 （小白专用款！简单易懂） 下边附上代码：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>图片切换2</title><styletype="text/css">*{padding:0;margin:0;}#box{border:1pxsolid#ccc;width:450px;height:70px;padding-top:450px;background:url("img/big_pic01.jpg")no-repeat;}#boxulli{float:left;padding-left:10px;}</style></head><body><divid="box"><ul><liid="item1"><imgsrc="img/pic01.webp"></li></ul><ul><liid="item2"><imgsrc="img/pic02.webp"></li></ul><ul><liid="item3"><imgsrc="img/pic03.webp"></li></ul><ul><liid="item4"><imgsrc="img/pic04.webp"></li></ul><ul><liid="item5"><imgsrc="img/pic05.webp"></li></ul></div><scripttype="text/javascript">//初学者小白书写方式//1.获取事件源varitem1=document.getElementById("item1");varitem2=document.getElementById("item2");varitem3=document.getElementById("item3");varitem4=document.getElementById("item4");varitem5=document.getElementById("item5");varoBos=document.getElementById("box");//2.添加事件item1.onmouseover=function(){//当鼠标悬浮在相关id上时，图片指向路径进行改变oBos.style.background="url('img/big_pic01.jpg')no-repeat";}item2.onmouseover=function(){oBos.style.background="url('img/big_pic02.jpg')no-repeat";}item3.onmouseover=function(){oBos.style.background="url('img/big_pic03.jpg')no-repeat";}item4.onmouseover=function(){oBos.style.background="url('img/big_pic04.jpg')no-repeat";}item5.onmouseover=function(){oBos.style.background="url('img/big_pic05.jpg')no-repeat";}</script></body></html>上边的JS部分代码可能比较麻烦，容易造成代码冗余。
那么我们进行修改下后，来看看方法二：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>图片切换2</title><styletype="text/css">*{padding:0;margin:0;}#box{border:1pxsolid#ccc;width:450px;height:70px;padding-top:450px;background:url("img/big_pic01.jpg")no-repeat;}#boxulli{float:left;padding-left:10px;}</style></head><body><divid="box"><ul><liid="item1"><imgsrc="img/pic01.webp"></li></ul><ul><liid="item2"><imgsrc="img/pic02.webp"></li></ul><ul><liid="item3"><imgsrc="img/pic03.webp"></li></ul><ul><liid="item4"><imgsrc="img/pic04.webp"></li></ul><ul><liid="item5"><imgsrc="img/pic05.webp"></li></ul></div><scripttype="text/javascript">//1.获取事件源这样获取事件源省去了大量的var的定义的过程function$(id){returntypeofid==="string"?document.getElementById(id):null;}//改变背景图liId是指向的idimgSrc是将背景图传入的参数functionchangebgcImg(liId,imgSrc){//2.添加事件$(liId).onmouseover=function(){//3.改变背景图$("box").style.background=imgSrc;}}changebgcImg("item1",'url("img/big_pic01.jpg")no-repeat');changebgcImg("item2",'url("img/big_pic02.jpg")no-repeat');changebgcImg("item3",'url("img/big_pic03.jpg")no-repeat');changebgcImg("item4",'url("img/big_pic04.jpg")no-repeat');changebgcImg("item5",'url("img/big_pic05.jpg")no-repeat');</script></body></html>可以看到，方法二比方法一所用JS代码要少。
接着上边的进行修改，我们可以来看看方法三：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>图片切换完整版</title><styletype="text/css">*{padding:0;margin:0;}#box{border:1pxsolid#ccc;width:450px;height:70px;padding-top:450px;background:url("img/big_pic01.jpg")no-repeat;}#boxulli{float:left;padding-left:10px;}</style></head><body><divid="box"><ul><liclass="item"><imgsrc="img/pic01.webp"></li></ul><ul><liclass="item"><imgsrc="img/pic02.webp"></li></ul><ul><liclass="item"><imgsrc="img/pic03.webp"></li></ul><ul><liclass="item"><imgsrc="img/pic04.webp"></li></ul><ul><liclass="item"><imgsrc="img/pic05.webp"></li></ul></div><scripttype="text/javascript">//1.获取事件源function$(id){returntypeofid==='string'?document.getElementById(id):null;}//获取下边的所有名为item的li标签varitems=document.getElementsByClassName("item");//console.log(items);for(vari=0;i<items.length;i++){varitem=items[i];item.index=i+1;items[i].onmouseover=function(){$("box").style.background=`url("img/big_pic0${this.index}.jpg")no-repeat`//不可以直接设置${i}而要重新定义个变量item是因为在function中调用的i是全局变量，i在for循环后会一直指向5//$("box").style.background=`url("img/big_pic0${i}.jpg")no-repeat`}}</script></body></html>三种方式，都可以实现图片切换效果（第一种如果图片数目多，要展示的图片也不一样多的话不推荐使用），图片切换效果如下：
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">本文：
JavaScript如何实现简单图片切换的详细内容，希望对您有所帮助，信息来源于网络。