<!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>
HTML 切换图片上一张或者下一张,并且可以进行定时自动切换
免责声明！
本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。