jquery多组图片层次切换的焦点图

效果：

一、知识点：

• JS闭包、作用域；
• jQuery.transit插件使用；
• 图片旋转动画及中心点的设置；
• 二维数组的使用；
• 定时器setTimeout和setInterval的使用；
• 按钮连续点击问题的解决方案。

jQuery.transit插件下载地址、参考文档：

http://www.htmleaf.com/jQuery/Layout-Interface/201501281289.html

http://demo.newhtml.net/jQuery%20Transit%20-%20CSS3%20animations%20for%20jQuery/

二、HTML代码：

<div class="tabBox">
    <ul class="tab-imglist">
        <li><img src="images/img(1).jpg" alt=""></li>
        <li><img src="images/img(2).jpg" alt=""></li>
        <li><img src="images/img(3).jpg" alt=""></li>
        <li><img src="images/img(4).jpg" alt=""></li>
    </ul>
    <a href="##" class="tab-btn tab-btn-next">&gt</a>
    <a href="##" class="tab-btn tab-btn-pre">&lt</a>
    <a href="##" class="tab-btn-autoplay">自动</a>
</div>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery.transit.js"></script>
<script src="js/tabSwitch.js"></script>

三、CSS代码：

*{ margin: 0; padding: 0;}
body{ color: #333; background-color: #333;}
/*外部容器*/
.tabBox{
    width: 1000px; height: 400px; margin: 60px auto; overflow: hidden; background-color: #fff; position: relative;
}
/*图片UL集合*/
.tab-imglist{
    list-style: none; padding: 50px 50px; margin-right: -30px; margin-left: 200px;
}
.tab-imglist li{
    position: relative; float: left;  width: 180px; height: 240px;     border:solid 10px #fff; margin-left: -60px;
    overflow: hidden;
}
.tab-imglist li img{
    width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1;
}
/*按钮样式*/
.tab-btn{
    position: absolute; width: 30px; height: 60px; line-height: 60px; font-size: 30px; background-color: rgba(0,0,0,0.2);
    top: 50%; margin-top: -30px; text-decoration:none; text-align: center; color: #666;
}
.tab-btn-next{ right: 0px;}
.tab-btn-pre{ left: 0px;}
.tab-btn-autoplay{
    background-color: #00acee; color: #fff; text-align: center; line-height: 30px; text-decoration: none;
    border-radius: 6px;    position: absolute; left: 10px; top: 10px; width: 60px; height: 30px; z-index: 1000;
}

四、JS代码：

var TabSwitch = (function(){
    var $oTabBox  = null,    //外部容器
    $oImgList     = null,    //图片ul容器
    $aLis         = null,    //图片li集合
    $oBtnNext     = null,    //下一组按钮
    $oBtnPre      = null,    //上一组按钮
    $oBtnAutoPlay = null,    //自动播放按钮
    aImgs = [　　　　　　　    //图片数据
    [‘images/img(1).jpg‘,‘images/img(2).jpg‘,‘images/img(3).jpg‘,‘images/img(4).jpg‘],
    [‘images/img(5).jpg‘,‘images/img(6).jpg‘,‘images/img(7).jpg‘,‘images/img(8).jpg‘],
    [‘images/img(9).jpg‘,‘images/img(10).jpg‘,‘images/img(11).jpg‘,‘images/img(12).jpg‘]
    ],
    num         = 0,        //默认第一组图片集合
    disTime     = 300,      //每一组中单个图片切换间隔
    rotating    = false,    //设置是否正在旋转标记
    autoTimer   = null;     //设置自动播放定时器

    // 初始化函数
    function init(){
        // 获取具体对象
        $oTabBox        = $(‘.tabBox‘);
        $oImgList       = $(‘.tab-imglist‘);
        $aLis           = $oImgList.find(‘li‘),
        $oBtnNext       = $(‘.tab-btn-next‘);
        $oBtnPre        = $(‘.tab-btn-pre‘);
        $oBtnAutoPlay = $(‘.tab-btn-autoplay‘);

        // 初始化图片角度
        initRotate();

        // 向右切换按钮
        $oBtnNext.bind(‘click‘,function(){
            toSwitch(1);
        })

        // 向左切换按钮
        $oBtnPre.bind(‘click‘,function(){
            toSwitch(-1);
        })
        // 设置标记，用于记录自动播放按钮状态
        var start = true;
        // 自动播放
        $oBtnAutoPlay.bind(‘click‘,function(){
            if(start){
                toSwitch(1);
                $(this).text(‘停止‘).css(‘backgroundColor‘,‘red‘);
                autoTimer = setInterval(function(){
                    toSwitch(1);
                }, 2000)
                start = false;
            }else{
                $(this).text(‘自动‘).css(‘backgroundColor‘,‘#00acee‘);
                clearInterval(autoTimer);
                start = true;
            }
        })
    }

    // 初始化图片角度方法
    function initRotate(){
        var $lis = $oImgList.find(‘li‘),            //获取li集合
        starAng = -15,                              //设置图片的开始角度
        disAng = 10;                                //设置图片的角度间隔
        $lis.css({transformOrigin:‘50% 600px‘});    //设置li集合的旋转中心点
        $lis.each(function(i){
            $(this).transition({
                rotate:starAng + disAng * i         //遍历一组图片，并动态设置角度
            })
        });
    }
    // 图片切换函数toSwitch
    function toSwitch(flag){                        //flag的作用：根据传值判断左右切换
        if(flag == 1){
            // console.log(‘向右切换图片‘);
            beginSwitch(1);

        }else if(flag == -1){
            // console.log(‘向左切换图片‘);
            beginSwitch(-1);
        }else{
            return false;
        }
    }
    // beginSwitch
    function beginSwitch(flag){
        // 防止鼠标连续点击一个按钮产生的切换问题
        if(rotating) return false;
        rotating = true;

        // 下一组
        num += flag; //这里flag设置的1、-1起到了非常巧妙的作用

        //边界处理
        if(num >= aImgs.length){
            num = 0;
        }
        if(num <0 ){
            num = aImgs.length-1;
        }
        // 设置图片的中心点
        $aLis.children(‘img‘).css({transformOrigin:‘50% 480px‘});

        // 开始动画
        $aLis.each(function(i){
            var $preImg =$(this).children(‘img‘);
            var newImg = toImgs(aImgs,flag)[num][i];
            //根据flag设置左右切换的setTimeout间隔
            var thisTime = (flag===1) ? disTime*i : (aImgs.length-1-i)*disTime;   

            $(this).append(newImg);

            // 设置上一组图片的旋转角度
            setTimeout(function(){
                $preImg.transition({
                    rotate:45*flag
                },600);
                $(newImg).transition({
                    rotate:0,
                    complete:function(){
                        $preImg.remove();
                        if(thisTime == (aImgs.length-1)*disTime){
                            rotating = false;
                        }
                    }
                })
            }, thisTime)
        })
    }
    // 把数组路径转化为图片
    function toImgs(arr,flag){
        var result = [];
        for(var i=0; i<arr.length; i++){
            // 二维数组的转化方法
            result[i] = [];
            for(var j=0; j<arr[i].length; j++){
                var _img = new Image();
                _img.src = arr[i][j];
                // 设置图片的中心点及初始角度
                $(_img).css({transformOrigin:‘50% 480px‘});
                $(_img).transition({
                    rotate:(0-flag)*45
                })
                result[i].push(_img);
            }
        }
        return result;
    }
    return init;
})()

TabSwitch();

参考网站：慕课网 http://www.imooc.com/learn/496