本文转自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/
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
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
|
|