首页 > 代码库 > JavaScript 原生态幻灯片切换

JavaScript 原生态幻灯片切换

2024-07-28 04:36:33   224人阅读

<!doctype html>
<html>
<head>
    <title>
        幻灯片效果联系
    </title>

    <style type="text/css">
        body{background-color: #373737;}
        body, ul, li, a, img{margin: 0px; padding: 0px;}
        .box{width: 600px; height: 400px; background-color: #FFFFFF; margin: 0px auto; position: relative;  overflow: hidden;}
        .box #ImgBox{width: 1200px; height: 400px; position: absolute; left: 0px; top: 0px;}
        .box #ImgBox ul{}
        .box #ImgBox li{float: left; list-style-type: none;}
        .box #ImgBox img{width: 600px; height: 400px; display: block;}
        .box .ImgNum{position: absolute; left: 0px; bottom: 10px; width: 100%; text-align: center;}
        .box .ImgNum a{width: 20px; height: 5px; background-color: #FFFFFF; overflow: hidden; display: inline-block; margin: 0px 2px;}
        .box .ImgNum .active{background-color: #FF7700;}
    </style>

    <script type="text/javascript">
        function move(num)
        {
            var p1 = document.getElementById("p1");
            var p2 = document.getElementById("p2");
            if(num == 1)
            {
                document.getElementById("ImgBox").style.left = "0px";
                p2.setAttribute("class", "");
                p1.setAttribute("class", "active");
            }
            else
            {
                document.getElementById("ImgBox").style.left = "-600px";
                p1.setAttribute("class", "");
                p2.setAttribute("class", "active");
            }
        }
    </script>
</head>

<body>
    <div class="box">
        <ul id="ImgBox">
            <li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/banner_01.jpg" /></a></li>
            <li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/banner_02.jpg" /></a></li>
        </ul>
        <ul class="ImgNum">
            <a id="p1" class="active" href="http://www.mamicode.com/#" onm ouseover="move(1)"></a>
            <a id="p2" href="http://www.mamicode.com/#" onm ouseover="move(-1)"></a>
        </ul>
    </div>
</body>
</html>

JavaScript 原生态幻灯片切换


联系
我们