jquery cycle tab選項卡標簽切換案例圖片滑動階梯排列顯示



114 452 151



特效描述: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

加群請備注:從官網了解到

老夫子电子