jquery插件nivo-slider实现幻灯效果

最新推荐文章于 2020-12-20 05:04:44 发布

不知道未来的你多强大

最新推荐文章于 2020-12-20 05:04:44 发布

阅读量2.1k

点赞数

分类专栏： JS ASP.NET 文章标签： jquery nivo-slider 幻灯效果

本文链接：https://blog.csdn.net/fengshi_sh/article/details/11534583

版权

ASP.NET 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

15 篇文章 0 订阅

订阅专栏

方法一：

< 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 >

方法二：

< 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	当加载完成时，回调函数

不知道未来的你多强大

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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 ;
复制链接

扫一扫

专栏目录