图片切换

最新推荐文章于 2024-09-12 18:02:32 发布

「已注销」

最新推荐文章于 2024-09-12 18:02:32 发布

阅读量592

点赞数

分类专栏： java web 文章标签： function class xhtml go html border

本文链接：https://blog.csdn.net/xingfeng0501/article/details/6365617

版权

java web 专栏收录该内容

6 篇文章 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" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0;}
.show{ display:block;}
.hide{ display:none;}
div{ position:relative; width:360px;}
ul{ right:5px; bottom:5px; position:absolute;}
ul li{ list-style:none;float:left; border:#000000 solid 1px; background:#FFFFFF; margin:0 2px 0 0; padding:1px;}

</style>
</head>

<body>
<script type="text/javascript">
var j = 2;
function go(a){        /*图片切换*/
  var imgs = document.getElementsByTagName("img");
  for(var i = 0;i<imgs.length;i++){
   imgs[i].className = "hide";
  }
  document.getElementById(a).className = "show";
  clearTimeout(time);
}
function auto(){       /*自动播放*/
  go(j);
  j++;
  if(j==5)j=1;
  time = setTimeout("auto()",1000);
}
time = setTimeout("auto()",1000);
function move(){       /*鼠标移出*/
  go(j);
  j++;
  if(j==5)j=1;
  time = setTimeout("auto()",1000);
}
</script>
<div>
<img id="1" class="show" src="1.jpg" />
<img id="2" class="hide" src="2.jpg" />
    <img id="3" class="hide" src="3.jpg" />
    <img id="4" class="hide" src="4.jpg" />
    <ul>
    <li οnmοuseοver="go(1)" οnmοuseοut="move()">1</li>
        <li οnmοuseοver="go(2)" οnmοuseοut="move()">2</li>
        <li οnmοuseοver="go(3)" οnmοuseοut="move()">3</li>
        <li οnmοuseοver="go(4)" οnmοuseοut="move()">4</li>
    </ul>
</div>
</body>
</html>