JS淘宝浏览商品

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>相册</title>

<style>

margin:0;

padding:0;

}

ul{

list-style: none;

overflow: hidden;

}

ul li{

float: left;

width: 55px;

height: 40px;

margin-top: 10px;

margin-left: 10px;

border: 2px solid #fff;

}

ul li.active{

border-color: red;

}

</style>

</head>

<body>

<img src="img/1.jpeg" id="img">

<ul>

<li>

<a href="">

<img src="img/1.jpeg" width="55px" height="40px" class="small">

</a>

</li>

<li>

<a href="">

<img src="img/2.jpeg" width="55px" height="40px" class="small">

</a>

</li>

<li>

<a href="">

<img src="img/3.jpeg" width="55px" height="40px" class="small">

</a>

</li>

<li>

<a href="">

<img src="img/4.jpeg" width="55px" height="40px" class="small">

</a>

</li>

</ul>

<script>

var big=document.getElementById('img');

var small=document.getElementsByClassName('small');

for(var i=0;i<small.length;i++)

{

small[i].onmouseover=function()

{

for(var j=0;j<small.length;j++)

{

small[j].parentNode.parentNode.setAttribute('class','');

}

var smalls=this.getAttribute('src');

big.setAttribute('src',smalls);

this.parentNode.parentNode.setAttribute('class','active');

}

</script>

</body>

</html>

巴特西

JS淘宝浏览商品

最新文章

热门文章