jQuery 이미지 전환 애니메이션 효과

아이디어: 모두가 Taobao나 다른 웹사이트를 방문한 적이 있을 것으로 생각하는데, 일반적으로 그림 애니메이션 전환 효과가 어떻게 이루어지나요? 블로거로서 실력이 많이 부족해서 간단한 예시를 만들어봤습니다!

먼저 사진에는 일반적으로 왼쪽 전환 버튼과 오른쪽 전환 버튼이라는 두 개의 사진 버튼이 있습니다. 왼쪽 전환 버튼을 클릭하면 원본 사진이 오른쪽으로 XX픽셀 이동하고, 그러면 왼쪽의 그림이 상자에 표시되고 원본 그림은 숨겨집니다. 오른쪽 스위치 버튼을 클릭하는 원리는 왼쪽 버튼과 유사합니다. 그러나 동일한 버튼을 계속 클릭하면 원래 그림 전환 상자에 그림이 3개만 있는 경우 마지막 그림에 도달했을 때 판단을 내려 첫 번째 또는 마지막 그림으로 다시 이동해야 합니다. 아이디어를 분석한 후 코드를 살펴보겠습니다.

1. HTML 코드

<div id="divBox">
  <div id="imgBox">
    <div class="img"><img  src="0.jpg"/ alt="jQuery 이미지 전환 애니메이션 효과" ></div>
    <div class="img"><img  src="1.jpg"/ alt="jQuery 이미지 전환 애니메이션 효과" ></div>
    <div class="img"><img  src="3.jpg"/ alt="jQuery 이미지 전환 애니메이션 효과" ></div>
  </div>
</div>
<div id="bth">
  <button id="zou">左</button>
  <button id="you">右</button>
</div>

divBox는 다음을 표시하는 상자입니다. 그림

imgBox는 모든 그림을 감싸는 DIV입니다. 효과를 얻으려면 이 DIV를 이동하기만 하면 됩니다.

bth에는 그림을 전환하는 두 개의 버튼이 있습니다.

2 . CSS 코드

#divBox{
height:315px;
width:750px;
position:absolute;
border:#000000 1px solid;
overflow:hidden;}
 
#imgBox{
position:absolute;
width:2550px;}
 
.img{
float:left;}
 
#bth{
margin-left:800px;}

#divBox는 그림 표시 상자의 너비, 높이, 절대 위치 및 테두리를 설정합니다. 숨김, 이 경우 DIV의 콘텐츠가 이 DIV의 크기를 초과하면 오버플로 부분이 숨겨집니다.

#imgBox 절대 위치와 너비를 설정합니다. 이 너비는 모든 사진 너비의 합에 따라 달라집니다. 여기에는 3개의 사진이 있으며 너비가 그렇지 않은 경우 각 사진의 너비는 750px입니다. 여기에 주어진 DIV 내부의 작은 것은 왼쪽으로 떠 있을 수 없습니다.

.img는 왼쪽으로 부동하도록 설정되어 모든 이미지가 왼쪽으로 부동하고 수평선에 유지됩니다.

#bth 여백을 설정합니다. 위의 div는 절대 위치를 가지므로 div가 가려져 보이지 않으므로 div를 밖으로 이동합니다.

3. 스크립트 코드

$(function(){
  //定义一个变量保存距离左边的位置
  var leftNum=0;
  $("#zou").click(function(){
    if(leftNum==0){
      //移动到最后一张图片
      $("#imgBox").animate({left:leftNum=-1500},500);
    }else{
      $("#imgBox").animate({left:leftNum=leftNum+750},500);
    }
     
  });
   
  $("#you").click(function(){
    if(leftNum==-1500){
      //移动到第一张图片
      $("#imgBox").animate({left:leftNum=0},500);
    }else{
      $("#imgBox").animate({left:leftNum=leftNum-750},500);
    }
     
  });
});

팁: jQuery 패키지를 가져와야 합니다.

두 개의 스크립트 코드를 작성했습니다. 클릭 이벤트는 왼쪽으로의 거리를 저장하는 leftNum

속성을 ​​정의합니다. 먼저 왼쪽 스위치 버튼 클릭 이벤트를 살펴보겠습니다. 버튼을 클릭하면 먼저 leftNum이 0인지 확인합니다. 가 0이면 첫 번째 그림입니다. 첫 번째 그림의 왼쪽에 그림이 없으면 어떻게 해야 합니까? 여기서는 애니메이션 효과를 얻기 위해 애니메이션 메서드를 호출합니다. left: left=-1500, 왜 -1500인가요? left가 0이면 첫 번째 그림이고, left가 -750이면 두 번째 그림입니다. 세 번째 사진이므로 마지막 사진의 위치 = - (사진 너비)X(총 사진 수)-1입니다. leftNum이 0이 아니면 원래 값에 750px을 추가합니다.

오른쪽 스위치 버튼의 원리는 왼쪽 스위치 버튼과 유사하므로 자세한 설명은 생략하겠습니다.

4. 요약:

이해하는 친구는 스스로 실천할 수 있지만 결국 실천하면 진실이 드러납니다.

더 멋진 학생을 만들고 싶다면 비공개 메시지를 보내주세요. 결국 사진에 점 몇 개를 찍는 등 아직 언급하지 않은 기능이 있습니다. 점을 클릭하면 애니메이션이 해당 애니메이션으로 전환됩니다. 사진에서 사진 회전식 효과를 설정하고 몇 초마다 사진을 전환할 수도 있습니다.

버튼을 더욱 아름답게 만들 수도 있습니다. 사진의 왼쪽과 오른쪽에 사진 버튼을 추가하면 더욱 아름답습니다.