jquery类似flash动画的按钮控制图片全屏幻灯片切换代码



151 600 201



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

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