本功能的開發，主要看到一個網站有這個功能，但是是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>
文章就寫到這里，本人是個新手，如有哪里寫不好或錯漏，歡迎指點！！！