javascript如何實現圖片切換的動畫效果（程式碼）
這篇文章帶給大家的內容是關於javascript如何實現圖片切換的動畫效果（程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
首先效果圖，大體這樣的，點選左邊的按鈕，切換圖片。
看起來挺簡單，但還是有幾個難點的，所以就把這個案例挑出來好好的分析一下。
第一步：佈局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片切换器</title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background-color: RGB(123,113,104);
}
#pic{
width: 300px;
height: 400px;
position: relative;
margin: 50px auto;
}
#pic img{
width: 300px;
height: 400px;
}
#pic span,#pic p{
position: absolute;
width: 300px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: rgba(61,50,48,0.5);
}
#pic span{
top: 0px;
}
#pic p{
bottom: 0px;
}
#pic ul{
position: absolute;
top:0px;
left: 320px;
}
#pic li{
list-style: none;
width: 40px;
height: 40px;
background-color: #333;
margin-bottom:10px ;
}
#pic li.active{
background-color: #F2F2F2;
}
</style>
<body>
<p id="pic">
<img src="img/1.jpeg"/>
<span>- / -</span>
<p>图片描述正在加载中...</p>
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</p>
</body>
</html>第二步：資料與初始化
1）找到資料
2）對頁面進行初始化
# <script type="text/javascript">
window.onload = function(){
var op = document.getElementById("pic");
var oImg = op.getElementsByTagName('img')[0];
var oSpan = op.getElementsByTagName('span')[0];
var oP = op.getElementsByTagName('p')[0];
var oUl = op.getElementsByTagName('ul')[0];
var arrSrc = ['img/1.jpeg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg'];
var arrText = ['图片描述：第一张','图片描述：第二张','图片描述：第三张','图片描述：第四张','图片描述：第五张'];
//一般有数组就需要一个值
var num = 0;
//初始化
oSpan.innerHTML = num+1 +" / "+ arrSrc.length;
oImg.src = arrSrc[num];
oP.innerHTML = arrText[num];
for(var i=0;i<arrSrc.length;i++){
oUl.innerHTML += '<li></li>';
}
}
</script>第三步：對圖片進行切換，到目前切換圖片和顯示文字的功能就實現了，但是旁邊ul的效果還沒實現
var oLi = oUl.getElementsByTagName('li');
//切换图片
for(var i=0;i<arrSrc.length;i++){
//自定义属性，一一对应
oLi[i].index = i;
oLi[i].onclick = function(){
var id = this.index;
//通过自定义的属性设置对应的信息
oImg.src = arrSrc[id];
oP.innerHTML = arrText[id];
oSpan.innerHTML = id+1 +" / "+ arrSrc.length;
}
}第四步：實現li 的class樣式的添加。
思路一：
將 li 的樣式全部清空，點選哪個再給哪個新增。
var oldLi = 0;
//初始化
oLi[oldLi].className = 'active';
//在点击事件中
//循环将class清空
for(var j=0;j<arrSrc.length;j++){
oLi[j].className = "";
}
oLi[id].className = "active";思路二：
清空上個，目前新增
定義一個變量，oldLi儲存點擊的上一個值
預設是0
當我們點擊了下一個的時候，將為0的那個（預設的）清除掉。
並記錄下目前點選的li 的index 自訂屬性oldLi = this.index;
再把目前的li 設定上class屬性
oLi[oldLi].className = ''; oldLi = id; this.className = 'active';
完成了;
下面貼完整的程式碼和截圖
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片切换器</title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background-color: RGB(123,113,104);
}
#pic{
width: 300px;
height: 400px;
position: relative;
margin: 50px auto;
}
#pic img{
width: 300px;
height: 400px;
border-radius:10px;
}
#pic span,#pic p{
position: absolute;
width: 300px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: rgba(61,50,48,0.5);
}
#pic span{
top: 0px;
border-radius:10px 10px 0 0;
}
#pic p{
bottom: 0px;
border-radius: 0 0 10px 10px;
}
#pic ul{
position: absolute;
top:0px;
left: 320px;
}
#pic li{
list-style: none;
width: 40px;
height: 40px;
background-color: #333;
margin-bottom:10px ;
border-radius: 10px;
}
#pic li.active{
background-color: #F2F2F2;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById("pic");
var oImg = oDiv.getElementsByTagName('img')[0];
var oSpan = oDiv.getElementsByTagName('span')[0];
var oP = oDiv.getElementsByTagName('p')[0];
var oUl = oDiv.getElementsByTagName('ul')[0];
var oLi = oUl.getElementsByTagName('li');
var arrSrc = ['img/1.jpeg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg'];
var arrText = ['图片描述：第一张','图片描述：第二张','图片描述：第三张','图片描述：第四张','图片描述：第五张'];
//一般有数组就需要一个值
var num = 0;
var oldLi = 0;
//初始化
oSpan.innerHTML = num+1 +" / "+ arrSrc.length;
oImg.src = arrSrc[num];
oP.innerHTML = arrText[num];
for(var i=0;i<arrSrc.length;i++){
oUl.innerHTML += '<li></li>';
}
oLi[oldLi].className = 'active';
//切换图片
for(var i=0;i<arrSrc.length;i++){
//自定义属性，一一对应
oLi[i].index = i;
oLi[i].onclick = function(){
var id = this.index;
//通过自定义的属性设置对应的信息
oImg.src = arrSrc[id];
oP.innerHTML = arrText[id];
oSpan.innerHTML = id+1 +" / "+ arrSrc.length;
oLi[oldLi].className = '';
oldLi = id;
this.className = 'active';
}
}
}
</script>
<body>
<div id="pic">
<img src="img/1.jpeg"/>
<span>- / -</span>
<p>图片描述正在加载中...</p>
<ul>
<!--<li class="active"></li>-->
</ul>
</div>
</body>
</html>相關推薦：
以上是javascript如何實現圖片切換的動畫效果（程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
JavaScript 如何實現圖片的左右無縫滑動切換效果？
Oct 19, 2023 am 08:56 AM
JavaScript如何實現圖片的左右無縫滑動切換效果？隨著網路的發展，網頁設計中經常會使用圖片作為頁面的重要元素。而圖片的切換效果對於頁面的美觀度和互動性有著重要的影響。在本篇文章中，我們將探討如何使用JavaScript實現圖片的左右無縫滑動切換效果，並附有具體的程式碼範例。實現圖片的左右無縫滑動切換效果，首先需要做到以下幾點：建立一個圖片容器，用
如何使用HTML、CSS和jQuery製作一個響應式的圖片切換特效
Oct 24, 2023 am 08:01 AM
製作響應式的圖片切換特效是前端開發常見的任務之一。在本篇文章中，我們將使用HTML、CSS和jQuery來達成這個特效。下面是詳細步驟和具體的程式碼範例。 HTML結構首先，我們需要建立圖片切換特效所需的HTML結構。可以使用以下程式碼範例來建立一個簡單的HTML結構。 <divclass="slider-container">
如何透過純CSS實現圖片輪播效果的方法與技巧
Oct 18, 2023 am 08:27 AM
如何透過純CSS實現圖片輪播效果的方法和技巧在現代網頁設計中，圖片輪播效果常常被用來展示多張圖片或廣告的輪流切換。實現圖片輪播效果的方式有很多，其中一個常見的方式是使用CSS動畫。本文將介紹如何透過純CSS實現圖片輪播效果的方法和技巧，並提供具體的程式碼範例。一、HTML結構首先，在HTML中需要準備好用於輪播的圖片元素。以下是一個簡單的HTML結構範例：&l
如何透過Vue實現圖片的切換和輪播效果？
Aug 18, 2023 pm 04:57 PM
如何透過Vue實現圖片的切換和輪播效果？ Vue是一種用於建立使用者介面的JavaScript框架，它提供了一種優雅而高效的方法來處理網路應用程式中的資料和互動邏輯。 Vue的許多強大功能之一就是它可以輕鬆地處理圖片的切換和輪播效果。在本文中，我們將介紹如何使用Vue來實現這些效果。首先，我們需要準備一些基本的HTML結構和樣式來展示圖片。我們可以使用<i
如何使用 JavaScript 實現圖片切換的漸層效果？
Oct 21, 2023 am 09:33 AM
如何使用JavaScript實現圖片切換的漸層效果？隨著網路的發展，網站設計越來越注重使用者體驗。圖片切換是網站常見的互動效果之一，透過圖片的漸變切換可以更好地吸引使用者的注意。本文將介紹如何使用JavaScript實現圖片切換的漸變效果，並提供具體程式碼範例。在開始之前，我們需要準備一些圖片資源。假設我們有三張圖片，分別是"image1.jpg"、"
JavaScript 如何實現圖片的左右無縫滑動切換效果同時加入縮放和淡入淡出動畫？
Oct 25, 2023 am 09:39 AM
JavaScript如何實現圖片的左右無縫滑動切換效果同時加入縮放和淡入淡出動畫？在網站開發中，圖片的滑動切換效果是非常常見的需求，這裡我們將介紹如何使用JavaScript實現一種左右無縫滑動切換效果，同時加入縮放和淡入淡出動畫。本文將提供詳細的程式碼範例，讓你能夠輕鬆實現該效果。首先，我們需要在HTML中準備一個容器，用於放置圖片，並且設定容器的
如何利用Layui實現圖片切換輪播效果
Oct 26, 2023 am 11:52 AM
如何利用Layui實現圖片切換輪播效果，需要具體程式碼範例標題：利用Layui實現圖片切換輪播效果詳解引言：在現代網頁設計中，圖片切換輪播效果已經成為了常見的元素之一。利用圖片輪播可以讓網頁更有動感和吸引人的效果。本文將以Layui為基礎，介紹如何實現圖片切換輪播效果，並給出具體的程式碼範例。一、Layui輪播組件介紹Layui是一款經典的前端UI框架，內含
如何利用Layui實現圖片切換與拉伸效果
Oct 25, 2023 am 08:13 AM
如何利用Layui實現圖片切換和拉伸效果近年來，隨著Web前端技術的快速發展，越來越多的框架和庫被用於美化和增強網頁的功能。其中，Layui是一款非常受歡迎的前端框架，它提供了豐富的UI組件和易於使用的功能擴充。本文將介紹如何利用Layui實現圖片切換和拉伸效果，並給出具體的程式碼範例。一、圖片切換效果的實作HTML結構首先，我們需要準備一些HTML結構，用於
