点击小圆圈切换图片（基础） 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
    <style>

    input{ width: 15px; height: 15px; background-color: #ccc; border-radius: 100%; border-style: none; }
    input:hover{ background-color:#333; }
    img{ width: 200px; height: 300px; }
    </style>
}

<script type="text/javascript">
 window.onload = function(){
   var arrImg = ['img/1.png','img/2.png','img/3.png','img/4.png'],
       aBtn = document.getElementsByTagName('input'),
       oImg = document.getElementById('img');

       oImg.src = arrImg[0]
       for (var i = 0; i < aBtn.length; i++) {
        aBtn[i].index = i; 
           aBtn[i].onclick = function(){
               
            for (var j = 0; j < aBtn.length; j++) {
                aBtn[j].style.backgroundColor = '#ccc'
            }//在点击按钮之前先让所有按钮颜色复原，这样就可以实现点击别的按钮时上一个按钮复原的效果
            oImg.src = arrImg[this.index];
            aBtn[this.index].style.backgroundColor = 'red';
           }
       }
 }
</script>
</head>
<body>
<img id="img" src="">
<input type="button" name="" value="">
<input type="button" name="" value="">
<input type="button" name="" value="">
<input type="button" name="" value="">
</body>
</html>

 

posted @ 2017-11-13 12:11  小毛驴--  阅读(1002)  评论(0)    收藏  举报