JQuery 08 DOM编程之循环移动图片墙案例

最新推荐文章于 2024-04-27 16:43:08 发布

_大木_

最新推荐文章于 2024-04-27 16:43:08 发布

阅读量354

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/Beyond_Nothing/article/details/106319708

版权

JQuery学习成长之路专栏收录该内容

10 篇文章 0 订阅

订阅专栏

detach() 会保留所有绑定的事件、附加的数据，这一点与 remove()不同

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>循环图片墙实现</title>
</head>
<script src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        window.setInterval(move,1000);
        function move(){
            var lis=$('li');
            $("ul").append($(lis[0]).detach()); //detach() 会保留所有绑定的事件、附加的数据，这一点与 remove() 不同
        }
    })
</script>

<body>
<ul>
    <li><img src="../image/1.jpg" /></li>
    <li><img src="../image/2.jpg" /></li>
    <li><img src="../image/3.jpg" /></li>
    <li><img src="../image/4.jpg" /></li>
    <li><img src="../image/5.jpg" /></li>
</ul>
<style type="text/css">
    img{width:100px; height:100px; border:1px #999 solid;}
    ul{list-style-type:none;}
    li{display:inline; margin:5px;}
</style>

</body>
</html>