jquery類似flash動畫的按鈕控制圖片全屏幻燈片切換代碼



154 615 206



特效描述:jquery 類似flash動畫 按鈕控制圖片 全屏幻燈片切換,全屏切換焦點圖 圖文漸出

代碼結構

1. 引入CSS

<link href="css/cloudhezu.css" rel="stylesheet" type="text/css" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

3. HTML代碼

<div id="banner" class="slide-1">
	<ul id="J-slide">
		<li class="slide">
			<div class="bghome bg-1 J_lazyloadBanner bg-1-lazy"></div>
			<div class="pic pic-1 J_lazyloadBanner pic-1-lazy"></div>
			<div class="txt-wrap">
				<div class="txt txt-1 J_lazyloadBanner txt-1-lazy">
					<h3>安全穩定,數據可靠 </h3>
					<p>在無地震等重大自然災害下,云服務器數據可靠性可達99.999%,讓您的數據安全無憂!</p>
				</div>
			</div>
		</li>
		<li class="slide">
			<div class="bghome bg-2 J_lazyloadBanner bg-2-lazy"></div>
			<div class="pic pic-2 J_lazyloadBanner pic-2-lazy"></div>
			<div class="txt-wrap">
				<div class="txt txt-2 J_lazyloadBanner txt-2-lazy">
					<h3>性能卓越,彈性伸縮</h3>
					<p>采用綠色節能多線路BGP機房,中國電信、網通、教育網等多線接入,保證全國用戶高速訪問。</p>
				</div>
			</div>
		</li>
		<li class="slide">
			<div class="bghome bg-3 J_lazyloadBanner bg-3-lazy"></div>
			<div class="pic pic-3 J_lazyloadBanner pic-3-lazy"></div>
			<div class="txt-wrap">
				<div class="txt txt-3 J_lazyloadBanner txt-3-lazy">
					<h3>節約成本,簡單易用</h3>
					<p>無需購買云服務器也可以登云,大大降低成本,同時有方便好用的控制面板管理,建站更輕松。</p>
				</div>
			</div>
		</li>
		<li class="slide">
			<div class="bghome bg-4 J_lazyloadBanner bg-4-lazy"></div>
			<div class="pic pic-4 J_lazyloadBanner pic-4-lazy"></div>
			<div class="txt-wrap">
				<div class="txt txt-4 J_lazyloadBanner txt-4-lazy">
					<h3>全面支持各種PHP程序</h3>
					<p>支持shopex、php168、phpwind、wordpress、ecshop、discuz、dedecms、phpcms等主流php程序。</p>
				</div>
			</div>
		</li>
		<li class="slide">
			<div class="bghome bg-5 J_lazyloadBanner bg-5-lazy"></div>
			<div class="pic pic-5 J_lazyloadBanner pic-5-lazy"></div>
			<div class="txt-wrap">
				<div class="txt txt-5 J_lazyloadBanner txt-5-lazy">
					<h3>云智能解析+云監控</h3>
					<p>為您的網站保駕護航</p>
					<a href="http://www.17sucai.com/" target="_blank" title="立即體驗">立即體驗</a>
				</div>
			</div>
		</li>
	</ul>
	<div id="J-slide-number" class="slide-number">
		<a href="javascript:void(0);" class="slide-number-active" >1</a>
		<a href="javascript:void(0);">2</a>
		<a href="javascript:void(0);">3</a>
		<a href="javascript:void(0);">4</a>
	</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
   autoroll();
	hookThumb();
});
var i=-1; //第i+1個tab開始
var offset = 5000; //輪換時間
var timer = null;
function autoroll(){
	n = $('#J-slide-number > a').length-1;
	i++;
	if(i > n){
		i = 0;
	}
	slide(i);
	timer = window.setTimeout(autoroll, offset);
}
function slide(i){
	$('#J-slide-number > a').eq(i).addClass('slide-number-active').siblings().removeClass('slide-number-active');
	 $("#J-slide > li").eq(i).css({opacity: '1',display: "block","z-index": "100"}).siblings().css({"z-index": "1",opacity: '1',display: "block"});
	  $('#J-slide-number > a').each(function(p){
		  if(p==i){
			  $(".bg-"+(p+1)+"-lazy").stop().animate({opacity: '1'},1000);
			  $(".pic-"+(p+1)+"-lazy").slideDown("slow");
			  $(".txt-"+(p+1)+"-lazy").slideDown("slow");
		  }else{
			  $(".bg-"+(p+1)+"-lazy").stop().animate({opacity: '0'},1000);
				$(".pic-"+(p+1)+"-lazy").slideUp("slow");
			  $(".txt-"+(p+1)+"-lazy").slideUp("slow");
		  }
	  });
	$('#banner').attr('class','slide-'+(i+1));
}
function hookThumb(){
	$('#J-slide-number > a').each(function(j){
		$(this).click(function(){
			slide(j);
			clearTimeout(timer);
			i=j;
		   timer = window.setTimeout(autoroll, offset);
			return false;
		});
	});
}
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: flash焦點圖 flash幻燈片 flashbanner flash圖片輪播 滑動選項卡 滑動切換 滾動切換 滾動條切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 全屏焦點圖 漸隱切換 全屏切換 淡出淡進 淡出 淡進 切換按鈕 寬屏全屏 寬屏 全屏 頁面全屏 頁面寬屏 表單 表單美化 表單插件 表單美化插件 焦點圖 幻燈片 輪播圖 bar焦點圖 圖片淡出淡進 圖片淡出 圖片淡進 圖片全屏 文字淡出淡進 文字淡出 文字淡進 圖片切換 圖片選項卡 圖標選項卡 純圖片輪播 圖片輪播 按鈕控制
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

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

老夫子电子