定时轮播图案例:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>定时轮播图</title> 
 
</head> 
<body> 
    <!--    1.在页面上使用img标签展示图片--> 
    <img id="img"src="../src/banner_1.jpg"> 
 
    <script> 
        /* 
            分析: 
                1.在页面上使用img标签展示图片 
                2.定义一个方法,修改图片对象的src属性 
                3.定义一个定时器,每隔三秒调用方法一次 
        */ 
 
        //2.定义一个方法,修改图片对象的src属性 
        var number = 1; 
        function fun() { 
            number ++; 
            //判断number是否大于3 
            if(number > 4){ 
                number = 1; 
            } 
            //获取img对象 
            var img = document.getElementById("img"); 
            img.src = "../src/banner_"+ number++ +".jpg" 
        } 
 
        //3.定义一个定时器,每隔三秒调用方法一次 
        setInterval(fun,3000); 
    </script> 
</body> 
</html>

发布评论
IT源码网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

JavaScript>倒计时自动跳转到首页(指定网页)讲解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。