效果如下
功能分析
1.每隔1秒換一張圖片
2.鼠標移入停止切換、鼠標離開繼續切換
3.鼠標移入到數字上面的時候,顯示和數字對應的圖片,並且停止切換,被選中的數字,背景顯示橙色
4.鼠標離開數字,從該數字後面繼續顯示
代碼如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<style type="text/css">
div,
img,
ul,
li {
padding: 0px;
margin: 0px;
}
.content {
width: 480px;
height: 300px;
border: 1px solid red;
margin: 100px auto;
}
img {
width: 100%;
height: 100%;
padding-bottom: 10px;
}
ul li {
list-style: none;
float: left;
border: 1px solid orange;
height: 30px;
width: 58px;
text-align: center;
line-height: 30px;
}
</style>
</head>
<body>
<div class="content">
<img src="./img/1.jpg" alt="">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div>
<script type="text/javascript">
var oImg = document.getElementsByTagName('img')[0];
var count = 1;
function changePic(){
count ++;
if (count > 8) {
count = 1;
}
oImg.src = 'img/'+count+ '.jpg';
}
var interID = setInterval(changePic, 1000);
//鼠標移入停止播放
oImg.onmouseover = function(){
clearInterval(interID);
}
//鼠標移出繼續播放
oImg.onmouseout = function(){
//console.log(interID);
clearInterval(interID);
interID = setInterval(changePic, 1000);
}
//鼠標移入到數字上的時候,顯示對應的圖片
var oLi = document.getElementsByTagName('li');
//console.log(oLi.length);
for (var num = 0; num < oLi.length; num++) {
//給每個li標籤增加屬性，保存當前的索引位置
oLi[num].index = num;
//移到到數字上,停止播放
oLi[num].onmouseover = function(){
//停止播放
clearInterval(interID);
this.style.background = 'orange';
count = this.index;
//調用循環播放圖片方法
changePic();
}
//移出時,繼續從停止的地方播放
oLi[num].onmouseout = function(){
clearInterval(interID);
interID = setInterval(changePic, 1000);
this.style.background = 'white';
count = this.index;
changePic();
}
}
</script>
</body>
</html>