JavaScript實現簡單圖片切換
本文實例為大家分享了JavaScript實現簡單圖片切換的具體代碼，供大家參考，具體內容如下
下邊給出幾種方法進行圖片切換：
方法一 （小白專用款！簡單易懂） 下邊附上代碼：
<!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.cgvv.com.cn/bcjs/img/pic01.webp'> </li></ul><ul> <li id='item2'><img src='http://www.cgvv.com.cn/bcjs/img/pic02.webp'> </li></ul><ul> <li id='item3'><img src='http://www.cgvv.com.cn/bcjs/img/pic03.webp'> </li></ul><ul> <li id='item4'><img src='http://www.cgvv.com.cn/bcjs/img/pic04.webp'> </li></ul><ul> <li id='item5'><img src='http://www.cgvv.com.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.cgvv.com.cn/bcjs/img/pic01.webp'> </li></ul><ul> <li id='item2'><img src='http://www.cgvv.com.cn/bcjs/img/pic02.webp'> </li></ul><ul> <li id='item3'><img src='http://www.cgvv.com.cn/bcjs/img/pic03.webp'> </li></ul><ul> <li id='item4'><img src='http://www.cgvv.com.cn/bcjs/img/pic04.webp'> </li></ul><ul> <li id='item5'><img src='http://www.cgvv.com.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是將背景圖傳入的參數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.cgvv.com.cn/bcjs/img/pic01.webp'> </li></ul><ul> <li class='item'><img src='http://www.cgvv.com.cn/bcjs/img/pic02.webp'> </li></ul><ul> <li class='item'><img src='http://www.cgvv.com.cn/bcjs/img/pic03.webp'> </li></ul><ul> <li class='item'><img src='http://www.cgvv.com.cn/bcjs/img/pic04.webp'> </li></ul><ul> <li class='item'><img src='http://www.cgvv.com.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中調用的i是全局變量，i在for循環后會一直指向5// $('box').style.background = `url('img/big_pic0${i}.jpg') no-repeat` }} </script></body></html>
三種方式，都可以實現圖片切換效果（第一種如果圖片數目多，要展示的圖片也不一樣多的話不推薦使用），圖片切換效果如下：
我還有篇博客也是進行圖片切換效果的，所用方式與此三種有些區別，可以進行參考，就先不進行合并了：JavaScript實現淘寶商品圖切換效果
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
1. 解決Android Studio 格式化 Format代碼快捷鍵問題2. JavaEE SpringMyBatis是什么? 它和Hibernate的區別及如何配置MyBatis3. SpringBoot+TestNG單元測試的實現4. Python使用urlretrieve實現直接遠程下載圖片的示例代碼5. 完美解決vue 中多個echarts圖表自適應的問題6. vue實現web在線聊天功能7. Springboot 全局日期格式化處理的實現8. JavaScript實現頁面動態驗證碼的實現示例9. php解決注冊并發問題并提高QPS10. Java使用Tesseract-Ocr識別數字
網公網安備