1. 程式人生 > >用js實現簡單的網頁輪播圖

用js實現簡單的網頁輪播圖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 600px;
            height: 500px;
            overflow: hidden;
            margin: 0 auto;
            border: 1px solid black;
            position: relative;
            background: white;
        }
        ol{
            position: absolute;
            bottom:20px;
            right: 20px;
            list-style: none;
        }
       ol li{
            background: white;
            width: 10px;
            height: 10px;
           line-height: 10px;
           text-align: center;
           cursor: pointer;
            border: 1px solid #ccc;
            border-radius: 50%;
            float: left;
            margin:0 5px;
        }
    </style>
    <script>
        window.onload=function () {
            var one=document.getElementById('one');
            var two=document.getElementById('two');
            var three=document.getElementById('three');
            var huge=document.getElementById('huge');
            one.onclick=function () {
                huge.src="images/1.png";
            }
            two.onclick=function () {
                huge.src="images/2.png";
            }
            three.onclick=function () {
                huge.src="images/3.png";
            }
        }
    </script>
</head>
<body>
<div class="box">
    <img src="images/1.png" id="huge">
    <ol>
    <li id="one">1</li>
    <li id="two">2</li>
    <li id="three">3</li>
    </ol>
</div>


</body>
</html>