jquery 滚动插件

jquery 滚动插件

来园第一篇文章【jquery 滚动插件】

2011-12-12 21:03 by 陈放, 506 visits,  收藏 ,  编辑

 
  //  内部定制开放
  //  author:陈放,
  //  email:lanhaigcb@163.com
  //  qq:314247352  
 (function ($) {
     var  obj =  null ;
     var  time =  2000 ;
     var  t;
    $.fn.hkRoll = function (options) {
        obj =  this ;
         var  defaults = {
            imgUrlList:  "" ,  //  图片地址,号隔开  
             idList:  "" ,  //  id地址,号隔开  
             redirectUrl:  "" ,  //  要跳转的地址  
             isOpenUrl:  false ,  //  是否打开新页面  
             time:  3000 
        };
         var  options = $.extend(defaults, options);
         var  imgList = options.imgUrlList.split( '  ,  ' );
         var  idList = options.idList.split( '  ,  ' );

        loaddata(imgList);  //  加载图片  
          var  liCount = $( this ).find( "  ol li  " ).length;
        loaddata(liCount);  //  加载数字  
         time = options.time;
        t = setTimeout(refrsh, options.time);
        $(obj).find( "  ul li  " ).bind( "  click  " , bindClick);
        bindImgClick();
        bindLink(options.idList, options.redirectUrl, options.isOpenUrl);
    };
     //  像div中填充数据  
      var  loaddata = function (e) {
         var  temp =  "" ;
         if  (isNaN(e)) {
            $.each(e, function () {
                temp +=  "  <li><img src='  "  +  this  +  "  '/></li>  " ;
            });
            $(obj).append( "  <ol>  "  + temp +  "  </ol>  " );
        }
         else  {
             for  ( var  i =  1 ; i <= e; i++) {
                temp +=  "  <li>  "  + i +  "  </li>  " ;
            }
            $(obj).append( "  <ul>  "  + temp +  "  </ul>  " );
            $(obj).find( "  ul li:last  " ).css( "  margin-right  " ,  "  5px  " );
        }
    };
     //  控制显示隐藏  
      var  getImg = function (index) {
        $(obj).find( "  ol li  " ).hide();
        $(obj).find( "  ul li  " ).removeClass( "  focusLi  " );
        $(obj).find( "  ol li:eq(  "  + index +  "  )  " ).fadeIn( 1000 );
        $(obj).find( "  ul li:eq(  "  + index +  "  )  " ).addClass( "  focusLi  " );
    };
     //  定时刷新图片  
      var  refrsh = function () {
         var  index = $(obj).find( "  ol li:visible  " ).index();
         if  (index == - 1 ) {
            $(obj).find( "  ol li:first  " ).show();
            $(obj).find( "  ul li:first  " ).addClass( "  focusLi  " );
        }  else  {
             if  (index != $(obj).find( "  ol li  " ).length -  1 ) {
                index = index +  1 ;
            }
             else  {
                index =  0 ;
            }
            getImg(index);
        }
        t = setTimeout(refrsh, time);
    };
     //  当点击小图标选择相应的大图  
      var  bindClick = function (e) {
         var  index = $( this ).index();
        getImg(index);
    };
     //  当鼠标放在图片上停止滚动  
      var  bindImgClick = function () {
        $(obj).find( "  ol li  " ).hover(function () {
            clearTimeout(t);
        }, function () {
            clearTimeout(t);
            t = setTimeout(refrsh, time);
        });
    };
     //  点击图片跳转  
      var  bindLink = function (idsList, redirectUrl, isOpenUrl) {

        $(obj).find( "  ol li  " ).live( "  click  " , function () {

             var  index = $( this ).index();
             if  (isOpenUrl) {
                window.open(redirectUrl + idsList[index]);
            }
             else  {
                location.href = redirectUrl + idsList[index];
                 return   false ;
            }
        });
    };
})(jQuery);

复制代码

前台代码:
 

 <!  DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"  > 
 <  html   xmlns  ="http://www.w3.org/1999/xhtml"  > 
 <  head  > 
     <  title  > 滚动新闻 </  title  > 
     <  link   href  ="images/style.css"   rel  ="stylesheet"   type  ="text/css"   /> 
     <  script   src  ="js/jquery-1.4.1.js"   type  ="text/javascript"  ></  script  > 
     <  script   src  ="js/hkRoll.js"   type  ="text/javascript"  ></  script  > 
     <  script   type  ="text/javascript"  >  
        $(  function   () {
            $(  "  #flash  "  ).hkRoll(
                { imgUrlList:   "  images/1.jpg,images/2.jpg,images/3.jpg,images/4.jpg  "  ,  //  图片地址  
                      idList:   "  1,2,3,4  "  ,  //  Id参数  
                      redirectUrl:   "  http://www.baidu.com?t=  "  ,  //  要转到的地址  
                      isOpenUrl:   true  ,   //  是否打开新窗体  
                      time:   3000  //  滚动间隔时间 毫秒单位  
                  });
        });
      </  script  > 
 </  head  > 
 <  body  > 
     <  div   id  ="flash"  > 
     </  div  > 
 </  body  > 
 </  html  > 

复制代码 运行代码

 注册博客园一年多了一直都是吸取大鸟们的经验，今天发表了我的第一篇文章， 点击下载

http://www.cnblogs.com/kingxp/archive/2011/12/12/2285293.html

作者： Leo_wl

　　　　

出处： http://www.cnblogs.com/Leo_wl/

　　　　

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

版权信息

查看更多关于jquery 滚动插件的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did50178