switchable图片切换

前提： 最近由于项目的需要jquery "switchable图片切换"效果 所以趁着周末有空时间研究下 ，以前工作都依赖于kissy框架，所以也没有综合的写过类似的，如下图所示效果：

 

有左右按钮 和下面的数字按钮 点击左右按钮或者数字按钮切换到上一屏或者下一屏等。

HTML代码如下

<div class="wrapper">
        <div class="focus" id="focus">
            <ul>
                <li>
                    <a href="#">
                        <img src="images/01.jpg"/>
                    a>
                li>
                <li>
                    <a href="#">
                        <img src="images/02.jpg"/>
                    a>
                li>
                <li>
                    <a href="#">
                        <img src="images/03.jpg"/>
                    a>
                li>
                <li>
                    <a href="#">
                        <img src="images/04.jpg"/>
                    a>
                li>
            ul>
        div>
    div>

css代码如下：

JS代码如下：

/**
 * switchable 切换
 */

 $(function(){
     function SwitchTab() {
        this.config = {
            wrapContainer   : '#focus',      // 焦点图的外部容器
            prev            : '.prev' ,      // 上一页按钮
            next            : '.next',       // 下一页按钮
            autoplay        : true,          // 是否自动播放 默认为自动
            time            : 3000,          // 间隔时间
            current         : 'current',     // 左右按钮当前状态
            on              : 'on',          // 数字按钮当前状态
            isNum           : true           // 是否动态生成数字按钮1,2,3,4 默认为true
        };

        this.cache = {
            index          : 0,          //当前的索引
            picTimer       : undefined   // 保存定时器的时间
            
        };
     }

     SwitchTab.prototype = {

        init: function(customConfig){
            this.config = $.extend(this.config, customConfig || {});
            var self = this,
                _config = self.config,
                _cache = self.cache;
            
            var sWidth = $(_config.wrapContainer).width(),   //获取焦点图外层容器宽度
                len = $(_config.wrapContainer + ' ul li').length;

            /* 下面的代码初始化 数字按钮 按钮半透明 上一页和下一页按钮*/
            var btn = "
";
            if(_config.isNum) {
                for(var i = 0; i < len; i+=1) {
                    btn+= "";
                }
            }
            
            btn += "
";
            $(_config.wrapContainer).append(btn);
            
            //为小按钮添加鼠标滑入事件，以显示相应的内容
            $(_config.wrapContainer + ' .btn span') && 
            $(_config.wrapContainer + ' .btn span').mouseover(function(){
                _cache.index = $(_config.wrapContainer + ' .btn span').index(this);
                t && clearTimeout(t);
                var t = setTimeout(function(){
                    hover();
                },100);
            }).eq(0).trigger("mouseover");

            function hover(){
                self.showPics(_cache.index,sWidth);
            }

            // 上一页 下一页按钮透明处理
            $(_config.wrapContainer + ' .preNext').hover(function(){
                $(this).stop(true,false).addClass(_config.current);
            },function(){
                $(this).stop(true,false).removeClass(_config.current);
            });

            // 上一页按钮
            $(_config.prev).click(function(){
                _cache.index--;
                if(_cache.index == -1) {
                    _cache.index = len - 1;
                }

                self.showPics(_cache.index,sWidth);
            });

            // 下一页按钮 
            $(_config.next).click(function(){
                _cache.index++;
                if(_cache.index == len) {
                    _cache.index = 0;
                }
                self.showPics(_cache.index,sWidth);
            });

            //本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度
            $(_config.wrapContainer + ' ul').css("width",sWidth * len);
            
            if(_config.autoplay) {
                // 鼠标滑到焦点图时候 停止自动播放 滑出时自动播放
                $(_config.wrapContainer).hover(function(){
                    _cache.picTimer && clearInterval(_cache.picTimer);
                },function(){
                    _cache.picTimer = setInterval(function(){
                        self.showPics(_cache.index,sWidth);
                        _cache.index++;
                        if(_cache.index == len) {
                            _cache.index = 0;
                        }
                    },_config.time);
                }).trigger("mouseleave");
            }    
        },
        showPics: function(index,sWidth){
            var self = this,
                _config = self.config,
                nowLeft = -index*sWidth;

            //通过animate()调整ul元素滚动到计算出的position
            $(_config.wrapContainer + " ul").stop(true,false).animate({"left":nowLeft},300); 
            $(_config.wrapContainer + ' .btn span') &&
            $(_config.wrapContainer + ' .btn span').removeClass(_config.on).eq(index).addClass(_config.on); //为当前的按钮切换到选中的效果
        }
     }

     new SwitchTab().init({});
 });

上面都有注释 就不用解释了哦！