Jquery轮播图

代码来源于腾讯课堂《全网最细致jQuery讲解》，做了小的修改，增加了标题显示及图片数量自适应．
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font: 16px "micro-soft Yahei";
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .play-box {
            position: relative;
            margin: 100px auto;
            width: 800px;
            height: 500px;
            border: 1px solid #ccc;
        }

            .play-box a {
                opacity: 0;
                height: 0;
                overflow: hidden;
                display: block;
                transition: opacity 1s;
            }

                .play-box a span {
                    position: absolute;
                    font-size: 20pt;
                    color: bisque;
                    opacity: 0.6;
                    padding-left: 20px;
                    padding-top: 20px;
                }

                .play-box a.current {
                    opacity: 1;
                    height: auto;
                }

            .play-box img {
                width: 800px;
                height: 500px;
                border: 0;
            }

        #iconList {
            position: absolute;
            left: 50%;
            bottom: 10px;
            margin-left: -45px;
        }

            #iconList li {
                float: left;
                margin: 0 4px;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                font-size: 0;
                background-color: #fff;
                cursor: pointer;
            }

                #iconList li.current {
                    background: linear-gradient(to bottom, #f8f8f8 0,lawngreen 80%);
                }

        .slidebar {
            position: absolute;
            display: none;
            top: 50%;
            margin-top: -25px;
            width: 30px;
            height: 50px;
            color: #fff;
            text-align: center;
            line-height: 50px;
            background-color: #000;
            opacity: .6;
            cursor: pointer;
            font-family: simsun;
        }

        .slidebar_left {
            left: 0;
        }

        .slidebar_right {
            right: 0;
        }
    </style>
</head>
<body>
    <div id="playBox" class="play-box">
        <div id="imgList">
            <a href="#" class="current">
                <span>a</span>
                <img src="/images/test/1.jpg">
            </a>
            <a href="#">
                <span>b</span>
                <img src="/images/test/2.jpg">
            </a>
            <a href="#">
                <span>c</span>
                <img src="/images/test/3.jpg">
            </a>
            <a href="#">
                <span>d</span>
                <img src="/images/test/4.jpg">
            </a>
            <a href="#">
                <span>e</span>
                <img src="/images/test/5.jpg">
            </a>
        </div>
        <div id="iconList">
            <ul>
                <li class="current">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
        <div class="slidebar slidebar_left"><</div>
        <div class="slidebar slidebar_right">></div>
    </div>

    <script src="/js/jquery.2.1.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var speed = 3000;
            var m = 1;
            var imgCount = $("#iconList ul li").length;
            var playTimer = setInterval(runPlay, speed);

            function runPlay() {
                if (m > imgCount - 1) m = 0;
                controlPlay(m);
                m++;
            }

            function controlPlay(n) {
                $("#imgList a").removeClass("current").eq(n).addClass("current");
                $("#iconList li").removeClass("current").eq(n).addClass("current");
            }

            $("#playBox").mouseenter(function () {
                clearInterval(playTimer);
                $(".slidebar").fadeIn(300);
            }).mouseleave(function () {
                playTimer = setInterval(runPlay, speed);
                $(".slidebar").fadeOut(300);
            });

            $("#iconList li").click(
                function () {
                    m = $(this).index();
                    controlPlay(m);
                    m++;
                }).hover(function () {
                    return false;
                });
            $(".slidebar").hover(function () { return false; });

            $(".slidebar_right").click(
                function () {
                    if (m > imgCount - 1) m = 0;
                    controlPlay(m);
                    m++;
                });
            $(".slidebar_left").click(
                function () {
                    m -= 2;
                    if (m < 0) m = imgCount - 1;
                    controlPlay(m);
                    m++;
                });
        });
    </script>
</body>
</html>
Jquery轮播图
相关推荐
