<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
margin: 10px 100px;
}
img{
height: 20px;
20px;
padding:4px;
background:#e3e3e3;
vertical-align: middle;
}
button:last-of-type{
margin-left: 10px;
}
</style>
</head>
<body>
<div><img src="img/1.jpg" alt=""/><span id="showName">乱了夏天蓝了海</span></div>
<div><button onclick="start()">开始</button><button onclick="stop()">结束</button></div>
</body>
<script type="text/javascript">
var peoples = ["乱了夏天蓝了海","骑驴找马追骆驼","寒殇凌雪","北城以北","花木扶疏","南柯一梦"];
var imgs = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg","img/6.jpg"];
var img = document.getElementsByTagName('img')[0];
var showName = document.getElementById('showName');
img.src = imgs[0];
showName.innerHTML = peoples[0];
var timer;
function start(){
timer = setInterval(begin,100);
}
function begin(){
var ranIndex = Math.floor(Math.random() * peoples.length);
// console.log(ranIndex)
img.src = imgs[ranIndex];
showName.innerHTML = peoples[ranIndex];
}
function stop(){
clearInterval(timer);
}
}
</script>
</html>