自动滚动相册小程序_自动滑动相册辅助器。-CSDN博客

本文链接：https://blog.csdn.net/liuhao_yu/article/details/8635307

<html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
*{margin:0;padding:0;border:0}
#main{width:450px;height:400px;background-color:green;margin:auto}
#head{height:350px;background-color:blue}
#head img{width:440px;height:340px;padding-left:5px;padding-top:5px}
#content li{list-style:none;float:left;width:35px;height:30px;border:1px solid orange;text-align:center;line-height:30px;margin-top:8px}
#content ul{width:360px;margin:auto;margin-right:5px;}
</style>
</head>

<body οnlοad="startmove()">
<div id="main">
<div id="head">
<img src="./1.jpg" id="a1"/>
</div>
<div id="content">
<ul>
<li id="q1" οnmοuseοver="stopmouse(1)" οnmοuseοut="startmove(1)">1</li>
<li id="q2" οnmοuseοver="stopmouse(2)" οnmοuseοut="startmove(2)">2</li>
<li id="q3" οnmοuseοver="stopmouse(3)" οnmοuseοut="startmove(3)">3</li>
<li id="q4" οnmοuseοver="stopmouse(4)" οnmοuseοut="startmove(4)">4</li>
<li id="q5" οnmοuseοver="stopmouse(5)" οnmοuseοut="startmove(5)">5</li>
<li id="q6" οnmοuseοver="stopmouse(6)" οnmοuseοut="startmove(6)">6</li>
<li id="q7" οnmοuseοver="stopmouse(7)" οnmοuseοut="startmove(7)">7</li>
<li id="q8" οnmοuseοver="stopmouse(8)" οnmοuseοut="startmove(8)">8</li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
var count = 1;
var interId;
function changePic(){
var img = document.getElementById('a1');
if(count == 9){
count = 1;
}
img.src = count+'.jpg';
for(var i=1;i<=8;i++){
document.getElementById('q'+i).style.backgroundColor = '';
}
document.getElementById('q'+count).style.backgroundColor = 'yellow';
count++;
}
function startmove(){
interId = setInterval("changePic()",1000);
}
function stop(){
clearInterval(interId)
}
function stopmouse(n){
stop();
var img = document.getElementById('a1');
img.src = n+'.jpg';
for(var i=1;i<=8;i++){
document.getElementById('q'+i).style.backgroundColor = '';
}
document.getElementById('q'+n).style.backgroundColor = 'yellow';
count=n;
}
</script>
</html>