js--1图片切换,定时器,自动轮播,图片显示隐藏

Posted wml2018

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js--1图片切换,定时器,自动轮播,图片显示隐藏相关的知识,希望对你有一定的参考价值。

1切换图片

2定时器--setTimeout()和setInterval()的用法

3定时器使用的案例——图片轮播

4图片显示和隐藏

5显示隐藏和定时器的案例——定时弹出广告

 


1切换图片

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            /*
                1. 事件: 点击事件 onclick
                2. 事件要触发函数: changeImg
                3. 在函数中
            */
            function changeImg(){
//                alert("要切换了")
                var img = document.getElementById("img1");
                img.src = "../img/1-161104143944.gif";
            }
        </script>
    </head>
    <body>
        <input type="button" value="点击切换图片" onclick="changeImg()" />
        <br />
        <img src="../img/222.jpg" id="img1" />
    </body>
</html>

 


 

2定时器--setTimeout()和setInterval()的用法

(1)setTimeout()用法

  • setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

    setTimeout(code,millisec)

    code:必需。要调用的函数后要执行的 javascript代码串。

    millisec:   必需。在执行代码前需等待的毫秒数。

  • clearInterval(timerID):用于取消 setTimeout() 函数设定的定时执行操作。

(2)setInterval()用法

setTimeout() 只执行 code 一次。如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

  • setInterval用于延迟执行某方法或功能

   示例:setInterval(alert("Hello");3000);

  • clearInterval(timerID):用于取消setInterval 函数设定的定时执行操作。

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            //window 对象是一个最顶层对象
//            window.setInterval("alert(‘123‘);",2000);
            function test(){
                console.log("setInterval 调用了");
            }
//            setInterval("test()",2000);
// 第一个参数是要执行的函数或者是代码串,第二个程序要实行的间隔时间,毫秒为单位
 
//            setTimeout("test()",2000);
            var timerID;
            //开启定时器
            function startDinshiqi(){
                timerID = setInterval("test()",2000);
                //timerID = setTimeout("test()",3000);
            }
            //关闭定时器
            function stopDingshiqi(){
                clearInterval(timerID);
//                clearTimeout(timerID);
            }
            
        </script>
    </head>
    <body>
        <input type="button" value="开启定时器" onclick="startDinshiqi()" /><br />
        <input type="button" value="取消定时器" onclick="stopDingshiqi()"/><br />
    </body>
</html>

 


 

3图片轮播--定时器使用的案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--
            1. 确定事件: 文档加载完成的事件 onload
            2. 事件要触发 : init()
            3. 函数里面要做一些事情:(通常会去操作元素,提供交互)
               1. 开启定时器: 执行切换图片的函数 changeImg()
            4.  changeImg()
               1. 获得要切换图片的那个元素
        -->
        <script>
            var index = 0;
            
            function changeImg(){
                
                //1. 获得要切换图片的那个元素
                var img = document.getElementById("img1");
                
                //计算出当前要切换到第几张图片
                var curIndex = index%3 + 1;  //0,1,2 
                img.src="../img/"+curIndex+".jpg";  //1,2,3
                //每切换完,索引加1
                index = index + 1;
            }
            
            function init(){
                
                setInterval("changeImg()",1000);
            }
            
        </script>
    </head>
    <body onload="init()">
        <img src="../img/1.jpg" width="100%" id="img1"/>
    </body>
</html>

 


 

4图片显示和隐藏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
        //文档加载顺序
//            var img = document.getElementById("img1");
            
            function hideImg(){
                var img = document.getElementById("img1");
                img.style.display = "none";
            }
            
            function showImg(){
                var img = document.getElementById("img1");
                img.style.display = "block";
            }
        </script>
    </head>
    <body>
        <input type="button" value="显示" onclick="showImg()" />
        <input type="button" value="隐藏" onclick="hideImg()" /><br />
        
        <img src="../img/1-161104143944.gif" id="img1" />
        
        
    </body>
</html>

 


 

5显示隐藏和定时器的案例——定时弹出广告

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--
            1. 确定事件: 页面加载完成的事件 onload
            2. 事件要触发函数:  init()
            3. init函数里面做一件事: 
               1. 启动一个定时器 : setTimeout() 
               2. 显示一个广告
                  1. 再去开启一个定时5秒钟之后,关闭广告
        -->
        
        <script>
        
            function init(){
                setTimeout("showAD()",3000);
            }
            
            function showAD(){
                //首先要获取要操作的img
                var img = document.getElementById("img1");
                //显示广告
                img.style.display = "block";
                
                //再开启定时器,关闭广告
                setTimeout("hideAD()",3000);
            }
            
            function hideAD(){
                //首先要获取要操作的img
                var img = document.getElementById("img1");
                //隐藏广告
                img.style.display = "none";
            }
        </script>
    </head>
    <body onload="init()">
        <img id="img1" src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" style="display: none;"/>
    </body>
</html>

 

以上是关于js--1图片切换,定时器,自动轮播,图片显示隐藏的主要内容,如果未能解决你的问题,请参考以下文章

图片自动轮播及点击图标切换图片

jQuery实现简单的轮播图

JavaScript实现图片的自动轮播

图片自动轮播---2017-04-05

jquery自动轮播图代码只能出现一张图片第二三张就空白了 轮播正常播放

JS图片轮播