jQuery_jquery로 구현한 포커스 이미지를 좌우로 이동하는 효과

본 글의 예시에서는 jQuery로 구현한 포커스 이미지를 좌우로 이동하는 효과를 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

jquery 부분:

$(function () {
  var _speed = 1000;
  var _len = 0;
  var _size = 150;
  var _direction = 'left';
  function mar(){
    if(_direction == 'left'){
      if(_len >= 450){
       _direction = 'right';
      }else{
       $(".flow ul").animate({"margin-left":"-=" + _size + "px"});
       _len += _size;
      }
    }else{
      if(_len <= 0){
       _direction = 'left';
      }else{
       $(".flow ul").animate({"margin-left":"+=" + _size + "px"});
       _len -= _size;
      }
    }
  }
  var _go = setInterval(mar,_speed);
  $("#pic_left").click(function (){
   _direction = 'left';
  });
  $("#pic_right").click(function (){
   _direction = 'right';
  });
  $(".flow li").mouseover(function (){
    clearInterval(_go);
  }).mouseout(function (){
    _go = setInterval(mar,_speed);
  });
});

html 부분

<div class="salebox">
  <A class="left" id="pic_left">left</A>
  <DIV class="pcont" id="ISL_Cont_1">
    <DIV class="ScrCont">
      <div class="flowbox" style="width:150px; height:60px; overflow:hidden;float:left;">
        <div class="flow" style="width:150px;height:60px;">
          <ul >
           <li><img  src="/static/imghwm/default1.png"  data-src="__PUBLIC__/images/demo/01.jpg"  class="lazy" mce_    style="max-width:90%" height="60px" alt="jQuery_jquery로 구현한 포커스 이미지를 좌우로 이동하는 효과" ></li>
           <li><img  src="/static/imghwm/default1.png"  data-src="__PUBLIC__/images/demo/02.jpg"  class="lazy" mce_    style="max-width:90%" height="60px" alt="jQuery_jquery로 구현한 포커스 이미지를 좌우로 이동하는 효과" ></li>
           <li><img  src="/static/imghwm/default1.png"  data-src="__PUBLIC__/images/demo/03.jpg"  class="lazy" mce_    style="max-width:90%" height="60px" alt="jQuery_jquery로 구현한 포커스 이미지를 좌우로 이동하는 효과" ></li>
           <li><img  src="/static/imghwm/default1.png"  data-src="__PUBLIC__/images/demo/04.jpg"  class="lazy" mce_    style="max-width:90%" height="60px" alt="jQuery_jquery로 구현한 포커스 이미지를 좌우로 이동하는 효과" ></li>
          </ul>
        </div>
      </div>
    </DIV>
   </DIV>
  <A class="right" id="pic_right">right</A>
</div>

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

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