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代码如下：

<style>
    *{margin:0;padding:0;}
    body{font-size:12px;color:#222;font-family:Verdana,Arial,Helvetica,sans-serif;background:#f0f0f0;}
    .clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
    .clearfix{zoom:1;}
    ul,li{list-style:none;}
    img{border:0;}

    .wrapper{width:800px;margin:0 auto;padding-bottom:50px;}
    .focus{width:800px;height:280px;overflow:hidden;position:relative;}
    .focus ul{height:380px;position:absolute;}

    .focus ul li{float:left;position:relative;width:800px;height:280px;overflow:hidden;}

    .focus ul li div{position:absolute;overflow:hidden;}
    .focus .btnBg{position:absolute;width:800px;height:20px;left:0;bottom:0;background:#000;}
    .focus .btn{position:absolute;width:780px;height:10px;padding:5px 10px;right:0;bottom:0;text-align:right;}
    .focus .btn span{display:inline-block;_display:inline;_zoom:1;width:25px;height:10px;_font-size:0;margin-left:5px;cursor:pointer;background:#fff;opacity:0.4;filter:alpha(opacity=40);}
    .focus .btn span.on{background:#fff;opacity:1;filter:alpha(opacity=100);}

    .focus .preNext{width:45px;height:100px;position:absolute;top:90px;background:url(images/sprite.png) no-repeat 0 0;cursor:pointer;opacity:0.2;filter:alpha(opacity=20);}
    .focus .current {
        opacity:0.5;filter:alpha(opacity=50);
    }
    .focus .pre{left:0;}
    .focus .next{right:0;background-position:right top;}
    
 </style>

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 = "<div class='btnBg'></div><div class='btn'>";
            if(_config.isNum) {
                for(var i = 0; i < len; i+=1) {
                    btn+= "<span></span>";
                }
            }
            
            btn += "</div><div class='preNext prev'></div><div class='preNext next'></div>";
            $(_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({});
 });

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