图片轮滚形式A

思想解读：

一共有5幅图片，初始时只显示一幅，其余四幅隐藏。然后使用trigger设置右下角的点击事件，根据点击的索引显示某幅图片。原理不算复杂。

结论：

1. trigger的使用，模拟点击
2. 层淡入淡出函数：fadeIn( )
3. 定时器的使用 setInterval( )函数;

JS代码：

$(function () {
    var curr = 0;
    $("#jsNav .trigger").each(function (i) {
        $(this).click(function () {
            curr = i;
            $("#js img").eq(i).fadeIn("slow").siblings("img").hide();
            $(this).siblings(".trigger").removeClass("imgSelected").end().addClass("imgSelected");
            return false;
        });
    });
    //自动翻
    var timer = setInterval(function () {
        todo = (curr + 1) % 5;
        $("#jsNav .trigger").eq(todo).click();
    },
    4000);
    //var pg = function (flag) {
    //    //flag:true表示前翻， false表示后翻
    //    if (flag) {
    //        if (curr == 0) {
    //            todo = 2;
    //        } else {
    //            todo = (curr - 1) % 5;
    //        }
    //    } else {
    //        todo = (curr + 1) % 5;
    //    }
    //    $("#jsNav .trigger").eq(todo).click();
    //};

    ////前翻
    //$("#prev").click(function () {
    //    pg(true);
    //    return false;
    //});

    ////后翻
    //$("#next").click(function () {
    //    pg(false);
    //    return false;
    //});

    ////鼠标悬停在触发器上时停止自动翻
    //$("#jsNav a").hover(
    //    function () {
    //        clearInterval(timer);
    //    },
    //function () {
    //    timer = setInterval(function () {
    //        todo = (curr + 1) % 5;
    //        $("#jsNav .trigger").eq(todo).click();
    //    },
    //    4000);
    //});
});

HTML代码：

<div style="float: left; width: 578px;">
            <!--flash-->
            <link href="flash/css.css" rel="stylesheet" type="text/css" />
            <div id="js" class="js" style="border: 5px #F5F5F5 solid;">
                <img style="display:inline" alt="1" src="./images/1.jpg" onclick="location.href='http://www.heisiwa.com/jiepaimeinv/201701/2968.html';" />
                <img style="display: none;" alt="2" src="./images/2.jpg" onclick="location.href='http://www.heisiwa.com/jiepaimeinv/201701/2984.html';" />
                <img style="display: none;" alt="3" src="./images/3.jpg" onclick="location.href='http://www.heisiwa.com/rekumeinv/201701/2989.html';" />
                <img style="display: none;" alt="4" src="./images/4.jpg" onclick="location.href='http://www.heisiwa.com/baotunduanqun/201701/2994.html';" />
                <img style="display: none;" alt="5" src="./images/5.jpg" onclick="location.href='http://www.heisiwa.com/jiepaimeinv/201701/3012.html';" />

                <div id="jsNav" class="jsNav">
                    <a id="prev" class="prevBtn" href="javascript:void(0)"></a>
                    <a class="trigger imgSelected" href="javascript:void(0)">1</a>
                    <a class="trigger" href="javascript:void(0)">2</a>
                    <a class="trigger" href="javascript:void(0)">3</a>
                    <a class="trigger" href="javascript:void(0)">4</a>
                    <a class="trigger" href="javascript:void(0)">5</a>
                    <a id="next" class="nextBtn" href="javascript:void(0)"></a>
                </div>
            </div>
            <!--/flash-->
        </div>