方法二:
<
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 | 当加载完成时,回调函数 |