关闭

电商图片轮播效果

标签: HTML jsjavascript电商图片源码
49人阅读 评论(0) 收藏 举报
分类:

源码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#img_show{
width: 500px;
height: 500px;
border: 1px solid gray;
margin: 10px;

}

#img_show img{
width: 500px;
}

#small_img img{
border: 1px solid gainsboro;
width: 100px;
}

#small_img img:hover{
cursor: pointer;
border: 1px red solid;
}
</style>

<script>

function over(obj){
document.getElementById("img").src = obj.src;
}

</script>

</head>
<body>

<div id="img_show">
<img id="img" src="img/01.jpg" />
</div>

<div id="small_img">
<img src="img/01.jpg" onmouseover="over(this)" />
<img src="img/02.jpg" onmouseover="over(this)"  />
<img src="img/03.jpg" onmouseover="over(this)"  />
<img src="img/04.jpg" onmouseover="over(this)"  />
<img src="img/05.jpg" onmouseover="over(this)"  />
</div>

</body>
</html>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:260次
    • 积分:72
    • 等级:
    • 排名:千里之外
    • 原创:7篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档