jQuery 간단한 사용자 정의 이미지 캐러셀 플러그인 및 사용 예-PHP开发-php.cn

집

php教程

PHP开发

jQuery 간단한 사용자 정의 이미지 캐러셀 플러그인 및 사용 예

高洛峰

Dec 06, 2016 pm 01:18 PM

jquery

이 기사의 예에서는 jQuery의 간단한 사용자 정의 이미지 캐러셀 플러그인과 그 사용법을 설명합니다. 참고하실 수 있도록 여러분과 공유해 드리며, 자세한 내용은 다음과 같습니다.

다른 분들의 플러그인을 자주 사용하는데, 이제는 이를 기념하기 위해 직접 작성하게 되었습니다.

jQuery.banner.js:

/*
* banner 0.1
* 使用banner 实现图片定时切换 鼠标经过停止动画
* 鼠标离开，继续动画
*/
;(function($){
  $.fn.banner =function(options){
    //各种属性和参数
    var defaults ={
       picWidth:"1000",
      picHeight:"300",
      speed:"1500"
    };
    var totalW = 0;  //保存总的动画宽度
    var timer = null; //保存定时器
    var current = 0; //保存当前动画到第N张图，下次从这里开始
    var totalNum = 0; //保存总的图数
    var Dsqtime = 0; //定义定时器时间 【外传参数】
    var Dhtime = 0;  //定义动画时间
    var count = 0 ;
    //合并多个对象为一个，即有新参数 用新的，否则用默认的
    var options = $.extend(defaults, options);
    this.each(function(){
      //实现代码
      var __this = $(this);
      Dsqtime = options.speed;
      Dhtime = Dsqtime/3;
      //初始化
      init(__this);
      //调用动画
      show(__this, options.picWidth,current);
      //鼠标经过时事件
      __this.find(&#39;ul li&#39;).bind(&#39;mouseover&#39;,function(){
        window.clearInterval(timer); //清除定时器
      });
      __this.find(&#39;ul li&#39;).bind(&#39;mouseout&#39;,function(){
        show(__this, options.picWidth,current);
         //接着上一次动画轮播
      });
    });
    //初始化 设定父容器宽度
    function init(obj){
      obj.find(&#39;ul li&#39;).each(function(){
         totalW += $(this).width();
         totalNum++;
       });
      obj.find(&#39;ul&#39;).width(totalW);
    }
    //开始动画显示
    function show(obj, width, current){
      timer = setInterval(function(){
      obj.find(&#39;ul&#39;).animate({&#39;margin-left&#39;:&#39;-&#39;+count*width+&#39;px&#39;},
         Dhtime);
          current = count;
          count++;
          if(count == totalNum){
           count =0;
          }
       }, Dsqtime);
    }
  };
})(jQuery);

html 코드:

<!doctype html>
<html>
 <head>
   <meta charset="utf8"/>
   <script type="text/javascript" src="./js/jquery.min.js"></script>
   <script type="text/javascript" src="./js/jquery.banner.js"></script>
   <script type="text/javascript">
     $(document).ready(function(){
       $(&#39;.wrap&#39;).banner({
        picWidth:"1000",
        picHeight:"300",
        speed:"6000"
       });
     });
   </script>
   <style type="text/css">
     *{margin:0;padding:0;}
     .wrap{width:1000px; height:300px; overflow:hidden; margin:0 auto;}
     .wrap ul li{float:left; list-style:none;}
     .wrap ul li img{width:1000px;height:300px;}
     .clear{clear: both;}
   </style>
 </head>
 <body>
   <div>
    <div class="wrap">
      <ul>
        <li><a href="#"><img  src="/static/imghwm/default1.png"  data-src="./images/1.jpg"  class="lazy"  / alt="jQuery 간단한 사용자 정의 이미지 캐러셀 플러그인 및 사용 예" ></a></li>
        <li><a href="#"><img  src="/static/imghwm/default1.png"  data-src="./images/2.jpg"  class="lazy"  / alt="jQuery 간단한 사용자 정의 이미지 캐러셀 플러그인 및 사용 예" ></a></li>
        <li><a href="#"><img  src="/static/imghwm/default1.png"  data-src="./images/3.jpg"  class="lazy"  / alt="jQuery 간단한 사용자 정의 이미지 캐러셀 플러그인 및 사용 예" ></a></li>
        <li><a href="#"><img  src="/static/imghwm/default1.png"  data-src="./images/4.jpg"  class="lazy"  / alt="jQuery 간단한 사용자 정의 이미지 캐러셀 플러그인 및 사용 예" ></a></li>
        <li><a href="#"><img  src="/static/imghwm/default1.png"  data-src="./images/5.jpg"  class="lazy"  / alt="jQuery 간단한 사용자 정의 이미지 캐러셀 플러그인 및 사용 예" ></a></li>
      </ul>
      <div class="clear"></div>
    </div>
   </div>
 </body>
</html>

렌더링:

jQuery 간단한 사용자 정의 이미지 캐러셀 플러그인 및 사용 예

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

뜨거운 도구

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는