实现图片轮流切换

最新推荐文章于 2019-04-25 16:53:36 发布

gangdaofeix

最新推荐文章于 2019-04-25 16:53:36 发布

阅读量270

点赞数 1

分类专栏： js编程文章标签： XHTML HTML

本文链接：https://blog.csdn.net/gangdaofeix/article/details/83814155

版权

js编程专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!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" />
<script language="javascript" src="jquery-132-min.js"></script>
<title>无标题文档</title>
<style >
.dangc{ float:left;}
</style>
</head>
<script language="javascript">
$(document).ready(function(){
img1=new Image();img2=new Image(); img3=new Image();
img1.src="1.png";img2.src="2.png";img3.src="3.png";
var i=0;
function qih(){
i=i+1
if (i>3) i=1;
$('.dangc').html('<img src="'+i+'.png" width="468" height="390" border="0" usemap="#Map" />');
}
var timer=setInterval(qih,1000);
})

function slit(ints){
$('.dangc').html('<img src="'+ints+'.png" width="468" height="390" border="0" usemap="#Map" />');
}
</script>
<body>
<div>
<div>
<div class="dangc"><img src="1.png" width="468" height="390" border="0" usemap="#Map" /></div>
<map name="Map" id="Map">
<area shape="rect" coords="151,12,391,97" οnmοusemοve="slit('1')" />
<area shape="rect" coords="376,132,483,347" οnmοusemοve="slit('3')" />
<area shape="rect" coords="45,107,154,320" οnmοusemοve="slit('2')" />
</map>
<img src="right.png" width="532" height="390" />

</div>
</body>
</html>