京东商品展示升级
需求:点击下面的小图片 让上面的大图片显示相应的大图
<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>