html点击按钮切换图片,并自动定时轮换

来源：互联网发布：淘宝金牌客服培训编辑：程序博客网时间：2024/05/22 03:15

<!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>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<style>
#hello {
   width: 108px;
   height: 108px;
   border: 1px solid #369;
   overflow: hidden;
   margin: auto;
}
</style>
<div id="hello"><img src="http://i1.baidu.com/it/u=2390401277,3891827753&fm=203"><img src="http://i1.baidu.com/it/u=3713675608,2219355047&fm=203"><img src="http://i2.baidu.com/it/u=695011303,1300693603&fm=203"></div>
<center>
<div>
    <input type="button" value="上一张" onclick="a()";>
    <input type="button" value="下一张" onclick="b()";>
</div>
</center>
<script>

var t;

   function a(){

       clearInterval(t);
       t=setInterval('b()',3000);

       $('#hello').find('img').eq(0).appendTo($('#hello'));
   }
   function b(){

       clearInterval(t);
       t=setInterval('b()',3000);

       $('#hello').find('img:last').eq(0).prependTo($('#hello'));
   }

   t=setInterval('b()',3000);



</script>
</head>
<body>
</body>
</html>

阅读全文

0 0