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脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
JavaScript 如何实现图片的左右无缝滑动切换效果？
Oct 19, 2023 am 08:56 AM
JavaScript如何实现图片的左右无缝滑动切换效果？随着互联网的发展，网页设计中经常会使用图片作为页面的重要元素。而图片的切换效果对于页面的美观度和交互性起着重要的影响。在本篇文章中，我们将探讨如何使用JavaScript实现图片的左右无缝滑动切换效果，并附有具体的代码示例。实现图片的左右无缝滑动切换效果，首先需要做到以下几点：建立一个图片容器，用
如何通过纯CSS实现图片轮播效果的方法和技巧
Oct 18, 2023 am 08:27 AM
如何通过纯CSS实现图片轮播效果的方法和技巧在现代网页设计中，图片轮播效果常常被用于展示多张图片或广告的轮流切换。实现图片轮播效果的方式有很多，其中一种常见的方式是使用CSS动画。本文将介绍如何通过纯CSS实现图片轮播效果的方法和技巧，并提供具体的代码示例。一、HTML结构首先，在HTML中需要准备好用于轮播的图片元素。以下是一个简单的HTML结构示例：&l
如何使用HTML、CSS和jQuery制作一个响应式的图片切换特效
Oct 24, 2023 am 08:01 AM
制作响应式的图片切换特效是前端开发中常见的任务之一。在本篇文章中，我们将使用HTML、CSS和jQuery来实现这个特效。下面是详细步骤和具体的代码示例。HTML结构首先，我们需要创建图片切换特效所需的HTML结构。可以使用以下代码示例来创建一个简单的HTML结构。<divclass="slider-container">
如何通过Vue实现图片的切换和轮播效果？
Aug 18, 2023 pm 04:57 PM
如何通过Vue实现图片的切换和轮播效果？Vue是一种用于构建用户界面的JavaScript框架，它提供了一种优雅而高效的方法来处理Web应用程序中的数据和交互逻辑。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结构，用于
