使用jQuery中prependTo appendTo图片轮播凸出效果

最新推荐文章于 2022-03-31 16:51:53 发布

春风十里桃花开

最新推荐文章于 2022-03-31 16:51:53 发布

阅读量716

点赞数

分类专栏：混合开发文章标签： appendTo prependTo

本文链接：https://blog.csdn.net/wanleiSuper/article/details/78294660

版权

混合开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            text-align: center;
        }
        .clear:after{
            content: "\200B";
            display: block;
            width: 0;
            height: 0;
            clear: both;
        }
        ul{
            width: 820px;
            margin: 200px auto 50px;
        }
        img{
            display: block;
            width: 100%;
            height: 100%;
        }
        li{
            list-style: none;
            width: 256px;
            height: 144px;
            float: left;
        }
        li:nth-child(2){
            width: 300px;
            height: 180px;
            margin-top: -20px;
        }
    </style>
</head>
<body>
<ul class="clear">
    <li><img src="3.jpg"></li>
    <li><img src="1.jpg"></li>
    <li><img src="2.jpg"></li>
</ul>
<button>上一个</button>
<button>下一个</button>
<script>
    var timmer;
    function run(){
        timmer=setInterval(function(){
            $("ul li").eq(0).appendTo($("ul"));
        },1000);
    }
    run();
    $("button").eq(1).click(function(){
        clearInterval(timmer);
        $("ul li").eq(0).appendTo($("ul"));
        setTimeout(function(){
            run();
        },2000)

    });
    $("button").eq(0).click(function(){
        clearInterval(timmer);
        $("ul li:last-child").prependTo($("ul"));
        setTimeout(function(){
            run();
        },2000)
    });
</script>
<!--<script>
    var timmer;
    function run(){
        timmer=setInterval(function(){
            $("ul li:first-child").appendTo($("ul"));
        },1000);
    }
    clearInterval(timmer);
    run();
    $("button").eq(1).click(function(){
        clearInterval(timmer);
        $("ul li:first-child").appendTo($("ul"));
        clearInterval(timmer);
        run();
    });
    $("button").eq(0).click(function(){
        clearInterval(timmer);
        $("ul li:last-child").prependTo($("ul"));
        clearInterval(timmer);
        run();
    });
</script>-->
</body>
</html>

春风十里桃花开

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用jQuery中prependTo appendTo图片轮播凸出效果

Title *{ margin: 0; padding: 0; text-align: center; } .clear:after{ content: "\200B"; display: block;
复制链接

扫一扫