javascript實(shí)現(xiàn)點(diǎn)擊圖片切換功能
更新時(shí)間：2022年07月21日 09:48:25 作者：_洋
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)點(diǎn)擊圖片切換功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了javascript實(shí)現(xiàn)點(diǎn)擊圖片切換的具體代碼，供大家參考，具體內(nèi)容如下
實(shí)現(xiàn)效果：圖片點(diǎn)擊切換
代碼：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../reset.css">
<style>
.img-list{
width: 480px;
height: 850px;
margin: 0 auto;
/* 為a提供參照 */
position:relative;
}
img{
width: 480px;
height: 850px;
object-fit: cover;
}
.img-list li{
/* 開啟絕對(duì)定位使之可以設(shè)置 z-index */
position: absolute;
}
.img-list li:nth-child(3){
z-index: 1;
}
.pointer{
/* 開啟絕對(duì)定位放在上面 */
position: absolute;
z-index: 999;
bottom: 40px;
margin-left: 140px;
}
.pointer a{
/* display: block; */
/* 橫向排列 */
float: left;
width: 20px;
height: 20px;
background-color: salmon;
margin-left: 20px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.3);
/*默認(rèn)情況下background-color的顏色是會(huì)延伸到邊框下面的，如果我們不想要延申，需要設(shè)置 */
background-clip: content-box;
border:2px solid transparent;
}
.pointer a.active,
.pointer a:hover
{
background-color: #fff;
border:3px solid rgba(0, 0, 0, 0.3);
}
</style>
<script>
window.onload =function(){
var imgArray = ["./img/1.jpg","./img/2.jpg","./img/3.jpg","./img/4.png","./img/5.jpg"];
var allA = document.getElementsByTagName("a");
var img = document.getElementsByTagName("img")[0];
for(var i =0 ;i<allA.length;i++){
allA[i].num = i;
allA[i].onclick=function(){
// 使用this.name,！！不能使用allA[i].name,因?yàn)閕此時(shí)已經(jīng)等于5了。
var index = this.num;
img.src=imgArray[index];
for(var j =0 ;j<allA.length;j++){
allA[j].className="";
}
this.className = "active";
}
}
}
</script>
</head>
<body>
<ul class="img-list">
<li><img src="./img/1.jpg" alt=""></li>
<!-- <li><a href="javascript:;"><img src="./img/2.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="./img/3.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="./img/4.png" alt=""></a></li>
<li><a href="javascript:;"><img src="./img/5.jpg" alt=""></a></li> -->
<div class="pointer">
<a href="javascript:;" class="active"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</ul>
</body>
</html>以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 最簡(jiǎn)單的js圖片切換效果實(shí)現(xiàn)代碼
- 用html+css+js實(shí)現(xiàn)的一個(gè)簡(jiǎn)單的圖片切換特效
- 純js實(shí)現(xiàn)背景圖片切換效果代碼
- 簡(jiǎn)單的實(shí)現(xiàn)點(diǎn)擊箭頭圖片切換的js代碼
- css圖片切換效果代碼[不用js]
- 純js無flash仿搜狐女人頻道FLASH圖片切換效果代碼
- javascript實(shí)現(xiàn)圖片切換的幻燈片效果源代碼
- JS實(shí)現(xiàn)圖片切換效果
- JavaScript實(shí)現(xiàn)圖片切換效果
- js鼠標(biāo)點(diǎn)擊圖片切換效果代碼分享
相關(guān)文章
這篇文章主要介紹了如何用JavaScript讓你的瀏覽器說話，對(duì)語音感興趣的同學(xué)，可以實(shí)驗(yàn)一下2021-04-04
這篇文章主要介紹了編程語言JavaScript簡(jiǎn)介,本文講解了JavaScript是什么、JavaScript特點(diǎn)、JavaScript和Java的區(qū)別等內(nèi)容,需要的朋友可以參考下2014-10-10
JS+CSS實(shí)現(xiàn)網(wǎng)頁(yè)加載中的動(dòng)畫效果
這篇文章主要為大家詳細(xì)介紹了JS+CSS實(shí)現(xiàn)網(wǎng)頁(yè)加載中的動(dòng)畫效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
基于HTML模板和JSON數(shù)據(jù)的JavaScript交互(移動(dòng)端)
這篇文章主要介紹了基于HTML模板和JSON數(shù)據(jù)的JavaScript交互(移動(dòng)端)的相關(guān)資料,需要的朋友可以參考下2016-04-04
這篇文章主要給大家介紹了關(guān)于webpack優(yōu)化的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
這篇文章主要給大家介紹了關(guān)于vscode+gulp輕松開發(fā)小程序的完整步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
OFFICE控件測(cè)試代碼，主要是控制office的一些功能，需要的朋友可以參考下。2009-12-12
Javascript計(jì)算時(shí)間差的函數(shù)分享
獲得時(shí)間差,時(shí)間格式為 年-月-日 小時(shí):分鐘:秒 或者 年/月/日 小時(shí)：分鐘：秒2011-07-07
今天小編就為大家分享一篇解決JavaScript layui 下拉框不顯示的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
在瀏覽器測(cè)試JavaScript的方法小結(jié)
測(cè)試JavaScript代碼是一件很痛苦的事情，很多情況下都是寫好代碼不斷刷新測(cè)試，其實(shí)chrome瀏覽器的console下就很方便，這里就為大家簡(jiǎn)單分享一下2023-03-03