文档说明地址: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);

转载于:https://www.cnblogs.com/kaien/p/6895169.html

图片轮播插件slideBox.js相关推荐

  1. html灵活响应 图片设置,jQuery轻量级响应式图片轮播插件ResponsiveSlides.js(仅1kb)

    ResponsiveSlides.js ResponsiveSlides.js是一个展示同一容器内图片的轻量级响应式jQuery幻灯片插件(tiny responsive slideshow jQue ...

  2. 3d饼图 vue_这是我见过最优雅的Vue图片轮播插件——Vue-Awesome-Swiper

    介绍 在Web网页开发中,我们经常需要用到图片轮播,在以往传统的开发方式中有很多基于jquery的插件可供使用,但是随着目前各类前端框架层出不穷的现状,在某些方面特别是针对特定的场景,还是有不少地方不 ...

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

    友情链接:http://www.htmleaf.com/Demo/201504031619.html  http://www.htmleaf.com/Demo/201504191708.html 0 ...

  4. 图片轮播插件-carouFredSel

    carouFredSel图片轮播插件基于Jquery,比较常规的轮播插件,支持滚轮及键盘左右按键,加入其它插件可实现更加复杂的特效. 主页地址:http://caroufredsel.dev7stud ...

  5. 支持响应式手机端jQuery图片轮播插件unslider

    支持响应式手机端jQuery图片轮播插件unslider,非常强大的jQuery插件,支持响应式手机端.支持函数回调.支持左右按钮切换,可以自定义是否使用响应式fluid:true/false.是否显 ...

  6. fwslider--属于自己的一个图片轮播插件

    一直在学习,一直在提升,一直在想什么时候自己也能写个简单的图片轮播啊? 终于,我写出来了,虽然没有别人写的那么牛逼,我也没有办法和大牛比,所以跟自己比就好了,自己有提升就很开心,这个图片轮播写出来一段 ...

  7. 网站项目必备——12款白富美型 jQuery 图片轮播插件

    转自:http://www.cnblogs.com/lhb25/archive/2013/01/06/jquery-image-carousel-effect.html 图片轮播是网站中的常用功能,用 ...

  8. 图片轮播,纯js+css

    图片轮播,纯js+css <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...

  9. jquery手写轮播图_15个超强的jQuery/HTML5图片轮播插件

    最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...

  10. AdPlayBanner:功能丰富、一键式使用的图片轮播插件

    概述 AdPlayBanner:功能丰富.一键式使用的图片轮播插件 详细 代码下载:http://www.demodashi.com/demo/11312.html AdPlayBanner是一个An ...

最新文章

  1. clock函数返回负值~ (转)
  2. 【PAT乙级】1060 爱丁顿数 (25 分)
  3. BOOST使用 proto::extends 扩展终端类型的简单示例
  4. UVA 10273 Eat or not to Eat?
  5. think in java - 第一章 学习笔记
  6. c语言判断化学方程式,下列是某同学写的六个化学方程式:①Mg+O2点燃.MgO2②C+O2点燃.CO...
  7. 分享一个B端产品体验报告
  8. 【OGG】 RAC环境下管理OGG的高可用 (五)
  9. 洛谷——P1428 小鱼比可爱
  10. 处理异常:org.springframework.beans.factory.BeanNotOfRequiredTypeException
  11. 将R Markdown文档变成互动体验
  12. Windows-QT安装后,又要安装mingw32/64怎么办?
  13. java导出文件放到压缩包里
  14. 需求分析——功能需求和非功能需求
  15. html语言制作带样式的表格,CSS实现的清爽、漂亮的表格样式分享
  16. 详解U-boot分区及内核更新的实现
  17. Java多线程下载分析方法
  18. 访问者模式Visitor
  19. SaliencyReview:显著性检测综述阅读笔记
  20. 网络设备构成及管理方式

热门文章

  1. 惠普触控板使用指南_惠普笔记本触摸板使用技巧
  2. 元器件中关于晶体二极管的小小知识 2021-09-07
  3. microsoftonenote_Microsoft OneNote 2017 官方免费版
  4. android x86 win8 双系统,win8.1安卓双系统安装教程:安卓win8.1二合一双系统安装步骤...
  5. python画指北针_Python-geopandas 中国地图绘制
  6. 鲁大师电动车智能排行第二期出炉:哪辆电动车最“聪明”?
  7. mysql 字段名 减号_MySQL减号
  8. 下载SNP周围的氨基酸序列的fastq文件
  9. Web网页设计规范详细介绍
  10. SI24R2H_2.4GHz无线发射与125KHZ接收一体芯片