집 > 기사 > 웹 프론트엔드 > js를 사용하여 이미지를 클릭한 후 이미지 전환 효과를 얻는 방법은 무엇입니까? (코드 예)

js를 사용하여 이미지를 클릭한 후 이미지 전환 효과를 얻는 방법은 무엇입니까? (코드 예)

藏色散人원래의: 2018-08-15 17:00:456104검색

이 글에서는 주로 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 그림 효과 전환 아이디어 단계: 먼저 두 개의 새로운 그래픽, 두 개의 그림 A와 B를 만듭니다. A가 마지막에 놓이므로 A가 맨 위에 있습니다. imgA.style.opacity=1; 이 문장은 매우 중요합니다. 이 값이 설정되지 않으면 함수에서 호출될 때 값이 0이 됩니다. imgA에 대한 클릭 이벤트만 수신했습니다.

상단 이미지 클릭 시 imgOpacity가 30밀리초마다 실행되도록 시간 간격 기능을 설정하고, 3초 후에 ChangeImage가 실행되도록 타이머 스위치를 설정하세요.

그림 A의 투명도를 실행할 때마다 0.01씩, 100번, 30*100=3000밀리초로 줄이도록 합니다. 3초 후에 사진이 투명해집니다. 투명할 때 이벤트 간격을 지웁니다. functionclearInterval(id); 시간 간격을 지웁니다. 즉, 더 이상 30밀리초마다 실행하지 않습니다. 투명도를 1로 재설정하고 이미지 B의 주소를 다음 이미지로 설정합니다.
이미지를 3초간 클릭하면 ChangeImage 기능이 실행됩니다. 현재 위치를 +1하세요. 그림 A의 주소를 다음 그림으로 설정합니다.

js를 사용하여 이미지를 클릭한 후 이미지 전환 효과를 얻는 방법은 무엇입니까? (코드 예)

관련 기사