简单的手风琴效果 

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <title></title>
  5     <style type="text/css">
  6         body
  7         {
  8             text-align: center;
  9         }
 10         *
 11         {
 12             margin: 0;
 13             padding: 0;
 14             border: none;
 15         }
 16         #imgmenu
 17         {
 18             width: 600px;
 19             height: 350px;
 20             border: 10px solid #D2691E;
 21             margin: auto;
 22             overflow: hidden;
 23             margin-top: 40px;
 24         }
 25         #imgmenu #content
 26         {
 27             width: 800px;
 28             float: left;
 29         }
 30         #imgmenu #content div
 31         {
 32             float: left;
 33             overflow: hidden;
 34             width: 40px;
 35         }
 36         #imgmenu #content div img
 37         {
 38             border-left: 5px solid #DEB887;
 39         }
 40     </style>
 41     <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
 42     <script type="text/javascript">
 43         (function ($) {
 44             $.fn.mAccordion = function () {
 45                 var _this = this;
 46                 var num = 1;
 47                 var auto;
 48 
 49                 $.each(_this.find("div"), function (k, v) {
 50                     $(this).mouseover(function () {
 51                         num = k;
 52                         _this.find("div").not(_this.find("div").eq(num)).animate({ "width": "40px" }, 100);
 53                         _this.find("div").eq(num).animate({ "width": "400px" }, 100);
 54                     });
 55                 });
 56 
 57                 function autoPlay() {
 58                     auto = setInterval(function () {
 59                         if (num > 5) {
 60                             num = 0;
 61                         }
 62                         _this.find("div").not(_this.find("div").eq(num)).animate({ "width": "40px" }, 100);
 63                         _this.find("div").eq(num).animate({ "width": "400px" }, 100);
 64                         num++;
 65                     }, 3000);
 66                 }
 67 
 68                 function init() {
 69                     autoPlay();
 70                 }
 71 
 72                 _this.hover(function () {
 73                     clearInterval(auto);
 74                 }, function () {
 75                     autoPlay();
 76                 });
 77 
 78                 return init();
 79             }
 80         })(jQuery)
 81     </script>
 82     <script type="text/javascript">
 83         $(function () {
 84             $("#content").mAccordion();
 85         });
 86     </script>
 87 </head>
 88 <body>
 89     <div id="imgmenu">
 90         <div id="content">
 91             <div style="width: 400px">
 92                 <img alt="" src="1.jpg" />
 93             </div>
 94             <div>
 95                 <img alt="" src="2.jpg" />
 96             </div>
 97             <div>
 98                 <img alt="" src="3.jpg" />
 99             </div>
100             <div>
101                 <img alt="" src="4.jpg" />
102             </div>
103             <div>
104                 <img alt="" src="5.jpg" />
105             </div>
106             <div>
107                 <img alt="" src="6.jpg" />
108             </div>
109         </div>
110     </div>
111 </body>
112 </html>


焦点图：
共性：
焦点图自动轮换 一般分为向上、向左、淡入淡出、手风琴式等等。
鼠标移入停止，移出继续自动播放
点击按钮或鼠标移入，切换到当前图片

可以参考：
焦点图(http://www.cnblogs.com/kuikui/archive/2012/06/04/2533445.html)，里面有分析注释




 

posted @ 2012-06-05 00:15  前端咖  阅读(1123)  评论(0)  编辑  收藏  举报