Heim > Web-Frontend > js-Tutorial > jquery-Bildwechsel-Plugin_jquery

jquery-Bildwechsel-Plugin_jquery

WBOY
Freigeben: 2016-05-16 16:09:00
Original
979 Leute haben es durchsucht

Code kopieren Der Code lautet wie folgt:

/**
 * 图片切换插件
 * Dependence jquery-1.7.2.min.js
 **/
(function ($) {
  //调用方式 $('#silder').imgSilder({s_width:564, s_height:293, is_showTit:true, s_times:3000,css_link:'css/style.css'});  容器必须加入 id silder_list or class silder_list
  /*参考结构
   

       

               

  •                 刘淇同志参观北京市志愿者之家
               

  •            

  •                 刘淇同志与志愿者合影
               

  •            

  •                 刘淇同志到北京大学人民医院调研
               

  •            

  •                 2013中国志愿服务国际交流大会在京举行
               
  •                    
           

   

  */
  $.fn.silderDefaults = { //默认参数
    s_width:500, //容器宽度
    s_height:500, //容器高度
    is_showTit:true, // 是否显示图片标题 false :不显示,true :显示
    s_times:3000, //设置滚动时间
    css_link:'css/style.css'
  };
  $.extendSilder = function (obj,opt) { //obj 元素对象,opt 参数对象
    var g = {  //公共方法, 外部可调用
      //初始化
        init: function () {
            var wh ={width:opt.s_width,height:opt.s_height};
            var pagesize=0; //页码
            var silderList = $('#silder_list',g.obj);
            var silderList_li = $('#silder_list li',g.obj);
            g.LoadCSS(opt.css_link); //样式文件导入
            g.obj.css(wh); silderList.css(wh); silderList_li.find('img').css(wh); //设置宽高属性
            var currHtml = ""; //加入播放页码 及文字描述
            if(opt.is_showTit){ //判断是否显示标题
                currHtml += "
";
            }
                img_size = silderList_li.size();//Anzahl der Bilder
             currHtml = "
    ";//Seitencode-Injection
    for(var i=0; i < img_size; i ){
                      currHtml = "
  • " parseInt((1 i),10) "
  • ";
                }
                  currHtml ="
";
               silderList_li.eq(0).show().siblings().hide(); //Initialisieren, um andere Bilder auszublenden
               g.obj.append(currHtml);//Paginierungsnummer einfügen
            var silderPage = $('#silder_page',g.obj);
              var silderPage_li =$('#silder_page li',g.obj);
              silderPage_li.eq(0).addClass('current');
                      if(opt.is_showTit){ //Bildbeschreibung initialisieren
$('#silder_desc').text(silderList_li.eq(0).find('img').attr('alt'));
            }
              silderPage_li.on('click',function(){
              pagesize = $(this).index();
                   silderList_li.eq(pagesize).fadeIn(1000).siblings().fadeOut(100);
                   $(this).addClass('current').siblings().removeClass('current');
If(opt.is_showTit){
$('#silder_desc').text(silderList_li.eq(pagesize).find('img').attr('alt'));
                }
            });
          var t;
               silderList.hover(function(){window.clearInterval(t); return;},function(){ t = window.setInterval(function(){
If(pagesize < img_size && pagesize >= 0)
                                               {
                      silderList_li.eq(pagesize).fadeIn(1000).siblings().fadeOut(100);
                    silderPage_li.eq(pagesize).addClass('current').siblings().removeClass('current');
If(opt.is_showTit){
$('#silder_desc').text(silderList_li.eq(pagesize).find('img').attr('alt'));
                 }
Seitengröße ;
If(pagesize >= img_size){
                    Seitengröße = 0;
                 }
                }
                },opt.s_times);}).trigger("mouseout"); //Automatische Animation stoppen, wenn sie angehalten wird, Trigger fungiert als Standardtrigger
},
            LoadCSS:function(url){ //Neues CSS
            var s = document.createElement("LINK");
                  s.rel = "stylesheet";
            s.type = "text/css";
            s.href = url;
                   document.getElementsByTagName("HEAD")[0].appendChild(s);
          }
};
g.obj = $(obj);
g.init();
Geben Sie g;
zurück }
$.fn.imgSilder = Funktion (Optionen) {
If (this.length == 0) return; //Bestimmen Sie, ob das Objekt existiert
This.each(function () {
Wenn (this.usedSilder) return;
var opt = $.extend({}, $.fn.silderDefaults, options); //Zugeordnete Parameter zusammenführen
This.usedSilder = $.extendSilder(this, opt);
});
}
})(jQuery);

Das Obige ist der gesamte Inhalt des Codes, der in diesem Artikel mit Ihnen geteilt wird. Ich hoffe, er wird Ihnen gefallen

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage