前端——轮播图 

<html>
    <head>
        <meta charset="utf-8" />
        <title>图片滚动</title>
        <style>
            *{
                box-sizing: border-box;
            }
            html,body,ul,p{
                border: 0;
                margin: 0;
                padding: 0;
            }
            #main{
                position: relative;
                margin: 0 auto;
                width: 690px;
                height: 180px;
                margin-top: 50px;
            }
            .scroll{
                width: 640px;
                height: 200px;
                position: relative;
                left: 25px;
                overflow: hidden;
            }
            .scroll ul{
                list-style-type: none;
                position: absolute;
                top: 0;
                left: 0;
                height: 200px;
                width: 2240px;
            }
            ul li{
                width: 160px;
                height: 200px;
                float: left;    
            }
            ul li img{
                width: 160px;
                height: 160px;
                display: block;
            }
            ul li p{
                text-align: center;
            }
            span{
                width: 25px;
                height: 50px;
                font-size: 50px;
                cursor: pointer;
                display: block;
                position: absolute;
                top: 50%;
                margin-top: -25px;
            }
            #btn-left{
                left: 0;
            }
            #btn-right{
                right: 0;
            }
            p{
                font-size: 15px;
            }
            a{
                text-decoration: none;
                color: black;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <span id="btn-left"><</span>
            <div class="scroll">
                <ul id="list">
                    <li><a href="#"><img src="imgs/01.jpg"/><p>aaa</p></a></li>
                    <li><a href="#"><img src="imgs/02.jpg"/><p>bbb</p></a></li>
                    <li><a href="#"><img src="imgs/03.jpg"/><p>ccc</p></a></li>
                    <li><a href="#"><img src="imgs/04.jpg"/><p>ddd</p></a></li>
                    <li><a href="#"><img src="imgs/05.jpg"/><p>eee</p></a></li>
                    
                </ul>
            </div>
            <span id="btn-right"></span>
        </div>
    </body>
</html>
<script>
    window.onload = function(){
        var oLeft = document.getElementsByTagName("span")[0];
        var oRight = document.getElementsByTagName("span")[1];
        var oUl = document.getElementById("list");
        oLeft.onclick = function(){
            if (oUl.offsetLeft == 0) {
                {return;}
            } else{
                oUl.style.left = oUl.offsetLeft+160+"px";
                
            }
        }
        oRight.onclick = function(){
            if (oUl.offsetLeft == -160) {
                oUl.style.left = 0;
            //    {return;}
            } else{
                oUl.style.left = oUl.offsetLeft-160+"px";
            }
        }             
    }


</script>

 

posted @ 2020-04-23 11:51  暗夜消辰  阅读(191)  评论(0)    收藏  举报