簡單的輪播圖(Java Script)


使用JS制作簡單的輪播圖

  • 利用了setInterval的滾動性,也可以用while+setTimeout替代。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Java Script Test Place</title>
</head>
<body>
    <img id="img" src="WEB-INF/images/one.jpg" width="100%">

    <script>
        var img=document.getElementById("img");
        var cnt=0;
        setInterval(fun, 2*1000);

        function fun(){
            switch (cnt) {
                case 0:
                    img.src="WEB-INF/images/one.jpg";
                    cnt=(cnt+1)%3;
                    break;
                case 1:
                    img.src="WEB-INF/images/two.jpg";
                    cnt=(cnt+1)%3;
                    break;
                case 2:
                    img.src="WEB-INF/images/three.jpg";
                    cnt=(cnt+1)%3;
                    break;
                default:
                    document.write("<h1>Wrong...</h1>");
                    break;
            }
        }
    </script>
</body>
</html>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM