[JS 03]JavaScript实现轮播图、弹出广告

一、实现一个小demo（图片切换）

将要切换的图片命名为有序数列，图片的路径前面都是相同的，只有最后的不同,因此将路径规律化。

document.getElementById("img1").src = "../../img/课堂演示图片汇总/" + i + ".jpg"

将要切换的图片命名为有序数列

        <script>
            var i = 1;//全局变量
            function changeimg() {
                i++;
                document.getElementById("img1").src = "../../img/课堂演示图片汇总/" + i + ".jpg"
                if (i == 3) {
                    i = 0;
                }
            }
        </script>

    <body>
        <div>
            <input type="button" value="下一张" onclick="changeimg()" />
            <img src="../../img/课堂演示图片汇总/1.jpg" width="100%" id="img1" />
        </div>
    </body>

效果图

二、轮播图

技术分析
1.获取元素document.getElementById(“id 名称”)

2.事件(onload)
轮播图与图片切换的不同之处在于，轮播图是自动切换，而上面的小demo是通过点击“下一张”按钮来实现图片的变换。所以这里我们使用一个事件（onload）加载。

3.定时操作：setInterval（）是Window 对象方法，按照指定周期以毫秒为单位来调用函数或计算表达式。
用法：setInterval(code,millisec[,"lang"])
返回值：一个可以传递给Window.clearInterval()从而取消对 code 的周期性执行的值。
setInterval(“changeImg()”,3000); 3000的单位是ms。
也可以写成window.setInterval(“changeImg()”,3000); window可以省略。

步骤分析
第一步：确定事件(onload)并为其绑定一个函数（onload绑定在<body>里面)
第二步：书写绑定的这个函数
第三步：书写定时任务(setInterval)
第四步：书写定时任务里面的函数
第五步：通过变量的方式，进行循环(获取轮播图的位置，并设置 src 属性)

实现代码
<body onload="init()">， onload绑定在<body>里面，因为加载是在body中。
在指定位置设置id。

        <script>
            function init() {
                //书写轮播图显示的定时操作
                //函数所以要加()
                setInterval("change()", 3000);
            }
            //书写函数
            var i = 1;
            function change() {
                i++;
                //获取图片位置，设置src属性值
                document.getElementById("change").src = "../../img/课堂演示图片汇总/" + i + ".jpg"
                if (i == 3) {
                    i = 0;
                }
            }
        </script>```

            <!--3.轮播图部分-->
            <div id="three ">
                <img src="../../img/课堂演示图片汇总/1.jpg " width="100% " id="change "/>
            </div>

三、定时弹出广告

技术分析
获取图片的位置(document.getElementById(“”))
隐藏图片：display：none
定时操作：setInterval(“显示图片的函数”，3000);

步骤分析
第一步：在页面指定位置隐藏一个广告图片(使用 display 属性的 none 值)
第二步：确定事件(onload)并为其绑定一个函数
第三步：书写这个函数(设置一个显示图片的定时操作)
第四步：书写定时器中的函数(获取广告图片的位置并设置属性style的display值block)
第五步：清除显示图片的定时操作()
第六步：书写隐藏图片的定时操作
第七步：书写定时器中的函数(获取广告图片的位置并设置属性 style 的 display 值 none)
第八步：清除隐藏图片的定时操作()

function init(){            
            //书写轮播图显示的定时操作
            //函数所以要加()
            setInterval("change()",3000);
            
            //1.书写显示广告弹出的定时操作
            time=setInterval("showad()",3000);
            }
            var i=1;
            function change(){
                i++;
                document.getElementById("change").src="../../img/课堂演示图片汇总/"+i+".jpg"
                if(i==3){
                    i=0;
                }
            }
            //2.书写显示广告图片的函数
            function showad(){
                
                var adele=document.getElementById("img2");//3.获取广告图片的位置
                
                adele.style.display="block";//4.修改广告图片属性，使其显示
                
                clearInterval(time);//5.清除显示图片的定时操作
                
                time1=setInterval("hidad()",3000);//6.设置隐藏图片的操作
            }
            //7.书写隐藏广告图片的函数
            function hidad(){
                   //8：获取广告图片位置                
                document.getElementById("img2").style.display="none";
                   //9：清除隐藏广告图片的定时操作()
                clearInterval(time1);
            }

Html 代码：

 <body onload="init()">

<!--定时弹出广告图片位置--> 
<img src="../img/f001a62f-a49d-4a4d-b56f2b6908a0002c_g.jpg" width="100%" style="display: none" id="img2"/>

最后编辑于：2019.02.28 20:43:35