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>相关推荐：
Atas ialah kandungan terperinci javascript如何实现图片切换的动画效果（代码）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1378
52
Bagaimana untuk mencapai kesan penukaran gelongsor kiri dan kanan yang lancar bagi imej dalam JavaScript?
Oct 19, 2023 am 08:56 AM
Bagaimana untuk mencapai kesan penukaran gelongsor kiri dan kanan yang lancar bagi imej dengan JavaScript? Dengan perkembangan Internet, imej sering digunakan sebagai elemen penting halaman dalam reka bentuk web. Kesan penukaran gambar memainkan kesan penting pada keindahan dan interaktiviti halaman. Dalam artikel ini, kami akan meneroka cara menggunakan JavaScript untuk mencapai kesan penukaran gelongsor kiri-kanan yang lancar bagi imej dan melampirkan contoh kod tertentu. Untuk mencapai kesan suis gelongsor kiri dan kanan gambar yang lancar, anda perlu melakukan perkara berikut terlebih dahulu: Cipta bekas gambar dan gunakan
Kaedah dan teknik bagaimana untuk mencapai kesan karusel imej melalui CSS tulen
Oct 18, 2023 am 08:27 AM
Kaedah dan teknik tentang cara mencapai kesan karusel imej melalui CSS tulen Dalam reka bentuk web moden, kesan karusel imej sering digunakan untuk memaparkan berbilang imej atau iklan secara bergilir-gilir. Terdapat banyak cara untuk mencapai kesan karusel imej, salah satu cara biasa ialah menggunakan animasi CSS. Artikel ini akan memperkenalkan kaedah dan teknik tentang cara untuk mencapai kesan karusel imej melalui CSS tulen dan memberikan contoh kod khusus. 1. Struktur HTML Pertama, elemen imej untuk karusel perlu disediakan dalam HTML. Berikut ialah contoh struktur HTML yang mudah: &l
Cara menggunakan HTML, CSS dan jQuery untuk mencipta kesan penukaran imej responsif
Oct 24, 2023 am 08:01 AM
Mencipta kesan penukaran imej responsif adalah salah satu tugas biasa dalam pembangunan bahagian hadapan. Dalam artikel ini, kami akan menggunakan HTML, CSS dan jQuery untuk mencapai kesan ini. Di bawah ialah langkah terperinci dan contoh kod khusus. Struktur HTML Pertama, kita perlu mencipta struktur HTML yang diperlukan untuk kesan penukaran imej. Anda boleh menggunakan contoh kod berikut untuk mencipta struktur HTML yang mudah. <divclass="gelangsar-bekas">
Bagaimana untuk mencapai penukaran imej dan kesan karusel melalui Vue?
Aug 18, 2023 pm 04:57 PM
Bagaimana untuk mencapai penukaran imej dan kesan karusel melalui Vue? Vue ialah rangka kerja JavaScript untuk membina antara muka pengguna yang menyediakan cara yang elegan dan cekap untuk mengendalikan data dan logik interaksi dalam aplikasi web. Salah satu daripada banyak ciri hebat Vue ialah ia boleh mengendalikan penukaran imej dan kesan karusel dengan mudah. Dalam artikel ini, kami akan memperkenalkan cara menggunakan Vue untuk mencapai kesan ini. Pertama, kita perlu menyediakan beberapa struktur dan gaya HTML asas untuk memaparkan imej. Kita boleh menggunakan <i
Bagaimana untuk menggunakan JavaScript untuk mencapai kesan kecerunan penukaran imej?
Oct 21, 2023 am 09:33 AM
Bagaimana untuk menggunakan JavaScript untuk mencapai kesan kecerunan penukaran imej? Dengan perkembangan Internet, reka bentuk laman web memberi lebih banyak perhatian kepada pengalaman pengguna. Penukaran imej ialah salah satu kesan interaktif biasa pada tapak web Penukaran kecerunan imej boleh menarik perhatian pengguna dengan lebih baik. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk mencapai kesan kecerunan penukaran imej dan memberikan contoh kod khusus. Sebelum kita mula, kita perlu menyediakan beberapa sumber imej. Katakan kita mempunyai tiga gambar, iaitu "image1.jpg", "
Bagaimana untuk mencapai kesan penukaran gelongsor kiri dan kanan yang lancar bagi imej dengan JavaScript sambil menambah animasi zum dan pudar?
Oct 25, 2023 am 09:39 AM
Bagaimana untuk mencapai kesan penukaran gelongsor kiri dan kanan yang lancar bagi imej dengan JavaScript sambil menambah animasi zum dan pudar? Dalam pembangunan tapak web, kesan pensuisan gelongsor imej adalah keperluan yang sangat biasa Di sini kami akan memperkenalkan cara menggunakan JavaScript untuk mencapai kesan pensuisan gelongsor kiri dan kanan yang lancar, sambil menambah animasi zum dan pudar. Artikel ini akan memberikan contoh kod terperinci supaya anda boleh mencapai kesan ini dengan mudah. Pertama, kita perlu menyediakan bekas dalam HTML untuk meletakkan imej, dan menetapkan bekas itu
Cara menggunakan Layui untuk mencapai kesan karusel penukaran imej
Oct 26, 2023 am 11:52 AM
Cara menggunakan Layui untuk mencapai kesan karusel penukaran imej memerlukan tajuk sampel kod khusus: Penjelasan terperinci tentang menggunakan Layui untuk mencapai kesan karusel penukaran imej Pengenalan: Dalam reka bentuk web moden, kesan karusel penukaran imej telah menjadi salah satu elemen biasa. Menggunakan karusel imej boleh menjadikan halaman web lebih dinamik dan menarik. Artikel ini akan menggunakan Layui sebagai asas untuk memperkenalkan cara mencapai kesan karusel penukaran imej, dan memberikan contoh kod khusus. 1. Pengenalan kepada komponen karusel Layui Layui ialah rangka kerja UI bahagian hadapan klasik, yang merangkumi
Cara menggunakan Layui untuk mencapai kesan penukaran dan regangan imej
Oct 25, 2023 am 08:13 AM
Cara menggunakan Layui untuk mencapai kesan penukaran dan regangan imej Dalam beberapa tahun kebelakangan ini, dengan perkembangan pesat teknologi bahagian hadapan Web, semakin banyak rangka kerja dan perpustakaan digunakan untuk mencantikkan dan meningkatkan fungsi halaman web. Antaranya, Layui ialah rangka kerja bahagian hadapan yang sangat popular yang menyediakan komponen UI yang kaya dan sambungan fungsi yang mudah digunakan. Artikel ini akan memperkenalkan cara menggunakan Layui untuk mencapai kesan penukaran dan regangan imej, serta memberikan contoh kod khusus. 1. Pelaksanaan kesan penukaran imej struktur HTML Pertama, kita perlu menyediakan beberapa struktur HTML untuk
