素材牛VIP会员

jQuery图片文字焦点广告轮播特效代码

 所属分类:网页特效-焦点图/幻灯片

 浏览:2475次  评论:0次  更新时间:2016-11-02
牛币素材VIP可免积分下载
jQuery图片文字焦点广告轮播特效代码兼容IE6
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:jquery.nivo.slider.js是一款兼容性非常好的jquery图文焦点轮播孝感插件。

详细介绍

使用方法:

引入CSS样式文件

<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/nivo-slider.css" media="screen">

引入jQuery库文件、插件JS文件

<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>

插件初始化、参数配置

jQuery(window).load(function() {
	jQuery('#slider').nivoSlider({
	effect: 'fold',
	slices:15,
	animSpeed:500, //Slide transition speed
	pauseTime:5000,
	controlNav: false,
	directionNavHide: false,
	prevText: 'prev',
	nextText: 'next',
	startSlide:0, //Set starting Slide (0 index)
	directionNav:true, //Next &amp; Prev
	afterLoad: function(){
		jQuery(".nivo-caption").animate({top:"60"}, {easing:"easeOutBack", duration: 500})
		},
		beforeChange: function(){
		jQuery(".nivo-caption").animate({top:"-300"}, {easing:"easeInBack", duration: 500})
		},
		afterChange: function(){
		jQuery(".nivo-caption").animate({top:"60"}, {easing:"easeOutBack", duration: 500})
		}
	});
	
});

HTML结构

<div id="slider" class="nivoSlider">
    <img title="#htmlcaption1" alt="" src="images/slider1.jpg">
    <img title="#htmlcaption2" alt="" src="images/slider2.jpg">
    <img title="#htmlcaption3" alt="" src="images/slider3.jpg">
    <img title="#htmlcaption4" alt="" src="images/slider4.jpg">
</div><!-- #slider -->
<div id="htmlcaption1" class="nivo-html-caption">
    <span class="sdate">December 01, 2011</span>
    <h1>Let´s create your company growth faster...</h1>
    <hr>
    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In sapien lorem, placerat ac imperdiet a, volutpat et risus. </p>
</div>
<div id="htmlcaption2" class="nivo-html-caption">
    <span class="sdate">December 05, 2011</span>
    <h1>We can help to solve your company problem...</h1>
    <hr>
    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In sapien lorem, placerat ac imperdiet a, volutpat et risus. </p>
</div>
<div id="htmlcaption3" class="nivo-html-caption">
    <span class="sdate">December 07, 2011</span>
    <h1>We always smile to help you...</h1>
    <hr>
    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In sapien lorem, placerat ac imperdiet a, volutpat et risus. </p>
</div>
<div id="htmlcaption4" class="nivo-html-caption">
    <span class="sdate">December 07, 2011</span>
    <h1>Discover the places you´ve never been before...</h1>
    <hr>
    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In sapien lorem, placerat ac imperdiet a, volutpat et risus. </p>
</div>

相关素材 - 焦点图/幻灯片

讨论这个素材(0)回答他人问题或分享使用心得会奖励牛币

〒_〒 居然一个评论都没有……

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:1 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)