js点击图片后怎么实现图片切换效果？（代码示例）
- 藏色散人 原创
- 2018-08-15 17:00:45 5899浏览
本篇文章主要介绍关于js点击切换图片的效果实现方法。希望对有需要的朋友有所帮助。
js切换图片效果代码示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js图片切换特效代码示例</title>
<style>
img
{
width: 640px;
height: 214px;
position: absolute;
}
</style>
</head>
<body>
<script>
var imgArr=[
"image/a.jpeg",
"image/b.jpeg",
"image/c.jpeg",
"image/d.jpeg",
"image/e.jpeg"
];
var position=0;
var imgB=new Image();
imgB.src=imgArr[1];
imgB.id="imgB";
document.body.appendChild(imgB);
var imgA=new Image();
imgA.src=imgArr[0];
imgA.id="imgA";
document.body.appendChild(imgA);
imgA.style.opacity=1;
imgA.addEventListener("click",clickHandler);
var id=0;
function clickHandler() {
imgA.removeEventListener("click",clickHandler);
id=setInterval(imgOpacity,30);
setTimeout(changImage,3000)
}
function imgOpacity() {
if(imgA.style.opacity==0){
clearInterval(id);
imgA.style.opacity=1;
if(position+1>4){
imgB.src=imgArr[0]
}else{
imgB.src=imgArr[position+1]
}
return;
}
imgA.style.opacity-=0.01;
}
function changImage() {
position++;
if(position>4){
position=0;
}
imgA.src=imgArr[position];
imgA.addEventListener("click",clickHandler);
}
</script>
</body>
</html>js切换图片效果思路步骤： 首先新建两个图形， 2个图片A，B。 A是最后放入的，因此，A在最上面。 imgA.style.opacity=1;这句话非常重要，如果没有设置这个值，当在函数中调用时，该数值是0。我们只给imgA做了侦听点击事件。
当点击最上面的图片时，设置一个时间间隔函数用来每30毫秒执行一次imgOpacity，又设置一个定时开关，3秒后执行changImage。
让图片A的透明度，每次执行减少0.01，执行100次，30*100=3000毫秒。3秒后图片透明。当它透明时，我们清除这个事件间隔函数 clearInterval(id);清除时间间隔，也就是我们不再没30毫秒执行一次了。我们重新设置它的透明度为1，并且设置图片B的地址是下一张图片。
当点击图片3秒后，执行changImage该函数。让当前定位+1。设置图片A的地址为下一张图片。
涉及相关知识点介绍：
position 记录当前的图片位置
以上所述就是关于实现js点击切换图片效果的具体介绍，具有一定的参考价值，希望对大家有所帮助。
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
