焦点图

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <title>焦点图</title>
  5     <style type="text/css">
  6         *{margin: 0px;padding: 0px;}
  7         ul, dl{list-style: none;}
  8         #mFocus{width: 500px;height: 300px;position: relative;overflow: hidden;}
  9         #mFocus div{position: absolute;top: 0px;left: 0px;}
 10         #mFocus img{width: 500px;height: 300px;}
 11         #mFocus ul{position: absolute;left: 300px;top: 260px;}
 12         #mFocus li{width: 30px;height: 30px;line-height: 30px;text-align: center;border: 1px solid #666;background: #ff00ff;cursor: pointer;float: left;_display: none;}
 13         #mFocus .on{background: #f60;}
 14         #tip{display: none;}
 15     </style>
 16     <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
 17     <script type="text/javascript">
 18         (function ($) {
 19             $.fn.mFocus = function (options) {
 20                 options = jQuery.extend({
 21                     direction: "H",
 22                     step: -500
 23                 }, options);
 24 
 25                 var _this = $(this);
 26                 var num = 0;
 27                 var auto;
 28                 var mtop = 0;
 29                 var mlength = _this.find("img").length;
 30                 var total = parseInt((mlength - 1) * options.step);
 31 
 32                 function init() {
 33                     autoPlay();
 34                 }
 35 
 36                 if (options.direction === "H") {
 37                     _this.find("div").css({ "width": -parseInt(mlength * options.step) + "px", "height": "300px","float":"left","_display":"inline" });
 38                 }
 39                 else if (options.direction === "V") {
 40                     _this.find("div").css({ "width": "500px", "height": -parseInt(mlength * options.step) + "px" });
 41                 }
 42 
 43 
 44 
 45                 $.each(_this.find("li"), function (k, v) {
 46                     $(this).click(function () {
 47                         if (options.direction === "H") {
 48                             _this.find("div").animate({ left: parseInt(options.step * k) + "px" }, 500);
 49                         }
 50                         else if (options.direction === "V") {
 51                             _this.find("div").animate({ top: parseInt(options.step * k) + "px" }, 500);
 52                         }
 53                         _this.find("li").removeClass("on");
 54                         $(this).addClass("on");
 55                         mtop += parseInt(options.step * k);
 56                         num = k;
 57                     });
 58                 });
 59 
 60                 function autoPlay() {
 61                     auto = setInterval(function () {
 62                         mtop += options.step;
 63                         if (mtop < total) {
 64                             mtop = 0;
 65                         }
 66                         num++;
 67                         if (num > 4) {
 68                             num = 0;
 69                         }
 70                         if (options.direction === "H") {
 71                             _this.find("div").animate({ left: mtop + "px" }, 500);
 72                         }
 73                         else if (options.direction === "V") {
 74                             _this.find("div").animate({ top: mtop + "px" }, 500);
 75                         }
 76                         _this.find("li").removeClass("on").eq(num).addClass("on");
 77                     }, 3000);
 78                 }
 79 
 80                 _this.find("div").hover(function () {
 81                     clearInterval(auto);
 82                 }, function () {
 83                     autoPlay();
 84                 });
 85 
 86                 return init();
 87             }
 88         })(jQuery);    
 89     </script>
 90     <script type="text/javascript">
 91         $(function () {
 92             $("#mFocus").mFocus();
 93         });
 94     </script>
 95 </head>
 96 <body>
 97     <div id="mFocus">
 98         <div>
 99             <img alt="" src="1.jpg" />
100             <img alt="" src="2.jpg" />
101             <img alt="" src="3.jpg" />
102             <img alt="" src="4.jpg" />
103             <img alt="" src="5.jpg" />
104         </div>
105         <ul>
106             <li class="on">1</li>
107             <li>2</li>
108             <li>3</li>
109             <li>4</li>
110             <li>5</li>
111         </ul>
112     </div>
113 </body>
114 </html>

焦点图jQuery的实现方法如下：

        (function ($) {
            $.fn.mFocus = function (options) {
                options = jQuery.extend({
                    direction: "H",     //水平或垂直参数，H：水平，V：垂直
                     step: -500         //步长为负数   水平时图片的宽长度的负数    垂直时图片的高的长度的负数
                 }, options);

                var _this = $(this);     //指向obj
                 var num = 0;            //当前第几个的位置
                 var auto;                  //设置自动的开关
                var mtop = 0;            //div高度的数值
                 var mlength = _this.find("img").length; //图片个数
                var total = parseInt((mlength - 1) * options.step); //高度

               //初始化
                function init() {
                    autoPlay();
                }

               //设置div

                if (options.direction === "H") {
                    _this.find("div").css({ "width": -parseInt(mlength * options.step) + "px", "height": "300px","float":"left","_display":"inline" });
                }
                else if (options.direction === "V") {
                    _this.find("div").css({ "width": "500px", "height": -parseInt(mlength * options.step) + "px" });
                }

//设置li按钮

                $.each(_this.find("li"), function (k, v) {
                    $(this).click(function () {
                        if (options.direction === "H") {
                            _this.find("div").animate({ left: parseInt(options.step * k) + "px" }, 500);
                        }
                        else if (options.direction === "V") {
                            _this.find("div").animate({ top: parseInt(options.step * k) + "px" }, 500);
                        }
                        _this.find("li").removeClass("on");
                        $(this).addClass("on");
                        mtop += parseInt(options.step * k);
                        num = k;
                    });
                });

              //设置自动

                _this.find("div").hover(function () {
                    clearInterval(auto);
                }, function () {
                    autoPlay();
                });

                return init();
            }
        })(jQuery);