本功能的开发，主要看到一个网站有这个功能，但是是flash做的，当时就吐血了，于是就自己研究用jquery来做一下，功能比较简单，没用进行美化，代码没有经过优化的，如果哪位高手可以优化修改下也不错！
好吧，废话就到这里！
模仿网站的地址：www.web-designers.cn（韩雪冬）
再做完这个效果
在一个模板网站找到个类似的功能
http://demo.cssmoban.com/cssthemes/hmtl5-template/index.html
非常之不错，很酷！
先上个图吧！
效果：
这个切换效果是最基本的，就3个图片切换
1.一个框架，主要用来存放切换图片层
2.3个div层，用来做切换层，当然，也可以做大于3个以上的
原理：先把3个层的div分别布局好，就像现在这个图片一样。首页，我们分别给3个层添加一个标识，用来区分3个对象层的，主要是用来切换的时候判断是哪个对象在什么位置，
再对他们进行切换！
先放一下他们的CSS布局样式：
body{ margin:0;}
/*主框架*/
.out_warp{ position:relative; width:860px; height:400px; background:#ccc; margin: 100px auto 0 auto;z-index:-99;}
/*左边层*/
.left{width:520px; height:260px; background:#F63;position:absolute; top:70px;left:0; z-index:0;}
/*中间层*/
.cont{width:680px; height:340px; max-height:340px; max-width:680px; background:#096; position:absolute;top:30px;left:90px; z-index:1;}
/*右边层*/
.right{width:520px; height:260px; background:#939;position:absolute;top:70px;left:340px; z-index:0;}
再放html代码：
<div id="out_warp" class="out_warp">
<div id="left" class="left" flat=""></div>
<div id="cont" class="cont" flat=""></div>
<div id="right" class="right" flat=""></div>
</div>
<div class="button"><input type="button" value="左" id="button_left"/>
<input type="button" value="右" id="button_right"/>
<input type="button" value="信息" id="button2" onclick="one();"/>
</div>
jq操作代码：
$(function(){
init();//初始化
//首次为他们标识，为了切换做好准备
function init(){
$('.right').attr('flat', 'right');
$('.left').attr('flat', 'left');
$('.cont').attr('flat', 'cont'); } ;
//看他们的标识的状态
$("#button2").click(function(){ alert('left:'+$('.left').attr('flat')+' cont:'+$('.cont').attr('flat')+' right:'+$('.right').attr('flat')); });
//记录移动对象，用于区分
var left_move; //记录左边的对象
var cont_move; //记录中间的对象
var right_move; //记录右边的对象
var flat; //判断按了左或是右
/// /切换动画后，修改flat标识,该赋值方式为向左转
var to_left=function(){
left_move.attr('flat', 'right');//左图层变成右
cont_move.attr('flat', 'left');//中间边左边
right_move.attr('flat', 'cont');//右边边中间
};
//向右转
var to_right=function(){
left_move.attr('flat', 'cont');//左图层变成右
cont_move.attr('flat', 'right');//中间边左边
right_move.attr('flat', 'left');//右边边中间
};
//判定当前的图层块，并做对应的操作
function left_obj(){
left_move=$("[flat=left]");//取得左边对象，进行记录
//以下为切换效果，到底是向哪个方向，就需要判断按了是哪个按钮
if(flat=="left"){
left_move.animate({
left:"340px", //向最右边切换
width: "520px",
height: "260px"
}, 10 );//10,以最快的速度变换位置
left_move.css("z-index","0");
}else if(flat=="right"){
left_move.animate({ //向最中间切换
left:"90px",
top:"30px",
width: "680px",
height: "340px"
}, 150 );
left_move.css("z-index","1");
}
}//end_left_obj
function right_obj(){
right_move=$("[flat=right]"); //取得最右边对象
if(flat=="left"){
right_move.animate({
left:"90px", //向中间切换
top:"30px",
width: "680px",
height: "340px"
}, 150 );
right_move.css("z-index","1"); //最高层
}else if(flat=="right"){
right_move.animate({
left:"0", //向最左边切换
top:"70px",
width: "520px",
height: "260px"
}, 10 ); //10,以最快的速度变换位置
right_move.css("z-index","0");
}
}//end_right_obj
function cont_obj(){
cont_move=$("[flat=cont]");
if(flat=="left"){
cont_move.animate({ //向最左边切换
left:"0",
top:"70px",
width: "520px",
height: "260px"
}, 100 );
}else if(flat=="right"){
cont_move.animate({ //向最右边切换
left:"340px",
top:"70px",
width: "520px",
height: "260px"
}, 100 );
}
cont_move.css("z-index","0");
}//end_cont_obj
//点击向左切换
$("#button_left").click(function(){
flat="left";
left_obj();
right_obj();
cont_obj();
to_left(); //修改标识
})
//点击向右切换
$("#button_right").click(function(){
flat="right";
left_obj();
right_obj();
cont_obj();
to_right(); //修改标识
})
});//end_function
当然，我们也可以重新修改最外层的框架以及切换层的高度和宽度，还可以对它们进行美工，做得更加漂亮，效果就更好了！如果采用CSS3进行设计就非常好，可以忽略ie
完整代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>123</title>
<style>
body{ margin:0;}
.out_warp{ position:relative; width:860px; height:400px; background:#ccc; margin: 100px auto 0 auto;z-index:-99;}
.left{width:520px; height:260px; background:#F63;position:absolute; top:70px;left:0; z-index:0;}
.cont{width:680px; height:340px; max-height:340px; max-width:680px; background:#096; position:absolute;top:30px;left:90px; z-index:1;}
.right{width:520px; height:260px; background:#939;position:absolute;top:70px;left:340px; z-index:0;}
img{ width:100%; height:100%;}/*自适应div高、宽*/
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>
<body>
<div id="out_warp" class="out_warp">
<div id="left" class="left" flat=""><img src="1.jpg"/></div>
<div id="cont" class="cont" flat=""><img src="2.jpg"/></div>
<div id="right" class="right" flat=""><img src="3.jpg"/></div>
</div>
<div class="button"><input type="button" value="左" id="button_left"/>
<input type="button" value="右" id="button_right"/>
<input type="button" value="信息" id="button2" onclick="one();"/>
</div>
<script type="text/javascript" language="javascript">
$(function(){
init();//初始化
function init(){
$('.right').attr('flat', 'right');
$('.left').attr('flat', 'left');
$('.cont').attr('flat', 'cont'); } ;
$("#button2").click(function(){ alert('left:'+$('.left').attr('flat')+' cont:'+$('.cont').attr('flat')+' right:'+$('.right').attr('flat')); });
//记录移动对象，用于区分
var left_move; //记录左边的对象
var cont_move; //记录中间的对象
var right_move; //记录右边的对象
var flat; //判断按了左或是右
/// /切换动画后，修改flat标识,该赋值方式为向左转
var to_left=function(){
left_move.attr('flat', 'right');//左图层变成右
cont_move.attr('flat', 'left');//中间边左边
right_move.attr('flat', 'cont');//右边边中间
};
//向右转
var to_right=function(){
left_move.attr('flat', 'cont');//左图层变成右
cont_move.attr('flat', 'right');//中间边左边
right_move.attr('flat', 'left');//右边边中间
};
//
//判定当前的图层块，并做对应的操作
function left_obj(){
left_move=$("[flat=left]");//取得左边对象，进行记录
if(flat=="left"){
left_move.animate({
left:"340px",//最右边的左边
width: "520px",
height: "260px",
}, 10 );//10,以最快的速度变换位置
left_move.css("z-index","0");
}else if(flat=="right"){
left_move.animate({
left:"90px",//中间
top:"30px",
width: "680px",
height: "340px",
}, 150 );
left_move.css("z-index","11");
}
}//end left
function right_obj(){
right_move=$("[flat=right]");
if(flat=="left"){
right_move.animate({
left:"90px", /*中间*/
top:"30px",
width: "680px",
height: "340px",
}, 150 );
right_move.css("z-index","1"); //最高层
}else if(flat=="right"){
right_move.animate({
left:"0",//最左边对象位置
top:"70px",
width: "520px",
height: "260px",
}, 10 );//10,以最快的速度变换位置
right_move.css("z-index","0");
}
}//end right
function cont_obj(){
cont_move=$("[flat=cont]");
if(flat=="left"){
cont_move.animate({
left:"0",
top:"70px",
width: "520px",
height: "260px",
}, 100 );
}else if(flat=="right"){
cont_move.animate({
left:"340px",
top:"70px",
width: "520px",
height: "260px",
}, 100 );
}
cont_move.css("z-index","0");
}
$("#button_left").click(function(){
flat="left";
left_obj();
right_obj();
cont_obj();
to_left();
})
$("#button_right").click(function(){
flat="right";
left_obj();
right_obj();
cont_obj();
to_right();
})
});
</script>
</body>
</html>
文章就写到这里，本人是个新手，如有哪里写不好或错漏，欢迎指点！！！