为什么箭头不起作用?急急急!在线等


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>焦点轮播图</title>
    <style type="text/css">
        *{margin: 0;padding: 0;text-decoration: none;}
        body{padding: 20px;}
        #container{
            width: 600px;height: 400px;border: 3px solid #333;overflow: hidden;position: relative;
        }
        #list{width: 4200px;height: 400px;z-index: 1;position: absolute;}
        #list img{float:left;}
        #buttons{height: 10px;width: 100px;z-index: 2;bottom: 20px;left: 250px;position: absolute;}
        #buttons span { cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px;}
        #buttons .on {  background: orangered;}
        .arrow{cursor: pointer;display: none;line-height: 39px;text-align: center;font-size: 36px; font-weight: bold; width: 40px; height: 40px;  position: absolute; z-index: 2; top: 180px; background-color: RGBA(0,0,0,.3); color: #fff;}
        .arrow:hover{background-color: RGBA(0,0,0,.7);}
        #container:hover .arrow { display: block;}
        #prev { left: 20px;}
        #next { right: 20px;}
    </style>
    <script type="text/javascript">
    window.onload = function(){
        var container = document.getElementById('container');
        var list = document.getElementById('list');
        var buttons = document.getElementById('buttons').getElementsByTagName('span');
        var prev = document.getElementById('prev');
        var next = document.getElementById('next');
            

        next.onclick = function(){
            list.style.left = parseInt(list.style.left) - 600 + 'px';
        }
        prev.onclick = function(){
            list.style.left = parseInt(list.style.left) + 600+'px';
        }

    }
    </script>
</head>
<body>
    <div id="container">
    <div id="list">
        <img src="images/5.jpg" alt="1"/>
        <img src="images/1.jpg" alt="1"/>
        <img src="images/2.jpg" alt="2"/>
        <img src="images/3.jpg" alt="3"/>
        <img src="images/4.jpg" alt="4"/>
        <img src="images/5.jpg" alt="5"/>
        <img src="images/1.jpg" alt="5"/>
    </div>
    <div id="buttons" style="left: -600px;">
        <span index="1"></span>
        <span index="2"></span>
        <span index="3"></span>
        <span index="4"></span>
        <span index="5"></span>
    </div>
    <a href="javascript:;" id="prev">&lt;</a>
    <a href="javascript:;" id="next">&gt;</a>
</body>
</html>

qq_眉黛青山_0
浏览 1352回答 1
1回答
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript