图片轮播插件slideBox.js

文档说明地址:http://www.jq22.com/jquery-info385

原来的插件当只有一个图片的时候有BUG,修改好了,以下为源码

(function($) {
$.fn.slideBox = function(options) {
var defaults = {
direction: ‘left‘,
duration: 0.6,
easing: ‘swing‘,
delay: 3,
startIndex: 0,
hideClickBar: true,
clickBarRadius: 5,
hideBottomBar: false,
width: null,
height: null
};
var settings = $.extend(defaults, options || {});
var wrapper = $(this),
ul = wrapper.children(‘ul.items‘),
lis = ul.find(‘li‘),
firstPic = lis.first().find(‘img‘);
var li_num = lis.size(),
li_height = 0,
li_width = 0;
var order_by = ‘ASC‘;
var init = function() {
if (!wrapper.size()) return false;
li_height = settings.height ? settings.height : lis.first().height();
li_width = settings.width ? settings.width : lis.first().width();
wrapper.css({
width: li_width + ‘px‘,
height: li_height + ‘px‘
});
lis.css({
width: li_width + ‘px‘,
height: li_height + ‘px‘
});
if (settings.direction == ‘left‘) {
ul.css(‘width‘, li_num * li_width + ‘px‘)
} else {
ul.css(‘height‘, li_num * li_height + ‘px‘)
};
ul.find(‘li:eq(‘ + settings.startIndex + ‘)‘).addClass(‘active‘);
if (!settings.hideBottomBar) {
var tips = $(‘<div class="tips"></div>‘).css(‘opacity‘, 0.6).appendTo(wrapper);
var title = $(‘<div class="title"></div>‘).html(function() {
var active = ul.find(‘li.active‘).find(‘a‘),
text = active.attr(‘title‘),
href = active.attr(‘href‘);
return $(‘<a>‘).attr(‘href‘, href).text(text)
}).appendTo(tips);
var nums = $(‘<div class="nums"></div>‘).hide().appendTo(tips);
lis.each(function(i, n) {
var a = $(n).find(‘a‘),
text = a.attr(‘title‘),
href = a.attr(‘href‘),
css = ‘‘;
i == settings.startIndex && (css = ‘active‘);
$(‘<a>‘).attr(‘href‘, href).text(text).addClass(css).css(‘borderRadius‘, settings.clickBarRadius + ‘px‘).mouseover(function() {
$(this).addClass(‘active‘).siblings().removeClass(‘active‘);
ul.find(‘li:eq(‘ + $(this).index() + ‘)‘).addClass(‘active‘).siblings().removeClass(‘active‘);
start();
stop()
}).appendTo(nums)
});
if (settings.hideClickBar) {
tips.hover(function() {
nums.animate({
top: ‘0px‘
}, ‘fast‘)
}, function() {
nums.animate({
top: tips.height() + ‘px‘
}, ‘fast‘)
});
nums.show().delay(2000).animate({
top: tips.height() + ‘px‘
}, ‘fast‘)
} else {
nums.show()
}
};
lis.size() > 1 && start()
};
var start = function () {
if (li_num <= 1) {

} else {
var active = ul.find(‘li.active‘),
active_a = active.find(‘a‘);
var index = active.index();
if (settings.direction == ‘left‘) {
offset = index * li_width * -1;
param = {
‘left‘: offset + ‘px‘
}
} else {
offset = index * li_height * -1;
param = {
‘top‘: offset + ‘px‘
}
};
wrapper.find(‘.nums‘).find(‘a:eq(‘ + index + ‘)‘).addClass(‘active‘).siblings().removeClass(‘active‘);
wrapper.find(‘.title‘).find(‘a‘).attr(‘href‘, active_a.attr(‘href‘)).text(active_a.attr(‘title‘));
ul.stop().animate(param, settings.duration * 1000, settings.easing, function () {
active.removeClass(‘active‘);
if (order_by == ‘ASC‘) {
if (active.next().size()) {
active.next().addClass(‘active‘)
} else {
order_by = ‘DESC‘;
active.prev().addClass(‘active‘)
}
} else if (order_by == ‘DESC‘) {
if (active.prev().size()) {
active.prev().addClass(‘active‘)
} else {
order_by = ‘ASC‘;
active.next().addClass(‘active‘)
}
}
});
wrapper.data(‘timeid‘, window.setTimeout(start, settings.delay * 1000))
}

};
var stop = function() {
window.clearTimeout(wrapper.data(‘timeid‘))
};
wrapper.hover(function() {
stop()
}, function() {
window.setTimeout(start, settings.delay * 1000);
});
var imgLoader = new Image();
imgLoader.onload = function() {
imgLoader.onload = null;
init()
};
imgLoader.src = firstPic.attr(‘src‘)
}
})(jQuery);

时间: 2024-09-29 22:08:05

图片轮播插件slideBox.js的相关文章

JQuery插件之图片轮播插件–slideBox

来源:http://www.ido321.com/852.html 今天偶然发现了一个比較好用的图片轮播插件-slideBox 先看看效果:http://slidebox.sinaapp.com/ 代码例如以下 1: <!doctype html> 2: <html> 3: <head> 4: <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

js面向对象实现图片轮播插件

这个demo的学习过程很值得记录下来. 前言:学习了一遍js的面向对象,想找点东西练练手,就上网找了个用js面向对象实现图片轮播插件: http://www.codefans.net/jscss/code/3327.shtml 功能:新建一个实例就是一个图片轮播,可以新建多个,但是实例与实例之间是干扰的. 过程:看视频教程说,第一次搞面向对象,把面向过程改头换面就可以了.自己就死磕地先写了原生,再改为面向对象. 写原生的时候,遇到的问题: 不知道怎么样停止计时器:clearInterval.cl

Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示

用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件能够帮助到你.Nivo Slider首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如下特色:? 16个独特的过渡效果? 简洁和有效的标记? 加载参数设置?

图片轮播插件

刚买了司徒大大的<Javascript框架设计>,准备开始研读.打算在读之前先随便写个图片轮播插件,到读完这本书再来看看现在的自己有多菜....... 顺便做图片轮播的时候用美女照片真影响效率..... 上代码! 先是如何使用: html: <div id='outer' style='width:591px;height:862px;overflow:hidden;margin-left:100px;'> <ul id='try-slide' style='list-sty

手机端图片轮播插件

官网:http://bxslider.com/ 能自动适应屏幕大小,滑动图片 引用文件:query.bxslider.css和jquery.bxslider.min.js   手机端图片轮播插件

结构-行为-样式-requireJs实现图片轮播插件

最近工作需要,就自己写了一个图片轮播插件,不过想到要集成到框架中,于是又用RequireJs改了一遍. 主要文件: style.css jquery-1.11.1.min.js require.js viewpager.js view.js index.html viewpager.js: define(['jquery'], function ($) { function ViewPager(setting) { var myset = { index: 0 }; setting = $.ex

图片轮播插件的设计抽象

提出需求首页的轮播焦点图是个常见的需求.需求是这样子的1 每隔2秒切换一次图片2 切换图片的时候,会对应显示该图片的说明3 切换图片的时候,对应显示图片处于小按钮中的第几个,点击小按钮时跳到对应的大图4 自动滚动图片,鼠标放到图片区域时,停止滚动,移出时继续5 点击左右可以上下切换图片对于做一个图片轮播并不难,按照要求,写代码就行.而如何设计一个通用的图片轮播组件确实需要好好思考.因为样式是不确定的,同时html结构也是不确定的.所以问改如何设计这个轮播js呢? 使用插件?我是反插件的,除非插件

PgwSlideshow-基于Jquery的图片轮播插件

0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键实现图片切换:下方为要轮播的所有图片的缩略图展示,可直接单击缩略图快速切换图片. PgwSlideshow主要有以下特点: 体验度很好的响应式设计 支持桌面及移动设备 身形矫健,压缩后的文件只有不到4KB 你可以自定义或者直接修改基本的css样式来给你想要的轮播插件美个容 PgwSlideshow核

图片轮播(左右切换)--js原生和jquery实现

图片轮播(左右切换)--js原生和jquery实现 左右切换的做法基本步骤跟 上一篇文章  淡入淡出 类似,只不过修改了一些特定的部分 (1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后是图片两端的左箭头和右箭头5.然后是一个透明背景层,放在图片底部 6.然后是一个图片描述info层,放在