TAB 3d
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<script type="text/javascript" src="jquery-1.8.2.min.js" charset="gb2312"></script>
<script>
/*
* 参数：“中间图片left”，“第三张图left”，“两侧图片top”，“两侧图width”，“中间图片width”，“两侧图height”，“中间图height”；
* author：MRT；
* time：20150302
*/
var a = 0 ; b = 1 ; c = 2 ;
(function($){
$.fn.extend({
_action:function(_left2,_left3,_top1,_width1,_width2,_height1,_height2){
$(this).each(function(i){
$(this).click(function(){
$('#tab li:eq('+(i-1)+')').animate({left:'0px',top:_top1+'px',width:_width1+'px',height:_height1+'px',zIndex:'0'},100);
$('#tab li:eq('+i+')').animate({left:_left2+'px',top:'0px',width:_width2+'px',height:_height2+'px',zIndex:'1'},100);
$('#tab li:eq('+(i-2)+')').animate({left:_left3+'px',top:_top1+'px',width:_width1+'px',height:_height1+'px',zIndex:'0'},100);
})
});
},
_move:function(_left2,_left3,_top1,_width1,_width2,_height1,_height2){
$(this).each(function(i){
$(this).click(function(){
if(i == 0){
if(a<2){a++;}else{a = 0;}if(b<2){b++;}else{b = 0;}if(c<2){c++;}else{c = 0;}
}else if(i == 1){
if(a>0){a--;}else{a = 2;}if(b>0){b--;}else{b = 2;}if(c>0){c--;}else{c = 2;}
}
$('#tab li:eq('+a+')').animate({left:'0px',top:_top1+'px',width:_width1+'px',height:_height1+'px',zIndex:'0'},100);
$('#tab li:eq('+b+')').animate({left:_left2+'px',top:'0px',width:_width2+'px',height:_height2+'px',zIndex:'1'},100);
$('#tab li:eq('+c+')').animate({left:_left3+'px',top:_top1+'px',width:_width1+'px',height:_height1+'px',zIndex:'0'},100);
})
});
}
});
})(jQuery);
function mrtclick() {
var btn = $("#left").get(0);
var e = document.createEvent('MouseEvents');
e.initEvent('click', true, true);
btn.dispatchEvent(e);
}
setInterval("mrtclick()",8000);
$(function(){
$(".tab a")._move('184.5','499','24','378','508','285','330');
$('#tab li')._action('184.5','499','24','378','508','285','330');
})
</script>
<body>
<style>
*{padding:0px; margin:0px;}
li{list-style:none}
.tab{ height:330px; margin-bottom:58px; position:relative}
.tab a{ position:absolute; top:120px; display:block; width:30px; height:30px;; text-align:center}
.tab #left{left:0px;}
.tab #right{ right:0px;}
#tab{ width:877px; margin:0px auto; position:relative; height:330px;}
#tab li{ position:absolute}
#tab li p{ position:absolute; text-align:center; width:100%; top:77%; left:0px; font-size:18px; color:#1b1b1b}
#tab li img{ width:100%;height:100%;}
.tab_1{left:0px;top:24px;width:378px;height:285px;z-index:0; background:red}
.tab_2{left:184.5px;top:0px;width:508px;height:330px;z-index:1; background:yellow}
.tab_3{left:499px;top:24px;width:378px;height:285px;z-index:0; background:blue}
</style>
<div class="tab">
<a id="left"><</a>
<ul id="tab">
<li class='tab_1'><p>赴韩国伊美知美容学院进修</p></li>
<li class='tab_2'><p>师从藏族著名心理学大师<br>格桑泽仁教授</p></li>
<li class='tab_3'><p>赴韩国丽雅医院学习深造</p></li>
</ul>
<a id="right">></a>
</div>
</body>
</html>
