jquery 实现智能炫酷的翻页相册效果

jquery 实现智能炫酷的翻页相册效果
巧妙的运用 Html 的文档属性，大大减少jquery 的代码量，实现了智能炫酷的翻页相册、兼容性很好，实现了代码与标签的完全分离
​1. [代码]jquery 实现智能炫酷的翻页相册效果

$(document).ready(function(e) {
    var ImgBox = $(".img-box"),
    ImgSpan = ImgBox.find("span"),
    ImgDiv = $(".img-box div"),
    BtnNext = $("#btn-next"),
    BtnPrve = $("#btn-prev"),
    Btn = $(".btn"),
    speed = 600,
    //设置动画的运动时间
    Tick = 4000 + speed,
    //设置定时器的间隔时间
    n = 1,
    //设置张数计数器
    whichCl,
    //设置判断点击了哪一个按钮 
    z = 0; //设置当前动画计数器
    ImgSpan.html("第 " + n + " 张/共 " + ImgDiv.length + " 张");
    function Slider() { //动画函数
        if (whichCl == "nextCl") {
            n++;
            if (n > ImgDiv.length) {
                n = 1;
            }
            z--;
            if (z < 0) {
                z = ImgDiv.length - 1;
            }
        }
        if (whichCl == "prevCl") {
            n--;
            if (n < 1) {
                n = ImgDiv.length;
            }
        }
        ImgSpan.html("第 " + n + " 张/共 " + ImgDiv.length + " 张");
        ImgDiv.eq(z).stop().animate({
            right: -(1.1 * ImgDiv.width())
        },
        speed,
        function() {
            if (whichCl == "nextCl") {
                ImgSpan.after($(this));
            }
            if (whichCl == "prevCl") {
                ImgBox.append($(this));
            }
            $(this).stop().animate({
                right: 0
            },
            speed);
        }) if (whichCl == "prevCl") {
            z++;
            if (z > ImgDiv.length - 1) {
                z = 0;
            }唯美动漫图片
        }http://www.huiyi8.com/dongman/weimei/​
        ImgBox.stop().animate({
            right: 100
        },
        speed,
        function() {
            $(this).stop().animate({
                right: 0
            },
            speed)
        }) ImgSpan.stop().animate({
            left: 395
        },
        speed,
        function() {
            $(this).stop().animate({
                left: 295
            },
            speed)
        })
    }
    BtnNext.click(next_cl = function() {
        whichCl = "nextCl";
        Slider();
    }); //向右点击事件启动动画函数
    BtnPrve.click(prev_cl = function() {
        whichCl = "prevCl";
        Slider();
    }); //向左点击事件启动动画函数  
    Btn.hover(function() {
        clearTimeout(autoTime)
    },
    function() {
        autoTime = setInterval(next_cl, Tick);
    }) //当鼠标进入点击按钮时对定时器进行控制             
    autoTime = setInterval(next_cl, Tick); //模拟向右点击事件定时启动动画函数，也可以使用  prev_cl向左启动动画函数 
});
​