<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns=""> <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