图片轮播的简单代码

最新推荐文章于 2024-05-07 03:39:03 发布

逗比吃橙子

最新推荐文章于 2024-05-07 03:39:03 发布

阅读量591

点赞数

文章标签：图片轮播 jquery

本文链接：https://blog.csdn.net/qq_36030440/article/details/52693546

版权

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>