jquery插件nivo-slider实现幻灯效果
<
script
src
="js/jquery-1.7.2.min.js"
type
="text/javascript"></
script
>
<
style
type
="text/css"
media
="screen">
#slider1
{
overflow
:
hidden
;
width
:
680px
;
position
:
relative
;
height
:
205px
;
}
#slider1
IMG
{
width
:
680px
;
height
:
205px
;
}
#slider1Content
{
width
:
680px
;
position
:
absolute
;
top
:
0px
;
}
.slider1Image
{
display
:
none
;
float
:
left
;
position
:
relative
;
}
.slider1Image
p
{
line-height
:
20px
;
}
.slider1Image
SPAN
{
display
:
none
;
position
:
absolute
;
width
:
650px
;
background
:
#000
;
padding
:
12px
15px
;
filter
:
alpha(opacity=70)
;
font
:
10px/15px
Arial,
Helvetica,
sans-serif
;
color
:
#fff
;
-moz-opacity
:
0.7
;
-khtml-opacity
:
0.7
;
opacity
:
0.7
;
}
.slider1Image
SPAN
h4
{
color
:
#fff
;
font-family
:
"
微软雅黑
"
;
}
.left
,
.right
{
left
:
0px
;
width
:
250px
!important
;
height
:
181px
;
top
:
0px
;
}
.right
{
left
:
400px
;
}
</
style
>
<
script
src
="js/s3Slider.js"
type
="text/javascript"></
script
>
<
script
type
="text/javascript">
var
$jq1 = jQuery.noConflict();
$jq1(
$jq1(document).ready(
function
() {
$jq1(
'#slider1'
).s3Slider({
timeOut: 4000
});
})
);
</
script
>
<
div
class
="banner">
<
div
id
="content"
class
="bannerbox">
<
div
id
="slider1">
<
ul
id
="slider1Content">
<%
ADS_BizComponents.
Ads_Banner_Biz
banner =
new
ADS_BizComponents.
Ads_Banner_Biz
();
System.Collections.Generic.
List
<ADS_Entity.
Ads_Banner
> banneList = banner.ads_Banner_GetAll();
//string[] imgArr = { "images/01.jpg", "images/02.jpg", "images/03.jpg", "images/04.jpg" };
ADS_BizComponents.
News_Information_Biz
newsOne =
new
ADS_BizComponents.
News_Information_Biz
();
System.Collections.Generic.
List
<ADS_Entity.
News_Information
> newsOneList = newsOne.News_Information_GetJRSC(
"4"
,
"*"
,
""
);
if
(banneList.Count > 0)
{
for
(
int
i = 0; i < banneList.Count; i++)
{
%>
<
li
class
="slider1Image"><
a
href
="#">
<
img
alt
="
<% =(i+1) %>
"
src
="images/
<% =banneList[i].Picture%>
"
/></
a
>
<
span
class
="right">
<%
if
(i < 4)
{
%>
<
a
href
="/newspage.aspx?_id=
<%=newsOneList[i].NewsID%>
"
target
="_blank"><
h4
>
<%
=
newsOneList[i].NewsTitle %>
</
h4
></
a
>
<
p
>
<%
=
subStr(NoHTML(newsOneList[i].NewsSummary), 100) %>
</
p
>
<% }
else
{
%>
<
p
>
<%
=
subStr(NoHTML(banneList[i].Introduction), 100) %>
</
p
>
</
span
></
li
>
<%}
}
} %>
<
div
class
="clear slider1Image">
</
div
>
</
ul
>
</
div
>
</
div
>
</
div
>
方法二：
<
link
href
="css/nivo-slider.css"
rel
="stylesheet"
type
="text/css"
/>
<
script
src
="js/jquery-1.7.2.min.js"
type
="text/javascript"></
script
>
<
script
src
="js/jquery.nivo.slider.pack.js"
type
="text/javascript"></
script
>
<
style
type
="text/css"
media
="screen">
#slider1
{
overflow
:
hidden
;
width
:
680px
;
position
:
relative
;
height
:
205px
;
}
#slider1
IMG
{
width
:
680px
;
height
:
205px
;
}
#slider1Content
{
width
:
680px
;
position
:
absolute
;
top
:
0px
;
}
.slider1Image
{
display
:
none
;
float
:
left
;
position
:
relative
;
}
.slider1Image
p
{
line-height
:
20px
;
}
.slider1Image
SPAN
{
display
:
none
;
position
:
absolute
;
width
:
650px
;
background
:
#000
;
padding
:
12px
15px
;
filter
:
alpha(opacity=70)
;
font
:
10px/15px
Arial,
Helvetica,
sans-serif
;
color
:
#fff
;
-moz-opacity
:
0.7
;
-khtml-opacity
:
0.7
;
opacity
:
0.7
;
}
.slider1Image
SPAN
h4
{
color
:
#fff
;
font-family
:
"
微软雅黑
"
;
}
.left
,
.right
{
left
:
0px
;
width
:
250px
!important
;
height
:
181px
;
top
:
0px
;
}
.right
{
left
:
400px
;
}
</
style
>
<
div
class
="banner">
<
div
id
="slider-wrapper">
<
div
id
="slider"
class
="nivoSlider">
<%
ADS_BizComponents.
Ads_Banner_Biz
banner =
new
ADS_BizComponents.
Ads_Banner_Biz
();
System.Collections.Generic.
List
<ADS_Entity.
Ads_Banner
> banneList = banner.ads_Banner_GetAll();
//string[] imgArr = { "images/01.jpg", "images/02.jpg", "images/03.jpg", "images/04.jpg" };
ADS_BizComponents.
News_Information_Biz
newsOne =
new
ADS_BizComponents.
News_Information_Biz
();
System.Collections.Generic.
List
<ADS_Entity.
News_Information
> newsOneList = newsOne.News_Information_GetJRSC(
"4"
,
"*"
,
""
);
if
(banneList.Count > 0)
{
for
(
int
i = 0; i < banneList.Count; i++)
{
if
(i < 4)
{
%>
<
a
href
="/newspage.aspx?_id=
<%=newsOneList[i].NewsID%>
"
target
="_blank">
<
img
src
="images/
<% =banneList[i].Picture%>
"
alt
=""
title
="#new
<% =(i+1) %>
"
/>
</
a
>
<% }
else
{
}
}
} %>
</
div
>
<%
if
(banneList.Count > 0)
{
for
(
int
i = 0; i < banneList.Count; i++)
{
if
(i < 4)
{
%>
<
div
id
="new
<% =(i+1) %>
"
title
=""
class
="nivo-html-caption">
<
h4
><
a
href
="/newspage.aspx?_id=
<%=newsOneList[i].NewsID %>
"
target
="_blank">
<%
=
subStr(NoHTML(newsOneList[i].NewsTitle), 30) %>
</
a
></
h4
>
<
p
>
<%
=
subStr(NoHTML(newsOneList[i].NewsSummary), 80) %>
</
p
>
</
div
>
<% }
else
{
}
}
} %>
</
div
>
<
script
type
="text/javascript">
var
$jq1 = jQuery.noConflict();
$jq1(
$jq1(document).ready(
function
() {
$jq1(
'#slider'
).nivoSlider({pauseTime:6000});
})
);
</
script
>
</
div
>
参数列表：
effect: 'random',
slices: 15,
boxCols: 8,
boxRows: 4,
animSpeed: 500,
pauseTime: 3000,
startSlide: 0, // 第几张开始，从0开始计算
directionNav: true, // 是否显示上一张下一张按钮
directionNavHide: true, // 是否只在经过时显示
controlNav: true, // 序列导航：1、2、3、4...
controlNavThumbs: false, // 图片导航
controlNavThumbsFromRel: false, // 使用img的rel属性作为缩略图地址
controlNavThumbsSearch: '.jpg', // 查找这个字符串...然后...
controlNavThumbsReplace: '_thumb.jpg', // ...然后用这个字符串代替于缩略图的src
keyboardNav: true, // 键盘控制（左右箭头）
pauseOnHover: true, // 鼠标经过时暂停轮播
manualAdvance: false, // 强制手动转换
captionOpacity: 0.8,
prevText: 'Prev',
nextText: 'Next',
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){}, // 所有显示完毕后触发
lastSlide: function(){}, // 最后一张图显示时触发
afterLoad: function(){} // 加载完毕时触发
Nivoslider插件参数和方法一览表
| 参数/方法 | 描述 | 默认值 |
| 基本 | ||
| effect | 图片切换效果。提供了11种效果：'sliceDownRight','sliceDownLeft','sliceUpRight','sliceUpLeft', 'sliceUpDown','sliceUpDownLeft', 'fold','fade','slideInRight','slideInLeft'，诸如渐入渐出，滑动，百叶窗等等都有。 | random |
| animSpeed | 图片切换速度（毫秒） | 500 |
| pauseTime | 图片停留时间（毫秒） | 3000 |
| startSlide | 开始切换的位置（即从第几张图开始切换）。 | 0 |
| directionNav | 是否使用左右按钮导航 | true |
| directionNavHide | 是否当鼠标滑上图片时出现左右导航按钮 | true |
| controlNav | 是否使用导航控制条，即显示每张图片的按钮 | true |
| controlNavThumbs | 是否使用缩略图控制导航 | false |
| controlNavThumbsFromRel | 是否使用图片的rel属性关联缩略图 | false |
| controlNavThumbsSearch | 缩略图类型 | '.jpg' |
| controlNavThumbsReplace | 缩略图后缀 | '_thumb.jpg' |
| keyboardNav | 是否支持键盘方向键切换（貌视IE不支持） | true |
| pauseOnHover | 当鼠标滑向图片时，停止切换 | true |
| manualAdvance | 是否不自动切换，当为true时，需要手动切换 | false |
| captionOpacity | 设置图片标题说明的背景透明度 | 0.8 |
| 方法 | ||
| beforeChange | 当发生切换前，回调函数 | |
| afterChange | 当发生切换后，回调函数 | |
| slideshowEnd | 完成所有的切换动作后，回调函数 | |
| lastSlide | 切换最后一张图片时，回调函数 | |
| afterLoad | 当加载完成时，回调函数 | |