Pictures_jquery의 회전문 효과를 달성하기 위한 jQuery의 원리 분석

이 기사에서는 이미지의 회전문 효과를 구현하기 위해 jQuery의 원리를 분석합니다. 참고할 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

여기에서는 수직 상향 회전문 효과가 아닌 수평 회전문 효과만 설명합니다. 원리는 동일하지만 수평 회전문 효과에는 작은 함정이 있습니다. 나중에 설명하겠습니다

먼저 코드를 입력하세요:

HTML:

<div class="box">  
  <div style="width: 1000px;" id="boxdiv">
   <ul>
    <li style="display: block;" title="清灵少女宛如梦境仙女"><a href="#">
     <img src="images/110927/11-11092G32227.jpg" /></a></li>
    <li title="美女海边性感透视装诱惑"><a href="#">
     <img src="images/130621/1-130621145931-50.jpg" /></a></li>
    <li title="夏小薇：百变小魔女变身性感数码宝贝"><a href="#">
     <img src="images/130620/19-130620115013.jpg" /></a></li>
    <li title="夏小薇化身《杀破狼》粉色妖姬鲜嫩欲滴"><a href="#">
     <img src="images/130315/5-130315135240.jpg" /></a></li>
   </ul>
  </div>
</div>

8f9e4409b06fde1ff1d3a80f075ca0ed에는 또 다른 div가 포함되어 있으며 수직 회전문 아래에 존재하지 않는 피트를 해결하기 위해 매우 큰 너비가 설정되어 있습니다. 이 피트의 효과는 li 태그 플로트가 내부에 DIV 없이 남아 있을 때 디스플레이의 마지막 그림이 그림 캐러셀 이후 아래에서 위로 점프한다는 것입니다. 이는 플로트 자체의 특성으로 인해 발생합니다. 상위 요소의 너비가 충분하지 않으면 다음 요소가 자동으로 아래로 가라앉고 왼쪽으로 이동합니다. 위쪽 너비가 충분하면 자동으로 위로 떠오릅니다. 이렇게 하면 디스플레이의 마지막 그림이 점프하게 됩니다. 이 문제를 해결하려면 DIV를 중첩하고 8f9e4409b06fde1ff1d3a80f075ca0ed의 오버플로 CSS 스타일을 설정하세요.

CSS:

.box
{
 width: 800px;
 height: 200px;
 margin-top: 100px;
 margin-left: 100px;
 overflow: hidden;
}
.box img
{
 border-style: none;
 height: 200px;
}
.box ul
{
 margin: 0px;
 padding: 0px;
 list-style-type: none;
}
.box ul li
{
  float: left;
}

스크립트:

<script type="text/javascript">
$(document).ready(function () {
 new ZouMa().Start();
});
function ZouMa() {
 this.maxLength = 3; //最低显示数   
 this.Timer = 2000;//计时器间隔时间
 this.Ul = $(".box ul");
 var handId;//计时器id
 var self = this;
 this.Start = function () {
  if (self.Ul.children().length < this.maxLength) {
   self.Ul.append(self.Ul.children().clone());
  }
  handId = setInterval(self.Play, self.Timer);
 }
 this.Play = function () {
  var img = self.Ul.children().eq(0);
  var left = img.children().eq(0).width();
  img.animate({ "marginLeft": (-1 * left) + "px" }, 600, function () {
   //appendTo函数是实现走马灯一直不间断播放的秘诀。
   //目前网上看到的很多走马灯，走到最后一张的时候，会立马闪回第一张，而不是继续从后往前推进，即是没有明白该函数的作用的原因
   $(this).css("margin-left", "auto").appendTo(self.Ul);
  });
 }
}
</script>

여기에서는 평소와 같이 jquery의 애니메이션 효과 기능인 animate를 사용하여 회전문 효과를 구현하고,appendTo 함수와 결합하여 무한 재생 효과를 구현합니다.

appendTo 기능은 jquery API 문서를, animate 기능은 API 문서를 참고하세요

jQuery 특수 효과와 관련된 더 많은 콘텐츠에 관심이 있는 독자는 이 사이트의 특별 주제인 "jQuery 애니메이션 및 특수 효과 사용 요약" 및 "일반적인 클래식 요약"을 확인할 수 있습니다. jQuery 특수 효과"

이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.