有一组图片，点击每张图的时候都有切换的效果(自定义属性)

在下面的实例中我们将在3张图片中，对每一张图片添加自定义属性，在点击当前图片的同时，会不断的切换图片的路径，我们通过图片的自定义属性获取自身自定义属性的递增来匹配数组中的图片。

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>用自定义属性获取自身递增数字及匹配图片</title>
    <style type="text/css">
        img{
            width:20%;
        }
    </style>
</head>
<body>
<img src="../images/5.jpg" alt="#">
<img src="../images/1.jpg" alt="#">
<img src="../images/4.jpg" alt="#">
<script type="text/javascript">
    var arrImg = ['../images/01.jpg','../images/1.jpg',
        '../images/02.jpg','../images/2.jpg','../images/03.jpg',
        '../images/3.jpg','../images/04.jpg','../images/4.jpg',
        '../images/05.jpg','../images/5.jpg'];
    var aImg = document.getElementsByTagName("img");
    for(var i=0;i<aImg.length;i++){
        aImg[i].num = 1;
        aImg[i].onclick = function(){
            this.src = arrImg[this.num];
            this.num++;
            if(this.num === arrImg.length){
                this.num = 0;
            }
        }
    }
</script>
</body>
</html>

 

posted on 2016-06-05 15:41  冬刻忆  阅读(147)  评论(0)    收藏  举报