JavaScript實現(xiàn)簡單圖片切換
更新時間：2021年04月29日 15:01:26 作者：知識進腦的肖老千啊
這篇文章主要為大家詳細介紹了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="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">
// 初學(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)鼠標懸浮在相關(guān)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是將背景圖傳入的參數(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="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`
// 不可以直接設(shè)置${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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Javascript在IE和Firefox瀏覽器常見兼容性問題總結(jié)
這篇文章主要介紹了Javascript在IE和Firefox瀏覽器常見兼容性問題,結(jié)合實例形式總結(jié)分析了javascript在IE與Firefox瀏覽器中常見的各種兼容性問題與相應(yīng)的解決方法,需要的朋友可以參考下2016-08-08
JavaScript實現(xiàn)表單注冊、表單驗證、運算符功能
在本篇文章里我們給大家整理了關(guān)于JavaScript中表單注冊、表單驗證、運算符的代碼示例，有興趣的朋友們可以測試學(xué)習(xí)下。2018-10-10
微信小程序開發(fā)之從相冊獲取圖片 使用相機拍照 本地圖片上傳
本篇文章主要介紹了微信小程序開發(fā)之從相冊獲取圖片--使用相機拍照，本地圖片上傳的相關(guān)資料。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
這篇文章主要介紹了Redux的基本使用過程詳解,本文通過示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
你還在為offset,scroll,inner,client,screen,mouse發(fā)愁嗎? 頭都大了。而且各個瀏覽器方法還不太一樣。所以往往很浪費我們的時間。 于是我產(chǎn)生了寫一個方法用戶 專門獲取這樣的數(shù)據(jù)。2010-06-06
Display SQL Server Version Information
Display SQL Server Version Information...2007-06-06
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)驗證碼倒計時效果，手機登錄、填手機號獲取驗證碼，倒計時后重新獲取效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
javascript checkbox/radio onchange不能兼容ie8處理辦法
這篇文章主要介紹了javascript checkbox/radio onchange不能兼容ie8處理辦法的相關(guān)資料,需要的朋友可以參考下2017-06-06
JavaScript實現(xiàn)指定數(shù)量的并發(fā)限制的示例代碼
這篇文章主要介紹了JavaScript實現(xiàn)指定數(shù)量的并發(fā)限制的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
解決使用layui對select append元素?zé)o效或者未及時更新的問題
今天小編就為大家分享一篇解決使用layui對select append元素?zé)o效或者未及時更新的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09