jQuery图片轮播(焦点图)插件(转载)
本文转自http://www.oschina.net/code/snippet_206691_11515?p=3#comments
特点:兼容IE6+,Chrome,Firefox,Opera,safari,可左右,可上下,可快可慢,可指定默认显示第N张,自由设定,代码简洁,运行效率高,用户体验良好:) !!感谢各位朋友的热心反馈!! =update log==2015.01.23 新增:播放顺序为12341234 修复:频繁悬停后,滚动错乱 =update log==2014.04.30 新增:按键鼠标经过阻止事件冒泡 修复:频繁悬停后,滚动错乱 =update log==2013.03.14 新增:可手动设置尺寸,若未设置,自动采用第一张图片尺寸 修复:鼠标经过再离开时,增加一个延时时长,再循环到下一张 =update log==2012.08.09 新增:底栏可设置隐藏 修复:滚动方式由原来的1-2-3-4-1-2-3-4... 修改为 1-2-3-4-3-2-1...,滚动效果更平滑 =update log==2012.07.05 修复:设置各LI元素为第一张图片的尺寸,防止后续若有小图导致整体位置错乱 =update log==2012.06.30 修复:IE下显示边框,滚动重叠问题 新增:点选按键隐藏设置,默认2秒后隐藏,按键样式,可圆可方(IE8-只方不圆) 演示地址:http://ishere.cn/demo/jquery.slideBox/
1. [图片] 方形按键,显示
2. [图片] 按键自动隐藏
3. [图片] 圆形按键
4. [图片] 隐藏底栏
5. [代码]jquery.slideBox.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
@charset "utf-8" ;
html, body { font-family : "微软雅黑" }
/*
* jQuery图片轮播(焦点图)插件
* ADD.JENA.201206291027
* EDIT.JENA.201206300904
* Author: jena
* Demo: http://ishere.cn/demo/jquery.slidebox/
*/
div.slideBox{ position : relative ; width : 670px ; height : 300px ; overflow : hidden ;}
div.slideBox ul.items{ position : absolute ; float : left ; background : none ; list-style : none ; padding : 0px ; margin : 0px ;}
div.slideBox ul.items li{ float : left ; background : none ; list-style : none ; padding : 0px ; margin : 0px ;}
div.slideBox ul.items li a{ float : left ; line-height : normal !important ; padding : 0px !important ; border : none /*For IE.ADD.JENA.201206300844*/ ;}
div.slideBox ul.items li a img{ margin : 0px !important ; padding : 0px !important ; display : block ; border : none /*For IE.ADD.JENA.201206300844*/ ;}
div.slideBox div.tips{ position : absolute ; bottom : 0px ; width : 100% ; height : 50px ; background-color : #000 ; overflow : hidden ;}
div.slideBox div.tips div.title{ position : absolute ; left : 0px ; top : 0px ; height : 100% ;}
div.slideBox div.tips div.title a{ color : #FFF ; font-size : 18px ; line-height : 50px ; margin-left : 10px ; text-decoration : none ;}
div.slideBox div.tips div.title a:hover{ text-decoration : underline !important ;}
div.slideBox div.tips div.nums{ position : absolute ; right : 0px ; top : 0px ; height : 100% ;}
div.slideBox div.tips div.nums a{ display :inline- block ; > float : left /*For IE.ADD.JENA.201206300844*/ ; width : 20px ; height : 20px ; background-color : #FFF ; text-indent : -99999px ; margin : 15px 10px 0px 0px ;}
div.slideBox div.tips div.nums a.active{ background-color : #093 ;}
|
6. [代码]jquery.slideBox.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
/*
* jQuery图片轮播(焦点图)插件
* ADD.JENA.201206291027
* EDIT.JENA.201206300904
* EDIT.JENA.201207051027
* EDIT.JENA.201208090849
* EDIT.JENA.201501231440
* Version: 2.2.1440
* Author: jena
* Demo: http://ishere.cn/demo/jquery.slidebox/
*/
( function ($) {
$.fn.slideBox = function (options) {
//默认参数
var defaults = {
direction : 'left' , //left,top
duration : 0.6, //unit:seconds
easing : 'swing' , //swing,linear
delay : 3, //unit:seconds
startIndex : 0,
hideClickBar : true ,
clickBarRadius : 5, //unit:px
hideBottomBar : false
};
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 init = function (){
if (!wrapper.size()) return false ;
wrapper.data( 'over' , 0);
li_height = lis.first().height();
li_width = lis.first().width();
wrapper.css({width: li_width+ 'px' , height:li_height+ 'px' });
lis.css({width: li_width+ 'px' , height:li_height+ 'px' }); //ADD.JENA.201207051027
ul.append(ul.find( 'li:first' ).clone());
li_num += 1;
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){ //ADD.JENA.201208090859
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 (){
wrapper.data( 'over' , 1);
$( this ).addClass( 'active' ).siblings().removeClass( 'active' );
ul.find( 'li:eq(' +$( this ).index()+ ')' ).addClass( 'active' ).siblings().removeClass( 'active' );
start();
}).appendTo(nums);
});
if (settings.hideClickBar){ //ADD.JENA.201206300847
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 () {
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' ));
// EDIT.JENA.20150123
ul.stop().animate(param, settings.duration*1000, settings.easing, function () {
active.removeClass( 'active' );
if (active.next().size()==0){
ul.css({top:0, left:0}).find( 'li:eq(1)' ).addClass( 'active' );
wrapper.find( '.nums' ).find( 'a:first' ).addClass( 'active' ).siblings().removeClass( 'active' );
} else {
active.next().addClass( 'active' );
}
wrapper.data( 'over' )==0 && wrapper.data( 'timeid' , window.setTimeout(start, settings.delay*1000));
});
};
//停止轮播
var stop = function () {
window.clearTimeout(wrapper.data( 'timeid' ));
};
//鼠标经过事件
wrapper.hover( function (){
wrapper.data( 'over' , 1);
stop();
}, function (){
wrapper.data( 'over' , 0);
start();
});
//首张图片加载完毕后执行初始化
var imgLoader = new Image();
imgLoader.onload = function (){
imgLoader.onload = null ;
init();
};
imgLoader.src = firstPic.attr( 'src' );
};
})(jQuery);
|
7. [代码]index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
<! doctype html>
< html >
< head >
< meta charset = "utf-8" >
< title >jQuery图片轮播(焦点图)插件</ title >
< link href = "css/jquery.slideBox.css" rel = "stylesheet" type = "text/css" />
< script src = "js/jquery-1.7.1.min.js" type = "text/javascript" ></ script >
< script src = "js/jquery.slideBox.js" type = "text/javascript" ></ script >
< script >
jQuery(function($){
$('#demo1').slideBox();
$('#demo2').slideBox({
direction : 'top',//left,top#方向
duration : 0.3,//滚动持续时间,单位:秒
easing : 'linear',//swing,linear//滚动特效
delay : 5,//滚动延迟时间,单位:秒
startIndex : 1//初始焦点顺序
});
$('#demo3').slideBox({
duration : 0.3,//滚动持续时间,单位:秒
easing : 'linear',//swing,linear//滚动特效
delay : 5,//滚动延迟时间,单位:秒
hideClickBar : false,//不自动隐藏点选按键
clickBarRadius : 10
});
});
</ script >
</ head >
< body >
< h3 >一、左右轮播,滚动持续0.6秒,滚动延迟3秒,滚动效果swing,初始焦点第1张,点选按键自动隐藏,按键边框半径(IE8-不支持)5px(以上各项为默认设置值)</ h3 >
< div id = "demo1" class = "slideBox" >
< ul class = "items" >
< li >< a href = "go/to/your/url.html" title = "这里是测试标题一" >< img src = "img/1.jpg" ></ a ></ li >
< li >< a href = "go/to/your/url.html" title = "这里是测试标题二" >< img src = "img/2.jpg" ></ a ></ li >
< li >< a href = "go/to/your/url.html" title = "这里是测试标题三" >< img src = "img/3.jpg" ></ a ></ li >
< li >< a href = "go/to/your/url.html" title = "这里是测试标题四" >< img src = "img/4.jpg" ></ a ></ li >
< li >< a href = "go/to/your/url.html" title = "这里是测试标题五" >< img src = "img/5.jpg" ></ a ></ li >
</ ul >
</ div >
< h3 >二、上下轮播,滚动持续0.3秒,滚动延迟5秒,滚动效果linear,初始焦点第2张,点选按键自动隐藏</ h3 >
< div id = "demo2" class = "slideBox" >
< ul class = "items" >
< li >< a href = "go/to/your/url.html" title = "这里是测试标题一" >< img src = "img/1.jpg" ></ a ></ li >
< li >< a href = "go/to/your/url.html" title = "这里是测试标题二" >< img src = "img/2.jpg" ></ a ></ li >
< li >< a href = "go/to/your/url.html" title = "这里是测试标题三" >< img src = "img/3.jpg" ></ a ></ li >
< li >< a href = "go/to/your/url.html" title = "这里是测试标题四" >< img src = "img/4.jpg" ></ a ></ li >
< li >< a href = "go/to/your/url.html" title = "这里是测试标题五" >< img src = "img/5.jpg" ></ a ></ li >
</ ul >
</ div >
< h3 >三、左右轮播,滚动持续0.3秒,滚动延迟5秒,滚动效果linear,初始焦点第1张,点选按键不隐藏,按键边框半径10px(圆形)</ h3 >
< div id = "demo3" class = "slideBox" >
< ul class = "items" >
< li >< a href = "go/to/your/url.html" title = "这里是测试标题一" >< img src = "img/1.jpg" ></ a ></ li >
< li >< a href = "go/to/your/url.html" title = "这里是测试标题二" >< img src = "img/2.jpg" ></ a ></ li >
< li >< a href = "go/to/your/url.html" title = "这里是测试标题三" >< img src = "img/3.jpg" ></ a ></ li >
< li >< a href = "go/to/your/url.html" title = "这里是测试标题四" >< img src = "img/4.jpg" ></ a ></ li >
< li >< a href = "go/to/your/url.html" title = "这里是测试标题五" >< img src = "img/5.jpg" ></ a ></ li >
</ ul >
</ div >
< h4 >爱我的老婆孩子!献给香港回归祖国15周年,哈哈!!</ h4 >
</ body >
</ html >
|
8. [文件] jquery.slideBox.zip ~ 719KB 下载(506)
jQuery图片轮播(焦点图)插件(转载)相关推荐
- [原创作品]轮播焦点图插件的实现
在上上一期写了怎么写jq插件,现在,我把我写的一个焦点图插件贡献出来.不会写插件的朋友们可以参考我上次写的:http://www.cnblogs.com/zhutty/p/4630110.html.因 ...
- html轮播图水平传送带,经典的白富美型jQuery图片轮播插件
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
- 网站项目必备——12款白富美型 jQuery 图片轮播插件
转自:http://www.cnblogs.com/lhb25/archive/2013/01/06/jquery-image-carousel-effect.html 图片轮播是网站中的常用功能,用 ...
- 支持响应式手机端jQuery图片轮播插件unslider
支持响应式手机端jQuery图片轮播插件unslider,非常强大的jQuery插件,支持响应式手机端.支持函数回调.支持左右按钮切换,可以自定义是否使用响应式fluid:true/false.是否显 ...
- jQuery 图片轮播插件
网站项目必备--12款经典的白富美型 jQuery 图片轮播插件 图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 ...
- html图片展示插件,12款经典的白富美型—jquery图片轮播插件—前端开发必备
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
- 12款经典的白富美型 jQuery 图片轮播插件
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精 ...
- 网站项目必备——12款经典的白富美型 jQuery 图片轮播插件
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
- html轮播鼠标悬停效果,jQuery图片轮播加悬停效果
插件描述:jQuery图片轮播加悬停效果 =======以下内容由会员 只看不发了 提供============ 使用方法 1.将文档内内部样式表保存到目录css下的style.css文件中,并在页面 ...
最新文章
- Concurrency Runtime in Visual C++ 2010
- 重做日志和控制文件的多路复用
- 开放地址法实现HashTable
- rabbitmq-路由模式-routingkey
- mac预装的php路径,Mac使用系统自带php和Apache
- 他35k月薪,如何扛住redis面试!
- Identity Server 4 原理和实战(完结)_----选看 OAuth 2.0 简介(上)
- 「每天一道面试题」AQS是什么?了解其内部同步队列实现结构吗?
- 中了勒索病毒之后怎么办-亲身经历(2021.8)
- 无线路由器桥接——手机连不上网
- cst和ansys_请教一下cst、ansoft、ansys几种电磁计算软件的异同
- 微软ad域服务器 管理用户,威联通NAS助企业解决Windows AD域账户管理
- 用什么软件测试usb速度,跨过奸商陷阱 教你如何测试USB的速度?
- 2022安全员-C证上岗证题目及答案
- JavaWeb进阶之路:MyBatis初体验
- 我与外企上司的四个职场故事
- 菜鸟慢慢爬行-----web(5)
- ZJFC 2008 暑假集训总结(自己写的PPT)
- 虚拟服务器两个网站,如何一个虚拟主机建两个不同的网站
- 孤尽T31项目第6天-Java项目工程结构规约