一.图片3s自动切换，鼠标事件触发停止切换。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#span{
color: #008000;
text-align: center;
font-size: 20px;
}
#pic{
margin-left: 120px;
}
</style>
</head>
<body>
<p id="span">每3s切换一次图片,鼠标放上停止切换，离开时继续切换</p><br/>
<img src="img/slide-1.jpg" id="pic"/>
<script type="text/javascript">
var slipeImg = document.getElementById("pic");
var timer = setInterval(slipe,3000);
var count = 1;
slipeImg.addEventListener("mouseover",overSlipe);
slipeImg.addEventListener("mouseout",outSlipe);
function overSlipe(){
clearInterval(timer);
}
function outSlipe(){
timer = setInterval(slipe,3000);
}
function slipe(){
if (count == 4){
count = 1
slipeImg.src="img/slide-" + count + ".jpg";
}else{
count += 1;
slipeImg.src="img/slide-" + count + ".jpg";
}
}
</script>
</body>
</html>
效果：
二、实现上题的功能的前提下，点击小图标可以切换到对应的图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#pic{
margin-left: 450px;
}
#pic_small{
margin-left: 460px;
}
</style>
</head>
<body>
<img src="img/pic1.jpg" id="pic"/>
<div id="pic_small">
<img src="img/thumb-1.jpg" id="small1"/>
<img src="img/thumb-2.jpg" id="small2"/>
<img src="img/thumb-3.jpg" id="small3"/>
</div>
<script type="text/javascript">
var slipeImg = document.getElementById("pic");
var timer = setInterval(slipe,3000);
var count = 1;
slipeImg.addEventListener("mouseover",overSlipe);
slipeImg.addEventListener("mouseout",outSlipe);
var thumbs = document.querySelectorAll("#pic_small>img");
thumbs[0].addEventListener("click",fun1);
thumbs[1].addEventListener("click",fun2);
thumbs[2].addEventListener("click",fun3);
function fun1(){
slipeImg.src="img/pic1.jpg";
}
function fun2(){
slipeImg.src="img/pic2.jpg";
}
function fun3(){
slipeImg.src="img/pic3.jpg";
}
function overSlipe(){
clearInterval(timer);
}
function outSlipe(){
timer = setInterval(slipe,1000);
}
function slipe(){
if (count == 3){
count = 1
slipeImg.src="img/pic" + count + ".jpg";
}else{
count += 1;
slipeImg.src="img/pic" + count + ".jpg";
}
}
</script>
</body>
</html>
效果：
