图片轮播

最新推荐文章于 2024-10-03 15:07:30 发布

2Hhhhhh

最新推荐文章于 2024-10-03 15:07:30 发布

阅读量180

点赞数 3

分类专栏： webstorm 文章标签： webstorm

本文链接：https://blog.csdn.net/weixin_41595700/article/details/85209250

版权

webstorm 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

页面代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="css/global.css" rel="stylesheet"/>
    <link href="css/layout.css" rel="stylesheet"/>
    <link href="css/template.css" rel="stylesheet" />
</head>
<body>
<div id="content">
    <!--轮换显示的横幅广告图片-->
    <div class="scroll">
        <ul id="scroll_img">
            <li><img src="images/scroll-01.jpg"/></li>
            <li><img src="images/scroll-02.jpg"/></li>
            <li><img src="images/scroll-03.jpg"/></li>
            <li><img src="images/scroll-04.jpg"/></li>
        </ul>
        <ul id="scroll_number">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
</div>
</body>
<script  src="js/jquery-1.12.4.js"></script>
<script>
    //第一个圆形颜色为橙色
    $("#scroll_number li:eq(0)").css("background-color","orange");
    //循环播放广告
    var index = 1;
    var settime = setInterval(function(){
        if(index>3){
            index=0;
        }
        index++;
        $("#scroll_img li").hide();
        $("#scroll_img li:eq("+(index-1)+")").fadeIn("slow");

        $("#scroll_number li").css("background-color","#a9a9a9a9");
        $("#scroll_number li:eq("+(index-1)+")").css("background-color","orange");

    },1700);
</script>
</html>

页面效果：