1.   本网站所有源码包解压密码:www.youhutong.com
会员登录  帮助问答

banner轮播图,响应式动画图片滑动切换效果

小川 特效组件
查看演示   下载源码  
【温馨提示】源码包解压密码:www.youhutong.com

Slider Revolution是一款基于jQuery的插件,使用它时需要先载入jQuery库文件,以及Slider Revolution依赖的css和js文件。

<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="http://www.youhutong.com/static/js/jquery.js"></script>
<script type="text/javascript" src="jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="jquery.themepunch.revolution.min.js"></script>

内容切换的主体html结构如下,由class='tp-banner'元素包含多个<li>标签,<li>中放置切换的内容,包括主要图片、文字、按钮信息。这些信息配上各自的data-属性,是为了让Slider Revolution识别。    

HTML:

<div class="tp-banner-container">
	<div class="tp-banner">
		<ul>
			  <li  data-transition="slideleft" data-slotamount="14">
				<img src="images/bg1.jpg" />
				<div class="caption sfb" 
                    data-x="693" 
                    data-y="75" 
                    data-speed="700" 
                    data-start="0"
                    data-easing="easeOutBack">
                        <img src="images/ipad.png" />
                </div>		
				<div class="tp-caption slider-text-title sft str" style="font-size:24px"
                    data-x="20" 
                    data-y="150" 
                    data-speed="300" 
                    data-start="800" 
                    data-easing="easeOutCubic" 
                    data-end="6000" 
                    data-endspeed="500">
                        小川编程
                </div>
                <div class="tp-caption slider-text-description sft str"  
                    data-x="20" 
                    data-y="200" 
                    data-start="1000" 
                    data-easing="easeOutBack" 
                    data-end="4500" 
                    data-endspeed="500">
                        PHP案例教程|源码免费下载学习!
                </div>
                <div class="tp-caption slider-text-description sft str"  
                    data-x="20" 
                    data-y="280" 
                    data-start="1500" 
                    data-easing="easeOutBack" 
                    data-end="5000" 
                    data-endspeed="500">
                        <a href="#" class="button btn-flat">点击进入</a>
                </div>   
			</li>
			<li data-transition="boxslide" data-slotamount="7" data-masterspeed="300" >
				<img src="images/bg2.jpg"  alt="darkblurbg"   data-fullwidthcentering="on">
                <div class="tp-caption lfr stb stl"
                    data-x="751"
                    data-y="200"
                    data-speed="1000"
                    data-start="1000"
                    data-easing="easeOutExpo" 
                    data-end="6000" 
                    data-endspeed="500">
                        <img src="images/iphone.png">
                </div>
                <div class="tp-caption slider-text-title sft str" style="font-size:24px;color:#fff;"
                    data-x="20"
                    data-y="150"
                    data-speed="300"
                    data-start="800"
                    data-easing="easeOutCubic" 
                    data-end="6000" 
                    data-endspeed="500">
                        小川编程网
                </div>
                <div class="tp-caption slider-text-description sft str" style="color:#fff;"  
                    data-x="20" 
                    data-y="200" 
                    data-start="1000" 
                    data-easing="easeOutBack" 
                    data-end="4500" 
                    data-endspeed="500">
                        PHP免费自学教程,就在小川编程!
                </div>
                <div class="tp-caption slider-text-description sft str"  
                    data-x="20" 
                    data-y="280" 
                    data-start="1500" 
                    data-easing="easeOutBack" 
                    data-end="5000" 
                    data-endspeed="500">
                        <a href="#" class="button btn-flat">点击进入</a>
                </div>  
			</li>
		</ul>
		<div class="tp-bannertimer"></div>
	</div>
</div>

【HTML结构布置好后,就可以调用Slider Revolution插件了】


Slider Revolution插件选项设置与说明

Slider Revolution提供了很多参数选项设置:

delay: 滑动内容停留时间。默认9000毫秒

startheight: 滑动内容高度,默认490像素。

startwidth: 滑动内容宽度,默认890像素。

navigationType: 显示翻页图标,默认“bullet”(圆点),如果设置为“none”则不显示。。

navigationArrows: 显示翻页箭头,默认nexttobullets,即鼠标滑向时显示左右翻页箭头,如果设置为none则不显示。

touchenabled: 是否允许触摸滑动,默认on即允许,如果设置为off则不允许。

onHoverStop: 是否开启鼠标滑向时暂停,on:开启,off:关闭。

fullWidth: 是否开启全屏展示图片内容,on:开启,off:关闭。


对于每个<li>标签可以设置各种效果:

data-transition: 内容滑动效果,可以设置以下值:boxslide,boxfade,slotzoom-horizontal,slotslide-horizontal,slotfade-horizontal,slotzoom-vertical,slotslide-vertical,slotfade-vertical,curtain-1,curtain-2,curtain-3,slideleft,slideright,slideup,slidedown,fade

data-slotamount: 切换时被分成的方形块数。

data-link: 图片链接

data-delay: 设置当前滑块内容的停留时间


对于每个li里面的元素,可以设置以下选项来实现各种效果。

动画样式,class属性: class属性值代表不同的动画样式:sft - Short from Top sfb - Short from Bottom,sfr - Short from Right,sfl - Short from Left,lft - Long from Top,lfb - Long from Bottom,lfr - Long from Right,lfl - Long from Left,fade - fading

data-x: 当前元素相对li的横向位移

data-y : 当前元素相对li的纵向位移

data-speed: 动画时间,毫秒

data-start after: 当前元素等待几秒后再显示

data-easing: 缓冲动画,有easeOutBack...多种动画效果,可参照jQuery Easing 动画效果扩展,动画特效

 浏览器启用弹出窗口过滤功能,将无法跳转到下载页。在浏览器地址栏右边符号提示处点击允许就可以了!
查看演示   下载源码  
【温馨提示】源码包解压密码:www.youhutong.com
升级为VIP会员,有效期内免费下载本站所有VIP源码  点击升级为VIP

转载请注明来源地址:小川编程 » http://www.youhutong.com/index.php/article/index/94.html

( 0 )个小伙伴在吐槽
    登录帐号  如果已经登录请刷新! 发表我的评论
    表情