JS实现广告的定时隐藏以及图片的轮播

最新推荐文章于 2024-11-07 20:49:42 发布
原创最新推荐文章于 2024-11-07 20:49:42 发布 · 484 阅读
1 ·
CC 4.0 BY-SA版权
文章标签：
#JS
JavaWeb 专栏收录该内容
46 篇文章
订阅专栏
本文介绍了一个简单的网页布局方案，包括logo区域、菜单栏、图片轮播等功能的实现方式，并展示了如何通过JavaScript控制广告的显示与隐藏及图片轮播效果。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

        <style>
            /*整个body*/
            #bodyDiv{   
                width: 85%;
                margin:0 auto;/*设置body居中*/
            }

            /*第一栏logo*/
            .logoDiv{
                float: left;
                width: 33%;
                height: 80px;
            }

            .logoDiv a{
            text-decoration:none;/*去下划线*/
            line-height: 80px; /*设置line-height与父级元素的height相等*/
            /*overflow: hidden; /*防止内容超出容器或者产生自动换行*/
            }

            .clear{
                clear: both;/*去除浮动*/
            }

            /*菜单栏*/
            #menuDiv{
                width: 100%;
                height: 40px;
                background-color: black;
            }
            #menuDiv a{
                font-size: 20px;
                color: white;
                line-height: 40px;
                text-decoration:none;/*去下划线*/
            }

            /*图片滚动栏*/
            #imgDiv{
                width: 100%;
            }

            /*最新商品*/
            .product{
                width: 100%;
            }

            .contentclass{
                width: 100%;
            }

            .contentclass font{
                font-size: 30px;
                color: black;
            }

            /*底部链接*/
            .linkDiv a{
                font-size: 15px;
                color: blue;
                text-decoration: none;
            }

        </style>

        <script>
            var time;
            window.onload = function(){
                //设置定时
                time = window.setInterval("show()",5000);
                window.setInterval("changeImg()",5000);
            }
            //广告显示与隐藏
            function show() {
                var advertising = document.getElementById("adDiv");
                advertising.style.display = "block";
                //清除定时
                window.clearInterval(time);
                //设置新定时
                time = window.setInterval("hide()",5000);
            }

            function hide() {
                var adHide = document.getElementById("adDiv");
                adHide.style.display = "none";
                window.clearInterval(time);
            }


            //图片轮播
            var i = 1;
            function changeImg() {
                i++;
                //获得图片控制权
                if(i > 3) {
                    i = 1;
                }
                var img1 = document.getElementById("img1");  
                img1.src = "img/"+i+".jpg";
            }
        </script>
    </head>

        <body>
            <!--整个body-->
        <div id="bodyDiv">
            <!--
                广告,display首先设为none,即不显示广告。
            -->
            <div style="width: 100%;display: none;" id="adDiv">
                <img src="image/2.jpg" width="100%" id="advertising" />
            </div>
            <!--logo栏-->
            <div>
                <div class="logoDiv">
                    <img src="img/logo2.png" />
                </div>
                <div class="logoDiv">
                    <img src="img/header.jpg" />
                </div>
                <div class="logoDiv" style="vertical-align:middle">
                    <a href="#" >登录</a>&nbsp;&nbsp;&nbsp;
                    <a href="#" >注册</a>&nbsp;&nbsp;&nbsp;
                    <a href="#" >购物车</a>&nbsp;&nbsp;&nbsp;
                </div>
                <div class="clear"></div>
            </div>

            <!--菜单栏-->
            <div id="menuDiv">
                <a href="#">首页</a>&nbsp;&nbsp;&nbsp;
                <a href="#">手机数码</a>&nbsp;&nbsp;&nbsp;
                <a href="#">电脑办公</a>&nbsp;&nbsp;&nbsp;
                <a href="#">烟酒茶糖</a>&nbsp;&nbsp;&nbsp;
                <a href="#">鞋靴箱包</a>&nbsp;&nbsp;&nbsp;
            </div>

            <!--图片滚动栏-->
            <div id="imgDiv">
                <img src="img/okwu-athletics.jpg" id="img1" width="100%"/>
            </div>

            <!--热门商品栏-->
            <div class="product">
                <!--
                    热门商品+图片
                -->
                <div class="contentclass">
                    <font><b>热门商品</b></font><img src="images/title2.jpg"/>
                </div>

                <!--
                    商品类型
                -->
                <div style="width: 100%">
                    <!--第一列-->
                    <div style="width: 16%;height: 460px;float: left;" >
                        <img src="image/big01.jpg" width="100%" height="100%"/>
                    </div>
                    <!--剩下的横着排的-->
                    <div style="width: 84%;height: 460px;float: left;">

                        <!--第一行-->
                        <div>
                            <div style="width: 48%;height: 230px;float: left;">
                                <img src="image/middle01.jpg" width="100%" height="100%"/>
                            </div>
                            <div style="width: 16%;height: 230px;float: left;">
                                <img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg">
                            </div>
                            <div style="width: 16%;height: 230px;float: left">
                                <img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg"> 
                            </div>
                            <div style="width: 16%;height: 230px;float: left">
                                <img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg">
                            </div>  
                        </div>

                        <!--第二行-->
                        <div>
                            <div style="width: 16%;height: 230px;float: left">
                                <img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg">
                            </div>
                            <div style="width: 16%;height: 230px;float: left">
                                <img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg"> 
                            </div>
                            <div style="width: 16%;height: 230px;float: left">
                                <img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg">
                            </div>  
                            <div style="width: 16%;height: 230px;float: left">
                                <img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg">
                            </div>
                            <div style="width: 16%;height: 230px;float: left">
                                <img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg"> 
                            </div>
                            <div style="width: 16%;height: 230px;float: left">
                                <img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg">
                            </div>  
                        </div>
                        </div>
                    </div>
                </div>

                <!--广告栏-->
                <div style="width: 100%;">
                    <img src="image/ad.jpg" width="100%" height="100%">
                </div>

                <!--最新商品栏-->
                <div class="product">
                <!--
                    最新商品+图片
                -->
                <div class="contentclass">
                    <font><b>最新商品</b></font><img src="images/title2.jpg"/>
                </div>
                <!--
                    商品类型
                -->
                <div style="width: 100%">
                    <!--第一列-->
                    <div style="width: 16%;height: 460px;float: left;" >
                        <img src="image/big01.jpg" width="100%" height="100%"/>
                    </div>

                    <!--剩下的横着排的-->
                    <div style="width: 84%;height: 460px;float: left;">
                        <!--第一行-->
                        <div>
                            <div style="width: 48%;height: 230px;float: left;">
                                <img src="image/middle01.jpg" width="100%" height="100%"/>
                            </div>
                            <div style="width: 16%;height: 230px;float: left;">
                                <img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg">
                            </div>
                            <div style="width: 16%;height: 230px;float: left">
                                <img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg"> 
                            </div>
                            <div style="width: 16%;height: 230px;float: left">
                                <img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg">
                            </div>  
                        </div>

                        <!--第二行-->
                        <div>
                            <div style="width: 16%;height: 230px;float: left">
                                <img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg">
                            </div>
                            <div style="width: 16%;height: 230px;float: left">
                                <img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg"> 
                            </div>
                            <div style="width: 16%;height: 230px;float: left">
                                <img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg">
                            </div>  
                            <div style="width: 16%;height: 230px;float: left">
                                <img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg">
                            </div>
                            <div style="width: 16%;height: 230px;float: left">
                                <img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg"> 
                            </div>
                            <div style="width: 16%;height: 230px;float: left">
                                <img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg">
                            </div>  
                        </div>
                        </div>
                    </div>
                </div>

                <!--图片栏-->
                <div style="width: 100%;">
                    <img src="image/footer.jpg" width="100%"/>
                </div>

                <!--底栏-->
                <center>
                    <div class="linkDiv" >
                        <a href="#" >关于我们</a>&nbsp;&nbsp;
                        <a href="#" >联系我们</a>&nbsp;&nbsp;
                        <a href="#" >招贤纳士</a>&nbsp;&nbsp;
                        <a href="#" >法律声明</a>&nbsp;&nbsp;
                        <a href="#" >友情链接</a>&nbsp;&nbsp;
                        <a href="#" >支付方式</a>&nbsp;&nbsp;
                        <a href="#" >配送方式</a>&nbsp;&nbsp;
                        <a href="#" >服务方式</a>&nbsp;&nbsp;
                        <a href="#" >广告声明</a>&nbsp;&nbsp;
                    </div>

                <div>
                    <font>--------------------------------------------------------------------------------------------------</font>
                    <br />
                    <font> Copyright © 2005-2016 传智商城 版权所有 </font>
                </div>
            </center>

        </div>
    </body>

</html>