JavaScript實現簡單圖片切換
阿新 • • 發佈：2021-04-30
本文例項為大家分享了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="img/pic01.webp">
</li>
</ul>
<ul>
<li id="item2">
<img src="img/pic02.webp">
</li>
</ul>
<ul>
<li id="item3">
<img src="img/pic03.webp">
</li>
</ul>
<ul>
<li id="item4">
<img src="img/pic04.webp">
</li>
</ul>
<ul>
<li id="item5">
<img src="img/pic05.webp">
</li>
</ul>
</div>
<script type="text/ 上邊的js部分程式碼可能比較麻煩，容易造成程式碼冗餘。
那麼我們進行修改下後，來看看方法二：
<!DOCTYPE html>
<html lanhttp://www.cppcns.comg="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="img/pic01.webp">
</li>
</ul>
<ul>
GYGopyAG <li id="item2">
<img src="img/pic02.webp">
</li>
</ul>
<ul>
<li id="item3">
<img src="img/pic03.webp">
</li>
</ul>
<ul>
<li id="item4">
<img src="img/pic04.webp">
</li>
</ul>
<ul>
<li id="item5">
<img src="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="img/pic01.webp">
</li>
</ul>
<ul>
<li class="item">
<img src="img/pic02.webp">
</li>
</ul>
<ul>
<li class="item">
<img src="img/pic03.webp">
</li>
</ul>
<ul>
<li class="item">
<img src="img/pic04.webp">
</li>
</ul>
<ul>
<li class="item">
<img src="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實現淘寶商品圖切換效果
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。