css3透明幻灯片切换

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 css3透明幻灯片切换的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html dir="ltr" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>css3͸���õ�Ƭ�л�</title>
<style type="text/css">
/* basic */
body { background:url(img/bg.jpg) no-repeat center top #312318 fixed; margin:0 auto;font:12px/24px tahoma, Helvetica, Arial, "Microsoft YaHei"; text-align:center;font-size:14px;  }
h1,h2,h3,h4,h5,h6,ul,p,dl,dt,dd,form,i{ margin:0px; padding:0px; font-weight:normal; }
ul{ list-style:none; overflow:hidden; }
a{ color:#c1bdb9; text-decoration:none; }
a:hover{ color:#fff; }
img{ border:none; }
.clear{ clear:both; height:0; line-height:0; zoom:1; font-size:1px; visibility:hidden; overflow:hidden; }

/*layout_basic zzsc*/
.main{ color:#c1bdb9; width:960px; margin:0px auto; text-align:center; }

.header { position:fixed; top:0; width:100%; height:40px; line-height:40px; background-color:rgba(49,35,24,0.3); text-align:left;z-index:100; }
.nav { width:960px; margin:0 auto; }
.nav a { display:inline-block; height:40px; padding:0 20px; }
.nav a:hover { background-color:rgba(49,35,24,0.4); } 

.article { width:960px; padding-bottom:100px; margin:0 auto;text-align:left; }
.article-list h1,.article-list h2 { margin-bottom:20px; font-size:36px; color:#fff; text-shadow:-1px -1px 0 #312318; }
.article-list img { display:block; margin-top:10px; }

.item { padding-top:130px; }

.table { width:100%; border-collapse:collapse; border-spacing:0; background-color:rgba(49,35,24,0.7); color:#fff;text-shadow:-1px -1px 0 #312318; }
.table .thead { background-color:rgba(49,35,24,0.7); }
.table td { padding:5px 10px; border:1px solid #312318; }
.table .para { background-color:rgba(49,35,24,0.5); }

.tabs{ position:relative; width:750px; height:350px; overflow:hidden; }
.control { position:absolute; right:10px; bottom:10px; width:750px; height:24px; text-align:right; }
.control a{ display:inline-block; width:24px; height:24px; background:#fff; color:#312318; border-radius:50%; text-align:center; }
.control .now{ background:#312318; color:#fff; }

.tab_con{ height:350px; overflow:hidden; }
.tab_con img{ display:block; height:350px; }

.tabs .prev,.tabs .next { position:absolute; top:150px; padding:13px 20px; height:24px; background-color:rgba(49,35,24,0.5); }
.tabs .prev { left:0; }
.tabs .next{ right:0; }

.down { padding:10px 50px; border:1px solid #337aba; font-size:36px; color:#fff;background-color:#458aca;
background-image:-webkit-linear-gradient(top,#639ed3,#458aca);
background-image:-moz-linear-gradient(top,#639ed3,#458aca);
background-image:-ms-linear-gradient(top,#639ed3,#458aca);
background-image:-o-linear-gradient(top,#639ed3,#458aca);
background-image:linear-gradient(top,#639ed3,#458aca);
-webkit-border-radius:3px;
   -moz-border-radius:3px;
    -ms-border-radius:3px;
     -o-border-radius:3px;
        border-radius:3px;
-webkit-box-shadow:0 1px 2px #d1d1d1,0 1px 1px #99bfe2 inset;
   -moz-box-shadow:0 1px 2px #d1d1d1,0 1px 1px #99bfe2 inset;
    -ms-box-shadow:0 1px 2px #d1d1d1,0 1px 1px #99bfe2 inset;
     -o-box-shadow:0 1px 2px #d1d1d1,0 1px 1px #99bfe2 inset;
        box-shadow:0 1px 2px #d1d1d1,0 1px 1px #99bfe2 inset;
-webkit-text-shadow:-1px -1px 0 #337aba;
   -moz-text-shadow:-1px -1px 0 #337aba;
    -ms-text-shadow:-1px -1px 0 #337aba;
     -o-text-shadow:-1px -1px 0 #337aba;
        text-shadow:-1px -1px 0 #337aba;

}

</style>
</head>

<body>
<section class="article">
	<article class="article-list">

		<div class="item" id="demo">
			<h2>jQuery simpleTabs DEMO</h2>
			<div class="tabs" id="simpleTabs">
				<div class="tab_con">
					<ul>
						<li><img src="img/1.jpg" alt="" /></li>
						<li><img src="img/2.jpg" alt="" /></li>
						<li><img src="img/3.jpg" alt="" /></li>
					</ul>
				</div>
				<div class="control">
					<a href="javascript:;" class="now">1</a>
					<a href="javascript:;">2</a>
					<a href="javascript:;">3</a>
				</div>
				<a href="javascript:/*imsole.net*/" class="prev">��һ��</a>
				<a href="javascript:/*imsole.net*/" class="next">��һ��</a>
			</div>
		</div>
	</article>
</section>
<!--->zzsc<!--->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/simpleTabs 2.0.js"></script>
<script type="text/javascript">
$(function(){
	$("#simpleTabs .control a").simpleTabs({
		current:"now",
		action:"click",
		target:"#simpleTabs .tab_con li",
		easing:"fade",
		autoPlay:1,
		speed:3000,
		btnPrev:".prev",
		btnNext:".next"
	});
});
</script>
</body>
</html>

JS代码(simpleTabs 2.0.js):

/*! * jQuery simpleTabs v2.0 * * 网址:http://www.imsole.net/?page_id=19 * 类型:原创脚本 * 邮箱:macore@163.com * QQ:390514201[sole] * 发布:2012-09-25 * 更新:2013-03-07 14:54:00 * 地点:河南 | 三门峡 * * 版权所有 2013 | imsole.net * 此插件遵循 MIT、GPL2、GNU 许可. * *************************** * * 1、此插件为开源插件，请放心使用 * 2、最终版权、解释权归 imsole.net 所有有 * *************************** * * html5新增技术总结[html5+css+jQuery+响应式布局] http://imsole.net/html5/ * 响应式布局在线检测 http://imsole.net/responsive/ * */
;
	(function($){
	$.fn.simpleTabs = function(o){
	var defs ={
	current:"now",action:"mouseover",target:"",easing:"toggle",direction:"left",autoPlay:0,speed:3000,time:400,btnPrev:"",btnNext:""}
;
	var obj = this;
	var opt = $.fn.extend({
}
,defs,o);
	var now = opt.current;
	var action = opt.action;
	var $target = $(opt.target);
	var easing = opt.easing;
	var direction = opt.direction;
	var autoPlay = opt.autoPlay;
	var speed = opt.speed;
	var time = opt.time;
	var btnPrev = $(opt.btnPrev);
	var btnNext = $(opt.btnNext);
	var oTarget_num = "";
	var oTarger_len = $target.length;
	var sStr = "";
	var num = 0;
	var timer = null;
	if(easing == "slide"){
	if(direction == "left"){
	sStr = "width";
	oTarget_num = $target.eq(0).outerWidth(true);
}
else{
	sStr = "height";
	oTarget_num = $target.eq(0).outerHeight(true);
}
}
else{
	$(obj).eq(0).addClass(now).siblings().removeClass(now);
	$target.hide().eq(0).show();
}
btnNext.click(function(){
	num = obj.parent().children(".now").index();
	num++;
	if(num >= oTarger_len) num=0;
	setTimeout(fnMove,200);
}
);
	btnPrev.click(function(){
	num = obj.parent().children(".now").index();
	num--;
	if(num < 0) num=oTarger_len-1;
	setTimeout(fnMove,200);
}
);
	function fnMove(){
	obj.eq(num).addClass(now).siblings().removeClass(now);
	if(easing == "fade"){
	$target.hide().eq(num).fadeIn(time);
}
else if(easing == "slide"){
	$target.parent("ul").css(sStr,oTarget_num*oTarger_len);
	if(direction == "left"){
	$target.parent().animate({
	"left":-num*oTarget_num}
,time);
}
else{
	$target.parent().animate({
	"top":-num*oTarget_num}
,time);
}
}
else if(easing == "toggle"){
	$target.hide().eq(num).show();
}
else{
	alert("sorry,without this parameter!\ndefaults:toggle | slide | fade");
}
}
obj.mouseover(function(){
	clearInterval(timer);
}
).mouseout(function(){
	if(autoPlay){
	timer = setInterval(function(){
	num++;
	if(num >= oTarger_len) num=0;
	fnMove();
}
,speed);
}
}
);
	if(autoPlay){
	timer = setInterval(function(){
	num++;
	if(num >= oTarger_len) num=0;
	fnMove();
}
,speed);
}
return this.each(function(i){
	$(this).bind(action,function(){
	clearInterval(timer);
	num = i;
	setTimeout(fnMove,200);
}
);
}
);
}
$.fn.simpleTabs.version = "2.0";
}
)(jQuery);

附件:下载该文件资源,减少时间成本(增值服务)