banner轮播 - 爱码网

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        .banner_wrap{
            width: 780px;
            height: 231px;
            overflow: hidden;
            position: relative;
            margin: 0 auto;
        }
        .banner{
            width: 5460px;
            height: 231px;
            list-style: none;
            margin-left: -780px;
        }
        .banner li{
            float: left;
            width: 780px;
            height: 231px;
        }
        .prev{
            left:0;
            border-top-left-radius: 50%;
            border-bottom-left-radius: 50%;
        }
        .next{
            right:0;
            border-top-right-radius: 50%;
            border-bottom-right-radius: 50%;
        }
        .arrows{
            position: absolute;
            margin-top: -35px;
            background: rgba(205,205,205,0.6);
            width: 35px;
            height:70px;
            top:50%;
            font-size: 18px;
            color: #fff;
            text-align: center;
            line-height: 70px;
            cursor: pointer;
        }
        .round_wrap{
            width: 125px;
            position: absolute;
            bottom: 20px;
            left:50%;
            margin-left: -62px;
            list-style: none;
            cursor: pointer;
        }
        .round_wrap li{
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: rgba(230,230,230,0.7);
            float: left;
            margin-left: 10px;
        }
        .round_wrap li.now{
            background: rgba(50,50,50,0.9);
        }
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $(\'.banner_wrap\').hover(function () {
                $(\'.arrows\').css(\'background\',\' rgba(205,205,205,0.9)\');
                clearInterval(repeat)
            },function () {
                $(\'.arrows\').css(\'background\',\' rgba(205,205,205,0.6)\');
                repeat = setInterval(function () {
                    if($(\'.banner:not(:animated)\').length>0) {
                        scrollIndex++;
                        scrollMove()
                    }
                },2000);
            });
            var prev=$(\'.prev\'),
                next=$(\'.next\'),
                banner=$(\'.banner\'),
                scrollIndex=1,
                elWidth = 780;
            next.click(function () {
                if($(\'.banner\').not(":animated").length>0) {
                    scrollIndex++;
                    scrollMove()
                }
            });
            prev.click(function () {
                if($(\'.banner:not(:animated)\').length>0) {
                    scrollIndex++;
                    scrollMove()
                }
            });
            function scrollMove() {
                banner.animate({
                    \'marginLeft\':-scrollIndex*elWidth+\'px\'
                },500,function () {
                    if(scrollIndex==6){
                        scrollIndex=1;
                        banner.css(\'margin-left\',-elWidth+\'px\');
                    }
                    if(scrollIndex==0){
                        scrollIndex=5;
                        banner.css(\'margin-left\',\'-3900px\');
                    }
                    $(\'.round_wrap li\').eq(scrollIndex-1).addClass(\'now\').siblings().removeClass(\'now\')
                });
            }
            var repeat = setInterval(function () {
                if($(\'.banner:not(:animated)\').length>0) {
                    scrollIndex++;
                    scrollMove()
                }
            },2000);
            $(\'.round_wrap li\').click(function () {
                scrollIndex = $(this).index()+1;
                scrollMove()
            })
        })
    </script>
</head>
<body>
    <div class="banner_wrap">
        <div class="prev arrows">&lt;</div>
        <div class="next arrows">&gt;</div>
        <ul class="banner">
            <li><img src="imasges/article_image09.jpg"/></li>
            <li><img src="imasges/article_image05.jpg"/></li>
            <li><img src="imasges/article_image06.jpg"/></li>
            <li><img src="imasges/article_image07.jpg"/></li>
            <li><img src="imasges/article_image08.jpg"/></li>
            <li><img src="imasges/article_image09.jpg"/></li>
            <li><img src="imasges/article_image05.jpg"/></li>
        </ul>
        <ul class="round_wrap">
            <li class="now"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>