jQuery网站焦点图切换

HTML：

<div class="hot">
    <div class="hot-pics">
        <ul>
            <li><img src="./images/hot_1.jpg"/></li>
            <li><img src="./images/hot_2.jpg"/></li>
            <li><img src="./images/hot_3.jpg"/></li>
            <li><img src="./images/hot_4.jpg"/></li>
            <li><img src="./images/hot_5.jpg"/></li>
        </ul>
    </div>
    <div class="hot-bar">
        <ul>
            <li class="current"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>

 

JavaScript：

<script>
    //焦点图切换功能
    $(function () {
        var height = 382;                       //每张图片的高度
        var speed = 700;                        //动画时间
        var delay = 1500;                       //自动切换的间隔时间
        var now = 0;                            //当前显示的图片的索引
        var max = 4;                            //图片的最大索引

        //实现图片无缝切换
        var $picsUI = $(".hot-pics ul");//获取对象
        //复制列表中的第一个图片，追加到列表的最后
        $picsUI.find("li:first").clone().appendTo($picsUI);
        var $barLi = $(".hot-bar li"); //获取对象
        //设置周期计时器，实现图片的自动切换
        var timer = setInterval(changeAuto, delay);
        //鼠标滑过时暂停移动，移除时恢复移动
        $(".hot").on({
            mouseenter: function () {
                clearInterval(timer);
            },
            mouseleave: function () {
                clearInterval(timer);
                timer = setInterval(changeAuto, delay);
            }
        });

        //单击小圆点切换图片
        $barLi.click(function () {
            now = $(this).index();
            changeNext();
            changeBar();
        });

        //图片自动切换
        function changeAuto() {
            if (!$picsUI.is(":animated")) {
                if (now < max) {
                    now += 1;
                    changeNext();
                } else {
                    now = 0;
                    changeFirst();
                }
                changeBar();
            }
        }

        //切换到下一张图片
        function changeNext() {
            $picsUI.animate({top: -height * now}, speed);
        }

        //切换到第一张图片
        function changeFirst() {
            $picsUI.animate({top: -height * (max + 1)}, speed, function () {
                $(this).css("top", 0);
            });
        }

        //点亮当前小圆点
        function changeBar() {
            $barLi.eq(now).addClass("current").siblings().removeClass("current");
        }
    });
</script>