자바스크립트에서 이미지 전환의 애니메이션 효과를 얻는 방법(코드)-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

자바스크립트에서 이미지 전환의 애니메이션 효과를 얻는 방법(코드)

不言

Aug 23, 2018 am 11:26 AM

사진 전환

이 글의 내용은 자바스크립트에서 이미지 전환의 애니메이션 효과(코드)를 구현하는 방법에 대한 내용입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

첫 번째 렌더링은 대략 이렇습니다. 왼쪽 버튼을 클릭하면 사진이 전환됩니다.

아주 간단한 것 같지만 여전히 난관이 많기 때문에 이 사례를 골라서 꼼꼼히 분석해보겠습니다.

1단계: 레이아웃

<!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>

로그인 후 복사

2단계: 데이터 및 초기화

1) 데이터 찾기

2) 페이지 초기화

	<script type="text/javascript">
		window.onload = function(){
			var op = document.getElementById("pic");
			var oImg = op.getElementsByTagName(&#39;img&#39;)[0];
			var oSpan = op.getElementsByTagName(&#39;span&#39;)[0];
			var oP = op.getElementsByTagName(&#39;p&#39;)[0];
			var oUl = op.getElementsByTagName(&#39;ul&#39;)[0];
			
			var arrSrc = [&#39;img/1.jpeg&#39;,&#39;img/2.jpg&#39;,&#39;img/3.jpg&#39;,&#39;img/4.jpg&#39;,&#39;img/5.jpg&#39;];
			var arrText = [&#39;图片描述：第一张&#39;,&#39;图片描述：第二张&#39;,&#39;图片描述：第三张&#39;,&#39;图片描述：第四张&#39;,&#39;图片描述：第五张&#39;];
			
			//一般有数组就需要一个值
			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 += &#39;<li></li>&#39;;
			}
			
		}
	</script>

로그인 후 복사

3단계: 이미지 전환, 이미지 전환 및 지금까지의 텍스트 표시 기능에는 구현되었지만 옆에 있는 ul의 효과는 아직 구현되지 않았습니다.

var oLi = oUl.getElementsByTagName(&#39;li&#39;);

//切换图片
			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;
				}
			}

로그인 후 복사

4단계: li의 클래스 스타일을 추가합니다.

아이디어 1:

li의 모든 스타일을 지우고 클릭하는 스타일에 추가하세요.

var oldLi = 0;

//初始化
oLi[oldLi].className = &#39;active&#39;;

//在点击事件中
//循环将class清空
			for(var j=0;j<arrSrc.length;j++){
				oLi[j].className = "";					
			}
			oLi[id].className = "active";

로그인 후 복사

아이디어 2:

이전 항목을 지우고 현재 추가

변수를 정의하고 oldLi는 클릭한 이전 값을 저장합니다.

기본값은 0

다음 항목을 클릭하면 0(기본값)이 지워집니다. .

그리고 현재 클릭된 li oldLi = this.index;

그런 다음 현재 li의 클래스 속성을 설정합니다

oLi[oldLi].className = &#39;&#39;;
					oldLi = id;
					this.className = &#39;active&#39;;

로그인 후 복사

Completed;

아래에 전체 코드와 스크린샷을 게시하세요

<!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(&#39;img&#39;)[0];
            var oSpan = oDiv.getElementsByTagName(&#39;span&#39;)[0];
            var oP = oDiv.getElementsByTagName(&#39;p&#39;)[0];
            var oUl = oDiv.getElementsByTagName(&#39;ul&#39;)[0];
            var oLi = oUl.getElementsByTagName(&#39;li&#39;);
            
            var arrSrc = [&#39;img/1.jpeg&#39;,&#39;img/2.jpg&#39;,&#39;img/3.jpg&#39;,&#39;img/4.jpg&#39;,&#39;img/5.jpg&#39;];
            var arrText = [&#39;图片描述：第一张&#39;,&#39;图片描述：第二张&#39;,&#39;图片描述：第三张&#39;,&#39;图片描述：第四张&#39;,&#39;图片描述：第五张&#39;];
            
            //一般有数组就需要一个值
            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 += &#39;<li></li>&#39;;
            }
            oLi[oldLi].className = &#39;active&#39;;
            
            
            //切换图片
            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 = &#39;&#39;;
                    oldLi = id;
                    this.className = &#39;active&#39;;
                }
            }
            
        }
    </script>
    <body>
        <div id="pic">
            <img src="img/1.jpeg"/>
            <span>- / -</span>
            <p>图片描述正在加载中...</p>
            <ul>
                <!--<li class="active"></li>-->
            </ul>
        </div>
    </body>
</html>

로그인 후 복사

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7503

Cakephp 튜토리얼

1377

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

JavaScript에서 이미지의 원활한 왼쪽 및 오른쪽 슬라이딩 전환 효과를 얻는 방법은 무엇입니까? Oct 19, 2023 am 08:56 AM

JavaScript를 사용하여 이미지의 원활한 왼쪽 및 오른쪽 슬라이딩 전환 효과를 얻는 방법은 무엇입니까? 인터넷의 발달로 인해 웹 디자인에서는 이미지가 페이지의 중요한 요소로 사용되는 경우가 많습니다. 그림의 전환 효과는 페이지의 아름다움과 상호 작용에 중요한 영향을 미칩니다. 이 기사에서는 JavaScript를 사용하여 이미지의 원활한 왼쪽-오른쪽 슬라이딩 전환 효과를 구현하고 특정 코드 예제를 첨부하는 방법을 살펴보겠습니다. 그림의 원활한 왼쪽 및 오른쪽 슬라이딩 전환 효과를 얻으려면 먼저 다음을 수행해야 합니다. 그림 컨테이너를 만들고 사용

순수 CSS를 통해 이미지 캐러셀 효과를 얻는 방법에 대한 방법 및 기술 Oct 18, 2023 am 08:27 AM

순수 CSS를 통해 이미지 캐러셀 효과를 얻는 방법에 대한 방법 및 기술 최신 웹 디자인에서 이미지 캐러셀 효과는 종종 여러 이미지나 광고를 차례로 표시하는 데 사용됩니다. 이미지 캐러셀 효과를 얻는 방법에는 여러 가지가 있으며, 일반적인 방법 중 하나는 CSS 애니메이션을 사용하는 것입니다. 이 기사에서는 순수 CSS를 통해 이미지 캐러셀 효과를 얻는 방법과 기술을 소개하고 구체적인 코드 예제를 제공합니다. 1. HTML 구조 먼저 캐러셀을 위한 이미지 요소를 HTML로 작성해야 합니다. 다음은 간단한 HTML 구조의 예입니다: &l

HTML, CSS 및 jQuery를 사용하여 반응형 이미지 전환 효과를 만드는 방법 Oct 24, 2023 am 08:01 AM

반응형 이미지 전환 효과를 만드는 것은 프런트엔드 개발의 일반적인 작업 중 하나입니다. 이 기사에서는 HTML, CSS 및 jQuery를 사용하여 이러한 효과를 얻을 것입니다. 다음은 자세한 단계와 구체적인 코드 예시입니다. HTML 구조 먼저 이미지 전환 효과에 필요한 HTML 구조를 만들어야 합니다. 다음 코드 예제를 사용하여 간단한 HTML 구조를 만들 수 있습니다. <divclass="slider-container">

Vue를 통해 이미지 전환 및 캐러셀 효과를 얻는 방법은 무엇입니까? Aug 18, 2023 pm 04:57 PM

Vue를 통해 이미지 전환 및 캐러셀 효과를 얻는 방법은 무엇입니까? Vue는 웹 애플리케이션에서 데이터 및 상호 작용 논리를 처리하는 우아하고 효율적인 방법을 제공하는 사용자 인터페이스 구축을 위한 JavaScript 프레임워크입니다. Vue의 많은 뛰어난 기능 중 하나는 이미지 전환 및 캐러셀 효과를 쉽게 처리할 수 있다는 것입니다. 이 기사에서는 Vue를 사용하여 이러한 효과를 얻는 방법을 소개합니다. 먼저, 이미지를 표시하기 위한 몇 가지 기본 HTML 구조와 스타일을 준비해야 합니다. 우리는 <i를 사용할 수 있습니다.

이미지 전환의 그라데이션 효과를 얻기 위해 JavaScript를 사용하는 방법은 무엇입니까? Oct 21, 2023 am 09:33 AM

이미지 전환의 그라데이션 효과를 얻기 위해 JavaScript를 사용하는 방법은 무엇입니까? 인터넷의 발달로 인해 웹사이트 디자인은 사용자 경험에 점점 더 많은 관심을 기울이고 있습니다. 이미지 전환은 웹사이트의 일반적인 대화형 효과 중 하나입니다. 이미지의 그라데이션 전환은 사용자의 관심을 더 잘 끌 수 있습니다. 이 기사에서는 JavaScript를 사용하여 이미지 전환의 그라데이션 효과를 얻는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 시작하기 전에 몇 가지 이미지 리소스를 준비해야 합니다. "image1.jpg", "라는 세 개의 사진이 있다고 가정합니다.

확대/축소 및 페이드 애니메이션을 추가하면서 JavaScript를 사용하여 이미지의 원활한 왼쪽 및 오른쪽 슬라이딩 전환 효과를 얻는 방법은 무엇입니까? Oct 25, 2023 am 09:39 AM

확대/축소 및 페이드 애니메이션을 추가하면서 JavaScript를 사용하여 이미지의 원활한 왼쪽 및 오른쪽 슬라이딩 전환 효과를 얻는 방법은 무엇입니까? 웹 사이트 개발에서 이미지의 슬라이딩 전환 효과는 매우 일반적인 요구 사항입니다. 여기에서는 확대/축소 및 페이드 애니메이션을 추가하면서 JavaScript를 사용하여 왼쪽 및 오른쪽 원활한 슬라이딩 전환 효과를 얻는 방법을 소개합니다. 이 문서에서는 이 효과를 쉽게 얻을 수 있도록 자세한 코드 예제를 제공합니다. 먼저 이미지를 배치할 HTML 컨테이너를 준비하고 컨테이너의

Layui를 사용하여 이미지 전환 캐러셀 효과를 얻는 방법 Oct 26, 2023 am 11:52 AM

이미지 전환 캐러셀 효과를 얻기 위해 Layui를 사용하는 방법에는 특정 코드 샘플 제목이 필요합니다. 이미지 전환 캐러셀 효과를 얻기 위해 Layui를 사용하는 방법에 대한 자세한 설명 소개: 현대 웹 디자인에서 이미지 전환 캐러셀 효과는 일반적인 요소 중 하나가 되었습니다. 이미지 캐러셀을 사용하면 웹페이지를 더욱 역동적이고 매력적으로 만들 수 있습니다. 이 기사에서는 Layui를 기반으로 이미지 전환 캐러셀 효과를 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. Layui 캐러셀 구성 요소 소개 Layui는 다음을 포함하는 클래식 프런트 엔드 UI 프레임워크입니다.

Layui를 사용하여 이미지 전환 및 스트레칭 효과를 얻는 방법 Oct 25, 2023 am 08:13 AM

Layui를 사용하여 이미지 전환 및 늘이기 효과를 얻는 방법 최근 웹 프런트 엔드 기술의 급속한 발전으로 웹 페이지의 기능을 아름답게 하고 향상시키기 위해 점점 더 많은 프레임워크와 라이브러리가 사용됩니다. 그중 Layui는 풍부한 UI 구성 요소와 사용하기 쉬운 기능 확장을 제공하는 매우 인기 있는 프런트 엔드 프레임워크입니다. 이 기사에서는 Layui를 사용하여 이미지 전환 및 스트레칭 효과를 얻는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. 이미지 전환 효과 HTML 구조 구현 먼저, 이미지 전환 효과를 위한 HTML 구조를 준비해야 합니다.

See all articles

자바스크립트에서 이미지 전환의 애니메이션 효과를 얻는 방법(코드)

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제