jquery插件nivo-slider实现幻灯效果
2013-09-10 18:04
459 查看
方法一：
<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>
[align=left]<div class="banner">[/align]
[align=left] <div id="content" class="bannerbox">[/align]
[align=left] <div id="slider1">[/align]
[align=left] <ul id="slider1Content">[/align]
[align=left] <%[/align]
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();
[align=left] [/align]
//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)
[align=left] {[/align]
for (int i
= 0; i < banneList.Count; i++)
[align=left] {[/align]
[align=left] %>[/align]
[align=left] <li class="slider1Image"><a href="#">[/align]
[align=left] <img alt="<% =(i+1) %>" src="images/<% =banneList[i].Picture%>" /></a> <span class="right">[/align]
<%if (i
< 4)
[align=left] {[/align]
[align=left] %>[/align]
[align=left] <a href="/newspage.aspx?_id=<%=newsOneList[i].NewsID%> " target="_blank"><h4>[/align]
[align=left] <%=newsOneList[i].NewsTitle %></h4 ></a>[/align]
[align=left] <p>[/align]
<%=subStr(NoHTML(newsOneList[i].NewsSummary),
100) %>
[align=left] </p>[/align]
[align=left] <% }[/align]
[align=left] else[/align]
[align=left] {[/align]
[align=left] %>[/align]
[align=left] <p>[/align]
<%=subStr(NoHTML(banneList[i].Introduction),
100) %>
[align=left] </p>[/align]
[align=left] </span></ li>[/align]
[align=left] <%}[/align]
[align=left] }[/align]
[align=left] } %>[/align]
<div class="clear
slider1Image">
[align=left] </div>[/align]
[align=left] </ul>[/align]
[align=left] </div>[/align]
[align=left]
[/align]
[align=left] </div>[/align]
[align=left] </div>[/align]
[align=left]
[/align]
[align=left]
[/align]
[align=left]
[/align]
方法二：
[align=left] <link href="css/nivo-slider.css" rel ="stylesheet" type ="text/css" />[/align]
[align=left] <script src="js/jquery-1.7.2.min.js" type ="text/javascript"></ script>[/align]
[align=left] <script src="js/jquery.nivo.slider.pack.js" type ="text/javascript"></ script>[/align]
[align=left] <style type="text/css" media="screen">[/align]
[align=left] #slider1[/align]
[align=left] {[/align]
[align=left] overflow: hidden ;[/align]
[align=left] width: 680px ;[/align]
[align=left] position: relative ;[/align]
[align=left] height: 205px ;[/align]
[align=left] }[/align]
[align=left] #slider1 IMG[/align]
[align=left] {[/align]
[align=left] width: 680px ;[/align]
[align=left] height: 205px ;[/align]
[align=left] }[/align]
[align=left] #slider1Content[/align]
[align=left] {[/align]
[align=left] width: 680px ;[/align]
[align=left] position: absolute ;[/align]
[align=left] top: 0px ;[/align]
[align=left] }[/align]
[align=left] .slider1Image[/align]
[align=left] {[/align]
[align=left] display: none ;[/align]
[align=left] float: left ;[/align]
[align=left] position: relative ;[/align]
[align=left] }[/align]
[align=left] .slider1Image p[/align]
[align=left] {[/align]
[align=left] line-height: 20px ;[/align]
[align=left] }[/align]
[align=left] .slider1Image SPAN[/align]
[align=left] {[/align]
[align=left] display: none ;[/align]
[align=left] position: absolute ;[/align]
[align=left] width: 650px ;[/align]
[align=left] background: #000 ;[/align]
[align=left] padding: 12px 15px;[/align]
[align=left] filter: alpha(opacity=70) ;[/align]
[align=left] font: 10px/15px Arial, Helvetica, sans-serif ;[/align]
[align=left] color: #fff ;[/align]
[align=left] -moz-opacity: 0.7 ;[/align]
[align=left] -khtml-opacity: 0.7 ;[/align]
[align=left] opacity: 0.7 ;[/align]
[align=left] }[/align]
[align=left] .slider1Image SPAN h4[/align]
[align=left] {[/align]
[align=left] color: #fff ;[/align]
[align=left] font-family: " 微软雅黑";[/align]
[align=left] }[/align]
[align=left] .left, .right[/align]
[align=left] {[/align]
[align=left] left: 0px ;[/align]
[align=left] width: 250px !important;[/align]
[align=left] height: 181px ;[/align]
[align=left] top: 0px ;[/align]
[align=left] }[/align]
[align=left] .right[/align]
[align=left] {[/align]
[align=left] left: 400px ;[/align]
[align=left] }[/align]
[align=left] [/align]
[align=left] </style>[/align]
[align=left] <div class="banner">[/align]
[align=left] <div id="slider-wrapper">[/align]
[align=left] <div id="slider" class="nivoSlider">[/align]
[align=left] <%[/align]
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();
[align=left] [/align]
//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)
[align=left] {[/align]
for (int i
= 0; i < banneList.Count; i++)
[align=left] {[/align]
if (i
< 4)
[align=left] {[/align]
[align=left] %>[/align]
[align=left] <a href="/newspage.aspx?_id=<%=newsOneList[i].NewsID%> " target="_blank">[/align]
[align=left] <img src="images/<% =banneList[i].Picture%>" alt="" title="#new<% =(i+1) %>" />[/align]
[align=left] </a>[/align]
[align=left] <% }[/align]
[align=left] else[/align]
[align=left] {[/align]
[align=left] }[/align]
[align=left] }[/align]
[align=left] } %>[/align]
[align=left] </div>[/align]
[align=left] <%[/align]
if (banneList.Count
> 0)
[align=left] {[/align]
for (int i
= 0; i < banneList.Count; i++)
[align=left] {[/align]
if (i
< 4)
[align=left] {[/align]
[align=left] %>[/align]
[align=left]
[/align]
[align=left] <div id="new<% =(i+1) %>" title="" class="nivo-html-caption"> [/align]
[align=left] <h4>< a href ="/newspage.aspx?_id= <%=newsOneList[i].NewsID %>" target="_blank">[/align]
<%=subStr(NoHTML(newsOneList[i].NewsTitle),
30) %>
[align=left] </a></ h4>[/align]
[align=left] <p>[/align]
<%=subStr(NoHTML(newsOneList[i].NewsSummary),
80) %>
[align=left] </p>[/align]
[align=left] </div>[/align]
[align=left] <% }[/align]
[align=left] else[/align]
[align=left] {[/align]
[align=left] }[/align]
[align=left] }[/align]
[align=left] } %>[/align]
[align=left] [/align]
[align=left] </div>[/align]
[align=left] <script type="text/javascript">[/align]
var $jq1
= jQuery.noConflict();
[align=left] $jq1([/align]
$jq1(document).ready( function()
{
[align=left] $jq1( '#slider').nivoSlider({pauseTime:6000});[/align]
[align=left] [/align]
[align=left] })[/align]
[align=left] );[/align]
[align=left] </script>[/align]
[align=left] </div>[/align]
[align=left]
[/align]
[align=left]
[/align]
[align=left]
[/align]
[align=left]
[/align]
参数列表：
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(){} // 加载完毕时触发
[align=left]
[/align]
[align=left]
[/align]
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 | 当加载完成时，回调函数 |
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 用jquery插件-slider实现滑块的效果
- ASP.NET中使用jQuery插件实现图片幻灯效果
- jQuery插件,图片切割效果,配合PHP可以实现图片切割和调整尺寸
- jQuery插件MovingBoxes实现左右滑动中间放大图片效果
- jquery实现图片放大效果应用jqeury插件
- jQuery实现轮播效果(二) - 插件实现
- 利用jquery-fform.js插件实现图片所见即所得效果
- jquery插件--实现滑块控制颜色的效果
- PHP+jQuery实现Ajax分页效果：jPaginate插件的应用
- jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
- jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
- jquery 插件实现图片延迟加载效果代码
- Spoiler Alert – 实现内容模糊隐藏效果的 jQuery 插件
- jQuery实现鼠标滑过图片时会缩小并动态显示信息的幻灯效果
- 基于JQuery的轮播图插件nivo-slider使用教程
- JQuery实现的图文自动轮播效果插件
- jQuery插件Slider Revolution实现响应动画滑动图片切换效果
- 轮播图切换效果（flexslider插件）实现
- 使用jquery插件实现瀑布流效果