<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style>
ul{ margin:0px;padding:0px;width:360px;}
li{ float:left; margin-left:10px; list-style-type:none;width:40px;background-color:#96EDE4;text-align:center;}
img{ width:166px;height:112px;}
#stop{ clear:both;}
</style>
<script src="jquery.js"></script>
</head>
<body>
<div><img src="img/1.gif" id='img1' /></div>
<div><ul><li id='1'>1</li><li id='2'>2</li><li id='3'>3</li></ul></div>
<div id='stop'><input type="button" value="停止自动播放"</div>
<script>
function showImg1(){
$('#img1').attr('src','img/1.gif');
}
function showImg2(){
$('#img1').attr('src','img/2.gif');
}
function showImg3(){
$('#img1').attr('src','img/3.gif');
}
function autoShow(){
setT1 = setTimeout('showImg2()',1000);
setT2 = setTimeout('showImg3()',2000);
setT3 = setTimeout('showImg1()',3000);
}
function clearTimeSet(){
clearTimeout(setT1);
clearTimeout(setT2);
clearTimeout(setT3);
}
var int = setInterval("autoShow()",3000);
$('#stop').click(function(){
clearTimeSet();
int = window.clearInterval(int);
})
$('li').mouseover(function(){
if($(this).attr('id') == '1'){
int = window.clearInterval(int);
clearTimeSet();
showImg1();
}else if($(this).attr('id') == '2'){
int = window.clearInterval(int);
clearTimeSet();
showImg2();
}else if($(this).attr('id') == '3'){
int = window.clearInterval(int);
clearTimeSet();
showImg3();
}
})
$('li').mouseout(function(){
int = setInterval("autoShow()",3000);
})
</script>
</body>
</html>
李汉团 Mar 9,2012