京东商品展示升级 需求：点击下面的小图片 让上面的大图片显示相应的大图
<style> * { margin: 0; padding: 0; } ul { list-style: none; } #box { width: 360px; border: 1px solid #ccc; margin: 100px auto; overflow: hidden; } #box img { vertical-align: middle; } #box ul { overflow: hidden; border-top: 1px solid #ccc; } #box li { float: left; } </style> </head> <body> <div id="box"> <img src="images/01big.jpg" id="bigImg" alt=""/> <ul id="itemList"> <li><img src="images/01.jpg" ;" alt="1"/></li> <li><img src="images/02.jpg" ;" alt="2"/></li> <li><img src="images/03.jpg" ;" alt="3"/></li> <li><img src="images/04.jpg" ;" alt="4"/></li> <li><img src="images/05.jpg" ;" alt="5"/></li> </ul> </div> <script> //业务需求：点击下面的小图片 让上面的大图片显示相应的大图 //只需批量获取页面上ul中的img var ul=document.getElementById('itemList'); var imgs=ul.document.getElementsByTagName('img');//获取到ul中的所有小图片 //要给所有小图片绑定事件，遍历每一个小图片 for (var i = 0; i < imgs.length; i++) { var img=imgs[i];//每一个小图片。 //绑定事件 事件源.事件=function(){事件处理程序}； img.onclick=function(){ // changePic(i+1);此处不能写i+1.因为i在事件触发执行前已经为5，事件被触发时，i仍然时5。 //思路：给alt添加属性值并获取。 // console.log(img.alt);此处也不能时img的alt。第一次进来i=0，是往索引号为0的图片上绑定一个事件。 //索引号为4的小图片的alt。 //console.log(this);//永远指向当前对象。 changePic(this.alt); } } function changePic(imgName) { var bigImg = document.getElementById("bigImg"); bigImg.src = "images/0" + imgName + "big.jpg"; } </script> </body> </html>代码优化： //给下面所有的小图片注册事件，点击小图片让上面的大图片的src变为和小图对应的大图
<script> //给下面所有的小图片注册事件，点击小图片让上面的大图片的src变为和小图对应的大图 var ul=document.getElementById('itemList'); var imgs=ul.document.getElementsByTagName('img');//所有小图片 for (var i = 0; i < imgs.length; i++) { var img=imgs[i];//每一个小图片。 img.onclick=function(){ //获取大图 设置大图的src var bigImg=document.getElementById('bigImg'); bigImg.src="images/0"+this.alt+"big.jpg"; } </script>