Rumah >hujung hadapan web >tutorial js >js点击图片后怎么实现图片切换效果？（代码示例）

js点击图片后怎么实现图片切换效果？（代码示例）

藏色散人asal: 2018-08-15 17:00:456133semak imbas

本篇文章主要介绍关于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点击切换图片效果的具体介绍，具有一定的参考价值，希望对大家有所帮助。

Atas ialah kandungan terperinci js点击图片后怎么实现图片切换效果？（代码示例）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：js中的toggle函数的具体使用方法-切换效果示例Artikel seterusnya：js数据类型转换有哪些？js数据类型转换的方法总结

Artikel berkaitan

Lihat lagi

JS切换图片幻灯切换效果