分享一个滚动插件的源码:
(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滚动插件是用于增强网页滚动效果的一种JavaScript库,它能够帮助开发者轻松实现平滑滚动、无限滚动、滚动监听等多种功能,极大地提升了用户体验。在网页设计中,滚动效果是一个重要的...
在给定的标题“jquery滚动插件,包括文字和图片”中,我们可以理解这是一个利用jQuery实现的插件,主要用于创建动态的滚动效果,既能够处理文本也能够处理图像。这种插件在网页设计中非常常见,用于制作新闻滚动条、...
multiscroll.js 是一款 jQuery 插件,它能够让页面的每一屏分成左右两块,在滚动时,这两块会顺着垂直方向反向的滚动合并在一起,效果非常的酷。 查看演示 标签:multiscroll
本资源"jquery滚动插件,各种样式的都有.zip"提供了一系列用于实现页面滚动效果的jQuery插件。这些插件可以帮助开发者创建丰富多样的滚动效果,提升用户体验,尤其在网页内容过多时,使用户能更流畅地浏览。 1. **...
**jQuery滚动插件scrollToBySpeed** jQuery是一个广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理、动画效果和Ajax交互。`scrollToBySpeed`是一个基于jQuery的插件,专为网页滚动设计,提供了根据指定...
**jQuery滚动插件ScrollAdvance详解** ScrollAdvance是一款基于jQuery的高效滚动插件,它扩展了浏览器的默认滚动功能,提供了更多的交互方式和控制选项。这个插件的主要目标是帮助开发者在用户滚动页面时实现更丰富...
scroll2Top 是个简单的自定义 jQuery 插件,用来滚动回到顶部。在线演示 标签:scroll2Top
Scrollable是一个灵活、轻量级用于创建滚动内容的jQuery插件。任何内容(HTML、视频、文件、图片等...)都可以作为一个滚动项。支持水平与垂直两种滚动方向。用途:滚动效果,可制作分步验证页面
jQuery 滚动广告插件是一种广泛应用于网页开发中的技术,它可以帮助开发者创建吸引人的、动态的广告展示效果。在网页设计中,滚动广告能够吸引用户的注意力,提高广告的可见性和点击率。以下是对这个主题的详细阐述...
Endless Scroll 是 jQuery 一个用来实现无限滚动的插件,相信你试过微软新搜索引擎 Bing 的搜索结果,当鼠标向下滚动时,新的内容会一直出现在下方,而不是翻页去浏览。示例代码:// using default options $...
jQuery GoUp! 是个简单的 jQuery 插件,允许用户在 web 页面上快速滚动到页面顶部。在线演示 标签:jQuery
标题"jquery多款滚动条插件插件"表明我们将探讨几款不同的jQuery滚动条插件,这些插件提供了多种样式和功能选择,使得开发者可以根据项目需求选择最适合的滚动条解决方案。 一、SimpleBar SimpleBar是一款轻量级的...
Totem 是一款基于 jQuery 的垂直滚动插件,它带有“向上”、“向下”、“开始”、“停止”四项控制,还可以设置每次滚动的高度、滚动的速度、滚动间隔、鼠标移动到上面停止滚动等等,用来做公告、标题滚动都是不错的...
ScrollMagic 是 jQuery 插件,允许用户像进度条一样使用滚动条。用户可以: 在特定滚动位置开始一个动画 滚动条滚动的时候同步动画 固定一个元素在指定的滚动位置 在线演示 标签:Scroll
**jQuery滚动广告插件**是一种基于JavaScript库jQuery的动态展示广告的工具,它使得网站能够创建各种富有吸引力的滚动效果,提升用户体验并增加广告的可见性。jQuery因其简洁的API和丰富的插件生态,被广泛应用于...
标题中的“给力的jquery滚动条插件”指的是一个基于jQuery库的滚动条增强插件,这类插件通常用于替换浏览器默认的滚动条样式,提供更美观、可自定义的滚动交互体验。在网页设计中,滚动条是用户浏览长内容时不可或缺...
Scrollator 是基于 jQuery 的浏览器滚动条替代品,不占用任何的空间,并且性能超好。 在线演示 标签:Scrollator
**jQuery全屏滚动插件——fullPage:打造视觉盛宴** jQuery全屏滚动插件fullPage是一种流行的前端开发工具,主要用于创建具有全屏滚动效果的现代网站。这种效果常见于许多高端设计和创意展示网站,为用户提供流畅且...