JQuery的图片的切换和自动轮播

最新推荐文章于 2024-11-01 16:50:09 发布

原创最新推荐文章于 2024-11-01 16:50:09 发布 · 424 阅读

0 ·

CC 4.0 BY-SA版权

Angularjs 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS和jQuery实现图片轮播效果的方法。通过调整样式和使用jQuery来控制图片的显示顺序，实现了无缝轮播的效果，并且加入了上一个和下一个按钮来手动控制轮播。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>