图片轮播

来源：互联网发布：考研app推荐软件编辑：程序博客网时间：2024/05/17 04:27

学习过的东西，以后要用到的时候再过来看，也可以方便其他人学习。

<!doctype html><html>    <head>        <title>图片轮播</title>        <meta charset="utf-8"/>        <style type="text/css">            ul {                list-style-type: none;   /*去掉无序列表的点*/                border: 2px solid #ccc;                width: 480px;                height: 360px;                margin: 0;                padding: 0;            }            li {                width: 480px;                height: 360px;                margin: 0;                padding: 0;            }            .show {                display: block;            }            .hide {                display: none;            }        </style>        <script type="text/javascript" src="../js/jquery.js"></script>        <script type="text/javascript">            var index = 0;//记录循环次数            function start() {                setInterval(function(){   //setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式                    //将显示的图片隐藏                    $("li:visible").hide();                    //将下一张图片显示                    //++index%$("li").length                    $("li:eq("+(++index%$("li").length)+")").show();                    },1000);            }        </script>    </head>    <!-- onload是页面加载事件，表示在页面加载后调用start()函数 -->    <body onload="start();">        <ul id="photos">            <li class="show"><img src="../images/f1.jpg"/></li>            <li class="hide"><img src="../images/f2.jpg"/></li>            <li class="hide"><img src="../images/f3.jpg"/></li>            <li class="hide"><img src="../images/f4.jpg"/></li>        </ul>    </body></html>

0 0