`

jquery 滚动插件

阅读更多

分享一个滚动插件的源码:

(function($){$.fn.bxCarousel=function(options){
    var defaults={
        move:4,
        display_num:4,
        speed:500,
        margin:0,
        auto:false,
        auto_interval:2000,
        auto_dir:'next',
        auto_hover:false,
        next_text:'next',
        next_image:'',
        prev_text:'prev',
        prev_image:'',
        controls:true
    };
    var options=$.extend(defaults,options);
    return this.each(function(){var $this=$(this);
    var li=$this.find('li');
    var first=0;
    var fe=0;
    var last=options.display_num-1;
    var le=options.display_num-1;
    var is_working=false;var j='';
    var clicked=false;li.css({'float':'left','listStyle':'none','marginRight':options.margin});
    var ow=li.outerWidth(true);
    wrap_width=(ow*options.display_num)-options.margin;var seg=ow*options.move;
    $this.wrap('<div class="bx_container"></div>').width(999999);
    if(options.controls){if(options.next_image!=''||options.prev_image!='')
    {var controls='<a href="" class="prev"><img src="'+options.prev_image+'"/></a><a href="" class="next"><img src="'+options.next_image+'"/></a>';}
    else{var controls='<a href="" class="prev">'+options.prev_text+'</a><a href="" class="next">'+options.next_text+'</a>';}}
    $this.parent('.bx_container').wrap('<div class="bx_wrap"></div>').css({'position':'relative','width':wrap_width,'overflow':'hidden'}).before(controls);
    var w=li.slice(0,options.display_num).clone();
    var last_appended=(options.display_num+options.move)-1;$this.empty().append(w);get_p();get_a();
    $this.css({'position':'relative','left':-(seg)});
    $this.parent().siblings('.next').click(function(){slide_next();clearInterval(j);clicked=true;return false;});
    $this.parent().siblings('.prev').click(function(){slide_prev();clearInterval(j);clicked=true;return false;});
    if(options.auto){start_slide();if(options.auto_hover&&clicked!=true){$this.find('li').live('mouseenter',function(){if(!clicked){clearInterval(j);}});
    $this.find('li').live('mouseleave',function(){if(!clicked){start_slide();}});}}
    function start_slide(){
        if(options.auto_dir=='next'){
            j=setInterval(function(){slide_next()},options.auto_interval);}
        else{j=setInterval(function(){slide_prev()},options.auto_interval);}}
    function slide_next(){
        if(!is_working){is_working=true;set_pos('next');
            $this.animate({left:'-='+seg},options.speed,function(){$this.find('li').slice(0,options.move).remove();$this.css('left',-(seg));get_a();is_working=false;});}}
    function slide_prev(){
        if(!is_working){is_working=true;set_pos('prev');
            $this.animate({left:'+='+seg},options.speed,function(){$this.find('li').slice(-options.move).remove();$this.css('left',-(seg));get_p();is_working=false;});}}
    function get_a(){
        var str=new Array();var lix=li.clone();le=last;
        for(i=0;i<options.move;i++){le++
        if(lix[le]!=undefined){str[i]=$(lix[le]);}else{le=0;str[i]=$(lix[le]);}}
            $.each(str,function(index){$this.append(str[index][0]);});}
    function get_p(){var str=new Array();var lix=li.clone();fe=first;for(i=0;i<options.move;i++){fe--
        if(lix[fe]!=undefined){str[i]=$(lix[fe]);}else{fe=li.length-1;str[i]=$(lix[fe]);}}
            $.each(str,function(index){$this.prepend(str[index][0]);});}
    function set_pos(dir){if(dir=='next'){first+=options.move;if(first>=li.length){first=first%li.length;}
        last+=options.move;if(last>=li.length){last=last%li.length;}}else if(dir=='prev'){first-=options.move;if(first<0){first=li.length+first;}
        last-=options.move;if(last<0){last=li.length+last;}}}});}})(jQuery);

 

 

 

用法:

 jQuery(document).ready(function() {
  $('#example1').bxCarousel({
   display_num: 7,
   move: 1,
   prev_image: 'res/images/arrow_prev.png',
   next_image: 'res/images/arrow_next.png',
         auto: false,
         margin: 26
  });
 });

 

分享到:
评论

相关推荐

    jQuery滚动插件

    **jQuery滚动插件详解** jQuery滚动插件是用于增强网页滚动效果的一种JavaScript库,它能够帮助开发者轻松实现平滑滚动、无限滚动、滚动监听等多种功能,极大地提升了用户体验。在网页设计中,滚动效果是一个重要的...

    jquery滚动插件,包括文字和图片

    在给定的标题“jquery滚动插件,包括文字和图片”中,我们可以理解这是一个利用jQuery实现的插件,主要用于创建动态的滚动效果,既能够处理文本也能够处理图像。这种插件在网页设计中非常常见,用于制作新闻滚动条、...

    jQuery滚动插件multiscroll.js.zip

    multiscroll.js 是一款 jQuery 插件,它能够让页面的每一屏分成左右两块,在滚动时,这两块会顺着垂直方向反向的滚动合并在一起,效果非常的酷。 查看演示 标签:multiscroll

    jquery滚动插件,各种样式的都有.zip

    本资源"jquery滚动插件,各种样式的都有.zip"提供了一系列用于实现页面滚动效果的jQuery插件。这些插件可以帮助开发者创建丰富多样的滚动效果,提升用户体验,尤其在网页内容过多时,使用户能更流畅地浏览。 1. **...

    jQuery滚动插件scrollToBySpeed.zip

    **jQuery滚动插件scrollToBySpeed** jQuery是一个广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理、动画效果和Ajax交互。`scrollToBySpeed`是一个基于jQuery的插件,专为网页滚动设计,提供了根据指定...

    jQuery滚动插件ScrollAdvance.zip

    **jQuery滚动插件ScrollAdvance详解** ScrollAdvance是一款基于jQuery的高效滚动插件,它扩展了浏览器的默认滚动功能,提供了更多的交互方式和控制选项。这个插件的主要目标是帮助开发者在用户滚动页面时实现更丰富...

    jQuery滚动插件scroll2Top.zip

    scroll2Top 是个简单的自定义 jQuery 插件,用来滚动回到顶部。在线演示 标签:scroll2Top

    jQuery滚动插件scrollable

    Scrollable是一个灵活、轻量级用于创建滚动内容的jQuery插件。任何内容(HTML、视频、文件、图片等...)都可以作为一个滚动项。支持水平与垂直两种滚动方向。用途:滚动效果,可制作分步验证页面

    jquery 滚动广告插件

    jQuery 滚动广告插件是一种广泛应用于网页开发中的技术,它可以帮助开发者创建吸引人的、动态的广告展示效果。在网页设计中,滚动广告能够吸引用户的注意力,提高广告的可见性和点击率。以下是对这个主题的详细阐述...

    jQuery滚动插件EndlessScroll.zip

    Endless Scroll 是 jQuery 一个用来实现无限滚动的插件,相信你试过微软新搜索引擎 Bing 的搜索结果,当鼠标向下滚动时,新的内容会一直出现在下方,而不是翻页去浏览。示例代码:// using default options $...

    jQuery滚动插件jQueryGoUp!.zip

    jQuery GoUp! 是个简单的 jQuery 插件,允许用户在 web 页面上快速滚动到页面顶部。在线演示 标签:jQuery

    jquery多款滚动条插件插件

    标题"jquery多款滚动条插件插件"表明我们将探讨几款不同的jQuery滚动条插件,这些插件提供了多种样式和功能选择,使得开发者可以根据项目需求选择最适合的滚动条解决方案。 一、SimpleBar SimpleBar是一款轻量级的...

    jQuery滚动插件jQueryTotem.zip

    Totem 是一款基于 jQuery 的垂直滚动插件,它带有“向上”、“向下”、“开始”、“停止”四项控制,还可以设置每次滚动的高度、滚动的速度、滚动间隔、鼠标移动到上面停止滚动等等,用来做公告、标题滚动都是不错的...

    jQuery滚动插件ScrollMagic.zip

    ScrollMagic 是 jQuery 插件,允许用户像进度条一样使用滚动条。用户可以: 在特定滚动位置开始一个动画 滚动条滚动的时候同步动画 固定一个元素在指定的滚动位置 在线演示 标签:Scroll

    JQuery滚动广告插件

    **jQuery滚动广告插件**是一种基于JavaScript库jQuery的动态展示广告的工具,它使得网站能够创建各种富有吸引力的滚动效果,提升用户体验并增加广告的可见性。jQuery因其简洁的API和丰富的插件生态,被广泛应用于...

    给力的jquery滚动条插件

    标题中的“给力的jquery滚动条插件”指的是一个基于jQuery库的滚动条增强插件,这类插件通常用于替换浏览器默认的滚动条样式,提供更美观、可自定义的滚动交互体验。在网页设计中,滚动条是用户浏览长内容时不可或缺...

    jQuery滚动插件Scrollator.zip

    Scrollator 是基于 jQuery 的浏览器滚动条替代品,不占用任何的空间,并且性能超好。 在线演示 标签:Scrollator

    jquery滚动插件

    **jQuery全屏滚动插件——fullPage:打造视觉盛宴** jQuery全屏滚动插件fullPage是一种流行的前端开发工具,主要用于创建具有全屏滚动效果的现代网站。这种效果常见于许多高端设计和创意展示网站,为用户提供流畅且...

Global site tag (gtag.js) - Google Analytics