欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

js点击图片后怎么实现图片切换效果?(代码示例)

程序员文章站 2022-04-01 13:10:05
...
本篇文章主要介绍关于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点击切换图片效果的具体介绍,具有一定的参考价值,希望对大家有所帮助。

以上就是js点击图片后怎么实现图片切换效果?(代码示例)的详细内容,更多请关注其它相关文章!