需求:将六张图片循环播放。当鼠标移到图片上方,图片暂停。
代码:
HTML:
<!DOCTYPE html>
<html>
<head>
<style>
#pics {
height: 218px;
width: 218px;
border: 3px solid #ddd;
}
.hide {
display: none;
}
.show {
display: inline-block;
}
</style>
<meta charset="utf-8"/>
<title>图片轮播</title>
</head>
<body>
<div id="pics" οnmοuseοver="stop()" οnmοuseοut="change()">
<img src="images/01.jpg" class="show"/> <!--先将图片全部隐藏。-->
<img src="images/02.jpg" class="hide"/>
<img src="images/03.jpg" class="hide"/>
<img src="images/04.jpg" class="hide"/>
<img src="images/05.jpg" class="hide"/>