css3+js实现自动轮播(初稿) 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Banner</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .banner{
            width: 600px;
            height: 400px;
            margin: 20px auto;
            overflow: hidden;
        }
        .banner>ul.slider{
            list-style: none;
            height: 100%;
        }
        ul.slider>li{
            float: left;
        }
        ul.slider>li,ul.slider>li>img{
            height: 100%;
        }
        ul.slider>li>img{
            width: 100%;
        }
        .stranslateMove{
            animation: stranslateX 3s infinite;
            -webkit-animation: stranslateX 3s infinite;
        }
        @keyframes stranslateX{
            from{ margin-left: 0; }
            to{ margin-left: -600px; }
        }
        @-webkit-keyframes stranslateX{
            from{ margin-left: 0; }
            to{ margin-left: -600px; }
        }
        button{
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="banner">
        <ul class="slider ">
            <li class="stranslateMove">
                <img src="banner1.jpg">
            </li>
            <li>
                <img src="banner2.jpg">
            </li>
            <li>
                <img src="banner3.jpg">
            </li>
            <li>
                <img src="banner4.jpg">
            </li>
            <li>
                <img src="banner5.jpg">
            </li>
        </ul>
    </div>
    <p>
        <button class="pause">pause</button>
    </p>
    <script type="text/javascript">
        !function(){
            function initBanner(){
                // 初始化轮播容器的宽度,让每张图片的宽度等于容器的宽度
                var slider = document.querySelector(".slider"),                //轮播容器
                    bannerWidth = document.querySelector(".banner").offsetWidth,    //视图容器宽度
                    liWidth = document.querySelectorAll(".slider>li"),
                     sliderlen = liWidth.length + 2;
                console.log(bannerWidth);
                for(var i = 0; i<liWidth.length;i++){
                    liWidth[i].style.width = bannerWidth + 'px';
                }
                slider.style.width = bannerWidth * sliderlen + 'px';

            }
            initBanner();
        }();
        var t;
        function autoPlay(){
            document.querySelector(".slider>li:first-child").className = "";
            document.querySelector(".slider").appendChild(document.querySelector(".slider>li:first-child"));
            document.querySelector(".slider>li:first-child").className = "stranslateMove";
            t = setTimeout("autoPlay()",3000);
        }
        setTimeout("autoPlay()",3000);
        document.querySelector("button").onclick = function(){
            clearTimeout(t);
            document.querySelector(".slider>li:first-child").className = "";
        }
    </script>
</body>
</html>

 

posted @ 2018-03-22 15:05  SingleShadow  阅读(386)  评论(0)    收藏  举报