js实现图片轮播

时间：2015-07-21 14:32:44 阅读：104 评论：0 收藏：0 [点我收藏+]

标签：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>图片左右滑动测试</title>
    <style>
        html,body,div,ul,p {
            padding: 0;
            margin: 0;
        }
        .box-wrap{
            width: 360px;
            height: 165px;
            padding: 10px;
            position: absolute;
            top: 10%;
            left:calc(50% - 180px);
            background-color: #222222;
        }
        .box{
            position: relative;
        }
        ul{
            height: 160px;
            width: 100%;
            display: inline-block;
            position: relative;
            left: 0;
        }
        li{
            position: relative;
            float: left;

            display: inline-block;
            list-style-type: none;
            border: 4px solid #222222;
        }
        li:hover{
            border: 4px solid #aaaaaa;
        }
        .box-main li img{
            width: 90px;
            height: 135px;
        }
        .box-main{
            font-size: 0;
            width: 300px;
            height: 160px;
            position: absolute;
            top: 0;
            margin: 0 30px;
            overflow: hidden;
        }
        .box-left{
            position: absolute;
            top: 0;
            left: 0;
        }
        .box-left .pre-img{
            display: inline-block;
            width: 30px;
            height: 140px;
            background: url("images/table-btn.png") no-repeat 3px center;
        }
        .box-right{
            position: absolute;
            right: 0;
            top: 0;
        }
        .box-right .next-img{
            display: inline-block;
            width: 30px;
            height: 140px;
            background: url("images/table-btn.png") no-repeat -72px center;
        }
        p{
            text-align: center;
            font-size: 14px;
            color: #eeaaaa;
        }

    </style>
</head>
<body>
<div class="box-wrap">
    <div class="box">
        <div id="box-left" class="box-left">
            <label class="pre-img"></label>
        </div>
        <div class="box-right">
            <label id="box-right" class="next-img"></label>
        </div>
        <div class="box-main">
            <ul id="imgUl" class="box-main-ul">
                <li class="first-img">
                    <img src="images/Jellyfish.jpg"/>
                    <p>first</p>
                </li>
                <li class="second-img">
                    <img src="images/Koala.jpg"/>
                    <p>second</p>
                </li>
                <li class="third-img">
                    <img src="images/Lighthouse.jpg"/>

                    <p>third</p>
                </li>
                <li class="fourth-img">
                    <img src="images/Penguins.jpg"/>
                    <p>fourth</p>
                </li>
                <li class="fifth-img">
                    <img src="images/Tulips.jpg"/>
                    <p>five</p>
                </li>
            </ul>
        </div>
    </div>
</div>
</body>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    var $pageUp = $("#box-right");
    var $pageDown = $("#box-left");
    var $main = $("#imgUl");
    $pageUp.click(function(){
        var firstChild = $main.find("li")[0];
        var parent = firstChild.parentNode;
        parent.removeChild(firstChild);
        parent.appendChild(firstChild);
    });
    $pageDown.click(function(){
        var firstChild = $main.find("li")[0];
        var lastChild = $main.find("li")[3];
        var parent = lastChild.parentNode;
        parent.removeChild(lastChild);
        parent.insertBefore(lastChild,firstChild);
    })
</script>
</html>

js实现图片轮播

标签：

原文地址：http://www.cnblogs.com/wdy1314/p/4664206.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行