溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了JavaScript如何實現簡單圖片切換，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
JavaScript是一種直譯式的腳本語言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，JavaScript是被廣泛用于客戶端的腳本語言，最早是在HTML網頁上使用，用來給HTML網頁增加動態功能。
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/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="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/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如何實現簡單圖片切換”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
