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

来源：互联网发布：neflix 淘宝账号编辑：程序博客网时间：2024/06/07 14:17
<!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