首页 > 图片特效 / jquery特效插件 / > jquery带触屏功能的tab选项卡图片展示

jquery带触屏功能的tab选项卡图片展示

点击: 3699 , 发布日期: 2013-5-8
jquery带触屏功能的tab选项卡图片展示

jquery带触屏功能的tab选项卡图片展示

带有触屏功能可以左右滑动的tab选项卡式的图片切换特效,右上角带有自动播放与手动控制按钮,鼠标移到大图片上时显示左右控制按钮,当前选项卡以红色箭头方式突出显示。选项卡内的文字信息可以显示多行内容。

jquery参数说明:

jQuery(document).ready(function() {
	jQuery("#slider-pro-16").advancedSlider({
	width: 956, 
	height: 600, 
	skin: 'text-thumbnail-pointer', 
	shadow: 0, 
	keyboardNavigation: 1, 
	slideButtons: 0, 
	effectType: 'swipe', 
	thumbnailType: 'scroller', 
	thumbnailWidth: 190, 
	thumbnailHeight: 80, 
	thumbnailArrows: 0
		});
	});

我也是从字面上去理解大概的意思,具体功能只有自己试过才知道。

keyboardNavigation:键盘控制

effectType:效果方式

thumbnailType:选项卡类型

thumbnailWidth:选项卡宽度

thumbnailHeight:选项卡高度

jquery插件使用:

第一步引入CSS与JS

<link rel='stylesheet' id='slider-pro-slider-base-css'  href='images/advanced-slider-base.css' type='text/css' media='all' /> 
<link rel='stylesheet' id='slider-pro-skin-text-thumbnail-pointer-css'  href='images/text-thumbnail-pointer.css' type='text/css' media='all' /> 

<script type='text/javascript' src='images/jquery.js'></script> 
<script type='text/javascript' src='images/jquery.easing.1.3.min.js'></script>  
<script type='text/javascript' src='images/jquery.touchSwipe.min.js'></script> 
<script type='text/javascript' src='images/jquery.advancedSlider.min.js'></script> 

第二步插入HTML,只里我只写其中一段

<div class="slide" > 
<img class="image" src="images/image2.jpg" alt=""/> 
<div class="thumbnail"><span class="pointer"></span>

<div class="thumbnail-text">

   <h3 class="thumbnail-title">Blue bicycle</h3>

   <p class="thumbnail-description">sed do eiusmod tempor incididunt ut labore et dolore</p>

</div></div> 
</div> 

为各个选项卡对应的内容

第三步调用jquery

jQuery(document).ready(function() {
jQuery("#slider-pro-16").advancedSlider({
	width: 956, 
	height: 600, 
	skin: 'text-thumbnail-pointer', 
	shadow: 0, 
	keyboardNavigation: 1, 
	slideButtons: 0, 
	effectType: 'swipe', 
	thumbnailType: 'scroller', 
	thumbnailWidth: 190, 
	thumbnailHeight: 80, 
	thumbnailArrows: 0
		});
	});

 

 

关键词: jquery插件 tab 选项卡 触屏

注:用QQ登录后即可下载特效,当然你的积分是有限的,望好好利用与赚取!如何获得积分

我要评论
登录再评论
全部评论
想要的就是这样的插件,支持触屏滑动切换,并且带左右按钮可以切换!
CR
2015-3-12 10:45:51