轮播图

HTML图片轮播实现

最新推荐文章于 2024-12-23 11:36:10 发布

weixin_30699955

最新推荐文章于 2024-12-23 11:36:10 发布

阅读量88

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/qurui1998/p/10492248.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <!--<script>
//            var num=1;
//        setInterval(function(){
//            //console.log(document.getElementById("f_img").src);
//        document.getElementById("f_img").src="http://127.0.0.1:8020/ch04/img/0"+num+".jpg"
//        
//        num++;
//        if(num>3){
//            num=1;
//        }
//            
//            },1000);
//        /*    
            window.onload=function(){
            var num=0 ;    
         setInterval(function(){
             /*alert("hahahah");*/
            //console.log(document.getElementById("f_img").src);
        document.getElementById("f_img").src="http://127.0.0.1:8020/ch04/img/0"+(num++)+".jpg";
        if(num>3){
            num=1;
        }
            
            },1000);
        }
        /* setTimeout(function(){alert("Hello")},1000);    */
        </script>-->
    <body>
        <img id="f_img" src="img/01.jpg"  />
        
    </body>
    <script >
        window.onload=function(){
            var a=1;
             setInterval(function(){
                 document.getElementById("f_img").src="http://127.0.0.1:8020/ch04/img/0"+(a++)+".jpg"
                 /*
                   a++;*/
                 if(a>3){
                     a=1;
                 }
             },500);
        }
    </script>
</html>