图片轮播的简单代码

来源：互联网发布：zipalign优化工具编辑：程序博客网时间：2024/05/16 07:14
jquery文件自己引用图片自己路径自己改写效果可以自己看<!DOCTYPE HTML><html><head>    <meta charset="utf-8">    <title>图片轮播演示</title>    <script type="text/javascript" src="../jquery.js"></script>    <style type="text/css">        * {            margin: 0px;            padding: 0px;            font-size: 14px;        }        div.LunBo {            position: relative;            list-style-type: none;            height: 170px;            width: 490px;        }        div.LunBo ul li {            position: absolute;            height: 170px;            width: 490px;            left: 0px;            top: 0px;            display: none;        }        div.LunBo ul li.CurrentPic {            display: block;        }        div.LunBo div.LunBoNum {            position: absolute;            left: 374px;            bottom: 11px;            width: 83px;            text-align: right;            background-color: #999;            padding-left: 10px;        }        div.LunBo div.LunBoNum span {            height: 20px;            width: 15px;            display: block;            line-height: 20px;            text-align: center;            margin-top: 5px;            margin-bottom: 5px;            float: left;            cursor: pointer;        }        div.LunBo div.LunBoNum span.CurrentNum {            background-color: #3F6;        }    </style></head><body><center><div class="LunBo">    <ul>        <li class="CurrentPic"><img src="1.png" width="490" height="170"></li>        <li><img src="2.png" width="490" height="170"></li>        <li><img src="3.png" width="490" height="170"></li>        <li><img src="4.jpg" width="490" height="170"></li>        <li><img src="5.jpg" width="490" height="170"></li>    </ul>    <div class="LunBoNum">        <span class="CurrentNum">1</span>        <span>2</span>        <span>3</span>        <span>4</span>        <span>5</span>    </div></div></center><script type="text/javascript" language="javascript">    var PicTotal = 5;    var CurrentIndex;    var ToDisplayPicNumber = 0;    $("div.LunBo div.LunBoNum span").click(DisplayPic);    function DisplayPic() {// 测试是父亲的第几个儿子        CurrentIndex = $(this).index();// 删除所有同级兄弟的类属性        $(this).parent().children().removeClass("CurrentNum")// 为当前元素添加类        $(this).addClass("CurrentNum");// 隐藏全部图片        var Pic = $(this).parent().parent().children("ul");        $(Pic).children().hide();// 显示指定图片        $(Pic).children("li").eq(CurrentIndex).show();    }    function PicNumClick() {        $("div.LunBo div.LunBoNum span").eq(ToDisplayPicNumber).trigger("click");        ToDisplayPicNumber = (ToDisplayPicNumber + 1) % PicTotal;        setTimeout("PicNumClick()",1000);    }    setTimeout("PicNumClick()",1000);</script></body></html>
0 0