JavaScript實現(xiàn)簡單圖片切換
本文實例為大家分享了JavaScript實現(xiàn)簡單圖片切換的具體代碼，供大家參考，具體內(nèi)容如下
下邊給出幾種方法進行圖片切換：
方法一 （小白專用款！簡單易懂） 下邊附上代碼：
<!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 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 (){ //當鼠標懸浮在相關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部分代碼可能比較麻煩，容易造成代碼冗余。
那么我們進行修改下后，來看看方法二：
<!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代碼要少。
接著上邊的進行修改，我們可以來看看方法三：
<!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標簽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`// 不可以直接設置${i}而要重新定義個變量item是因為在function中調(diào)用的i是全局變量，i在for循環(huán)后會一直指向5// $('box').style.background = `url('img/big_pic0${i}.jpg') no-repeat` }} </script></body></html>
三種方式，都可以實現(xiàn)圖片切換效果（第一種如果圖片數(shù)目多，要展示的圖片也不一樣多的話不推薦使用），圖片切換效果如下：
我還有篇博客也是進行圖片切換效果的，所用方式與此三種有些區(qū)別，可以進行參考，就先不進行合并了：JavaScript實現(xiàn)淘寶商品圖切換效果
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關文章：
1. 存儲于xml中需要的HTML轉(zhuǎn)義代碼2. python 浮點數(shù)四舍五入需要注意的地方3. Java GZip 基于內(nèi)存實現(xiàn)壓縮和解壓的方法4. python開發(fā)一款翻譯工具5. 利用CSS制作3D動畫6. jsp+servlet簡單實現(xiàn)上傳文件功能（保存目錄改進）7. Springboot 全局日期格式化處理的實現(xiàn)8. 完美解決vue 中多個echarts圖表自適應的問題9. SpringBoot+TestNG單元測試的實現(xiàn)10. JAMon(Java Application Monitor)備忘記
網(wǎng)公網(wǎng)安備