JavaScript實(shí)現(xiàn)簡(jiǎn)單圖片切換
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)簡(jiǎn)單圖片切換的具體代碼，供大家參考，具體內(nèi)容如下
下邊給出幾種方法進(jìn)行圖片切換：
方法一 （小白專用款！簡(jiǎn)單易懂） 下邊附上代碼：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>圖片切換2</title> <style type='text/css'>*{ padding: 0; margin: 0;}#box{ border: 1px solid #ccc; width: 450px; height: 70px; padding-top: 450px; background: url('img/big_pic01.jpg') no-repeat;}#box ul li{ float: left; padding-left: 10px;} </style></head><body> <div id='box'><ul> <li id='item1'><img src='http://www.hdgsjgj.cn/bcjs/img/pic01.webp'> </li></ul><ul> <li id='item2'><img src='http://www.hdgsjgj.cn/bcjs/img/pic02.webp'> </li></ul><ul> <li id='item3'><img src='http://www.hdgsjgj.cn/bcjs/img/pic03.webp'> </li></ul><ul> <li id='item4'><img src='http://www.hdgsjgj.cn/bcjs/img/pic04.webp'> </li></ul><ul> <li id='item5'><img src='http://www.hdgsjgj.cn/bcjs/img/pic05.webp'> </li></ul> </div> <script type='text/javascript'>// 初學(xué)者 小白 書寫方式// 1.獲取事件源var item1 = document.getElementById('item1');var item2 = document.getElementById('item2');var item3 = document.getElementById('item3');var item4 = document.getElementById('item4');var item5 = document.getElementById('item5');var oBos = document.getElementById('box');// 2.添加事件item1.onmouseover = function (){ //當(dāng)鼠標(biāo)懸浮在相關(guān)id上時(shí)，圖片指向路徑進(jìn)行改變 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部分代碼可能比較麻煩，容易造成代碼冗余。
那么我們進(jìn)行修改下后，來看看方法二：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>圖片切換2</title> <style type='text/css'>*{ padding: 0; margin: 0;}#box{ border: 1px solid #ccc; width: 450px; height: 70px; padding-top: 450px; background: url('img/big_pic01.jpg') no-repeat;}#box ul li{ float: left; padding-left: 10px;} </style></head><body> <div id='box'><ul> <li id='item1'><img src='http://www.hdgsjgj.cn/bcjs/img/pic01.webp'> </li></ul><ul> <li id='item2'><img src='http://www.hdgsjgj.cn/bcjs/img/pic02.webp'> </li></ul><ul> <li id='item3'><img src='http://www.hdgsjgj.cn/bcjs/img/pic03.webp'> </li></ul><ul> <li id='item4'><img src='http://www.hdgsjgj.cn/bcjs/img/pic04.webp'> </li></ul><ul> <li id='item5'><img src='http://www.hdgsjgj.cn/bcjs/img/pic05.webp'> </li></ul> </div> <script type='text/javascript'>// 1.獲取事件源 這樣獲取事件源省去了大量的var的定義的過程function $(id){ return typeof id === 'string'?document.getElementById(id):null;}// 改變背景圖 liId是指向的id imgSrc是將背景圖傳入的參數(shù)function changebgcImg(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代碼要少。
接著上邊的進(jìn)行修改，我們可以來看看方法三：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>圖片切換完整版</title> <style type='text/css'>*{ padding: 0; margin: 0;}#box{ border: 1px solid #ccc; width: 450px; height: 70px; padding-top: 450px; background: url('img/big_pic01.jpg') no-repeat;}#box ul li{ float: left; padding-left: 10px;} </style></head><body> <div id='box'><ul> <li class='item'><img src='http://www.hdgsjgj.cn/bcjs/img/pic01.webp'> </li></ul><ul> <li class='item'><img src='http://www.hdgsjgj.cn/bcjs/img/pic02.webp'> </li></ul><ul> <li class='item'><img src='http://www.hdgsjgj.cn/bcjs/img/pic03.webp'> </li></ul><ul> <li class='item'><img src='http://www.hdgsjgj.cn/bcjs/img/pic04.webp'> </li></ul><ul> <li class='item'><img src='http://www.hdgsjgj.cn/bcjs/img/pic05.webp'> </li></ul> </div> <script type='text/javascript'>// 1.獲取事件源function $(id){ return typeof id === ’string’? document.getElementById(id):null;}// 獲取下邊的所有名為item的li標(biāo)簽var items = document.getElementsByClassName('item');// console.log(items);for (var i=0;i<items.length;i++){ var item = items[i]; item.index = i+1; items[i].onmouseover = function (){$('box').style.background = `url('img/big_pic0${this.index}.jpg') no-repeat`// 不可以直接設(shè)置${i}而要重新定義個(gè)變量item是因?yàn)樵趂unction中調(diào)用的i是全局變量，i在for循環(huán)后會(huì)一直指向5// $('box').style.background = `url('img/big_pic0${i}.jpg') no-repeat` }} </script></body></html>
三種方式，都可以實(shí)現(xiàn)圖片切換效果（第一種如果圖片數(shù)目多，要展示的圖片也不一樣多的話不推薦使用），圖片切換效果如下：
我還有篇博客也是進(jìn)行圖片切換效果的，所用方式與此三種有些區(qū)別，可以進(jìn)行參考，就先不進(jìn)行合并了：JavaScript實(shí)現(xiàn)淘寶商品圖切換效果
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. html清除浮動(dòng)的6種方法示例2. phpstudy apache開啟ssi使用詳解3. JavaScript中常見的幾種獲取元素的方式4. ASP.NET MVC使用異步Action的方法5. Xml簡(jiǎn)介_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理6. jsp實(shí)現(xiàn)登錄驗(yàn)證的過濾器7. jsp文件下載功能實(shí)現(xiàn)代碼8. uni-app結(jié)合.NET 7實(shí)現(xiàn)微信小程序訂閱消息推送9. AJAX的跨域問題解決方案10. ajax實(shí)現(xiàn)頁面的局部加載
網(wǎng)公網(wǎng)安備