圖片切換的小例子

圖片切換的小例子

首先你得分析整個結構應該如何取一步一步的去寫

切換圖片無非兩種狀態 true 或者 false, 所以我們在這裏使用開關 flag 來實現,具體代碼如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/public.js"></script>
<style>
     img{
        width: 400px;
        height: 300px;
        margin: 50px auto;
     }
</style>
</head>
<body>
<img  src="img/5.jpg"  alt="">
<script type="text/javascript">

    var img = one('img');

    var flag = true;

    img.onclick = function(){

        //this 

        //console.log(this.src=='img/5.jpg');

        if(flag){

            this.src = 'img/01.jpg';
            //flag = false;

        }else{

            this.src = 'img/5.jpg';

            //flag = true;

        }

        flag = !flag;

    }

</script>
</body>
</html>

此中的圖片需要讀者自己提供,並改爲相應的路徑即可。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章