jquery cycle tab选项卡标签切换案例图片滑动阶梯排列显示



109 434 145



特效描述:tab选项卡 标签切换 图片滑动 阶梯排列显示,

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/style.css" />

2. 引入JS

<script type="text/javascript" src="https:/ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.min.js"></script>

3. HTML代码

<div id="slidertab" class="waiting">
	<ul class="list">
		<li class="active"><a href="javascript:void(0);" class="button">案例展示(一)</a></li>
		<li><a href="javascript:void(0);" class="button">案例展示(二)</a></li>
		<li><a href="javascript:void(0);" class="button">案例展示(三)</a></li>
		<li><a href="javascript:void(0);" class="button">案例展示(四)</a></li>
	</ul>
	<a href="http:/www.17sucai.com/" class="link_portfolio button">选项卡自动切换</a>
	<div id="slidertab_container">
		<div class="work">
			<ul class="images">
				<li class="left"><a href="http:/www.17sucai.com/"><img src="images/repubblica-design-home_01.jpg" alt="immagine del portfolio"/></a></li>
				<li class="center"><a href="http:/www.17sucai.com/"><img src="images/repubblica-design-home_02.jpg"  alt="immagine del portfolio"/></a></li>
				<li class="right"><a href="http:/www.17sucai.com/"><img src="images/repubblica-design-home_03.jpg"  alt="immagine del portfolio"/></a></li>
			</ul>
			<div class="description">
				<p>有时候,莫名的心情不好,不想和任何人说话,也不想搭理任何人,只想一个人静静的发呆。</p>
				<p><a href="http:/www.17sucai.com/ " class="simple_link">&raquo; 查看详情</a></p>
			</div>
		</div>
		<div class="work">
			<ul class="images">
				<li class="left"><a href="http:/www.17sucai.com/"><img src="images/casetrentine-home_01.jpg" alt="immagine del portfolio"/></a></li>
				<li class="center"><a href="http:/www.17sucai.com/"><img src="images/casetrentine-home_02.jpg"  alt="immagine del portfolio"/></a></li>
				<li class="right"><a href="http:/www.17sucai.com/"><img src="images/casetrentine-home_03.jpg"  alt="immagine del portfolio"/></a></li>
			</ul>
			<div class="description">
				<p>有时候,突然觉得心情烦躁,看什么都觉得不舒服,心里闷的发慌,拼命想寻找一个出口。</p>
				<p><a href="http:/www.17sucai.com/" class="simple_link">&raquo; 查看详情</a></p>
			</div>
		</div>
		<div class="work">
			<ul class="images">
				<li class="left"><a href="http:/www.17sucai.com/"><img src="images/bobadilium-home.jpg" alt="immagine del portfolio"/></a></li>
				<li class="center"><a href="http:/www.17sucai.com/"><img src="images/bobadilium-home2.jpg"  alt="immagine del portfolio"/></a></li>
				<li class="right"><a href="http:/www.17sucai.com/"><img src="images/bobadilium-home3.jpg"  alt="immagine del portfolio"/></a></li>
			</ul>
			<div class="description">
				<p>总是在走过某个地方、听到一首歌,或者感到难过的时候想起你,然后看着你的头像不知所措</p>
				<p><a href="http:/www.17sucai.com/" class="simple_link">&raquo; 查看详情</a></p>
			</div>
		</div>
		<div class="work">
			<ul class="images">
				<li class="left"><a href="http:/www.17sucai.com/"><img src="images/fiart-mare-home.jpg" alt="immagine del portfolio"/></a></li>
				<li class="center"><a href="http:/www.17sucai.com/"><img src="images/fiart-mare-home2.jpg"  alt="immagine del portfolio"/></a></li>
				<li class="right"><a href="http:/www.17sucai.com/"><img src="images/fiart-mare-home3.jpg"  alt="immagine del portfolio"/></a></li>
			</ul>
			<div class="description">
				<p>当爱情降临,当意外发生,当一个人走进你的心扉。爱是一场毫无预兆的暴风雨,它会不知何年何月,何世何地,降临到你的头上。</p>
				<p><a href="http:/www.17sucai.com/" class="simple_link">&raquo; 查看详情</a></p>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
	$("#slidertab .images li").mouseenter(function() {
		if (!$("#slidertab").is(".waiting")) {
			$el_left = $("#slidertab .work .images li.left");
			$el_center = $("#slidertab .work .images li.center");
			$el_right = $("#slidertab .work .images li.right");
			if ($(this).hasClass("left")) {
				$($el_left).stop().animate({
					height: '284',
					width: '265'
				}, 300).css("z-index","10");
				$($el_center).stop().animate({
					height: '256',
					width: '240',
					left: '120'
				}, 300).css("z-index","5");
				$($el_right).stop().animate({
					height: '228',
					width: '215'
				}, 300).css("z-index","2");
			} 
			if ($(this).hasClass("center")) {
				$($el_center).stop().animate({
					height: '284',
					width: '265',
					left: '90'
				}, 300).css("z-index","10");
				$($el_left).stop().animate({
					height: '256',
					width: '240'
				}, 300).css("z-index","5");
				$($el_right).stop().animate({
					height: '256',
					width: '240'
				}, 300).css("z-index","5");
			}
			if ($(this).hasClass("right")) {
				$($el_right).stop().animate({
					height: '284',
					width: '265'
				}, 300).css("z-index","10");
				$($el_center).stop().animate({
					height: '256',
					width: '240',
					left: '90'
				}, 300).css("z-index","5");
				$($el_left).stop().animate({
					height: '228',
					width: '215'
				}, 300).css("z-index","2");
			}
		}
	});
	$.fn.cycle.transitions.factoria_portfolio = function($cont, $slides, opts){
		opts.fxFn = function(curr, next, opts){
			$("#slidertab").addClass("waiting");
			$(curr).find('.images li').each(function(idx, el){
				$(next).find('.images li').show();
				setTimeout(function(){
					$(el).slideUp(450, function() {
						if (idx == 1) {
							$(next).find('.images li').css({"height":"","width":"","left":"","z-index":"","bottom":"-285px"});
							$(curr).fadeOut(opts.speed);
							$(next).fadeIn(opts.speed);
							$(next).find('.images li').each(function(idx, el){
								setTimeout(function(){
									$(el).animate({
										opacity:1,
										bottom:'0px'
									}, 450, function() {
										if (idx == 1) {
											$("#slidertab").removeClass("waiting");
										}
									});
								}, (200*(2-idx)));
							});
						}
					});
				}, (100*(2-idx)));
			});
			opts.busy=0;
		}
	};
	$('#slidertab_container').cycle({ 
		"fx":"factoria_portfolio",
		timeout: 5000, 
		startingSlide:0,
		speed: 800,
		cleartypeNoBg: true,
		pager: '#slidertab ul.list',
		pause: true,
		pagerAnchorBuilder: function(idx, slide) { 
			return '#slidertab ul.list li:eq(' + idx + ')';
		},
		updateActivePagerLink: function(pager, currSlideIndex) {
			$(pager).find('li').removeClass('active').filter('li:eq('+currSlideIndex+')').addClass('active');
		},
		pauseOnPagerHover: true
	});
});
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 图片滑动 图片滑块 选项卡自动切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到