使用纯粹的javascript来实现的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动画相册</title>
<!--2.第2步设计页内样式-->
<style>
img{width:320px;height: 460px;}
</style>
<!--3.第3步设计动态的js-->
<script>
var num=0;
function back(){
var img=document.getElementById("img");
num--;
if(num<0)
num=9;
img.src="img/"+num+".jpg";
}
function next(){
var img=document.getElementById("img");
num++;
if(num>9)
num=0;
img.src="img/"+num+".jpg";
}
</script>
</head>
<body>
<!--1.第一步设计页内布局-->
<img src="img/0.jpg" id="img" /><br />
<button οnclick="back()">后退</button>
<button οnclick="next()">前进</button>
</body>
</html>
使用jQuery代码来实现的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
img{display: block;width: 320px;height: 460px;}
</style>
<!--3.使用jQuery版本的格式来实现-->
<script src="js/jquery-1.8.3.min.js"></script>
</head>
<body>
<img src="img/0.jpg" id="img"/>
<button>后退</button>
<button>前进</button>
<script>
/*1.找对象；就是找到我们要操作的对象$("button"):找到一批
*2.定事件；就是找出来对象要响应的事件;click:代替了onclick
*3.匿名函数：就是省略了名称的函数
*/
//alert($("button").html());
//$("button").click(alert('aaa'));
$("button").click(function(){
var num=0;
//alert('bbb');
//alert($("button").html());内容一致;
//alert($(this).text());//$(this):当前按钮
//attr可以设置对象的属性或取值；
if($(this).text()=="后退"){
num--;
if(num<0)num=9;
}else{
num++;
if(num>9)num=0;
}
$("#img").attr("src","img/"+num+".jpg");
//调用该函数
setInterval("autoRun()",1000);
});
/*定时功能加上去
*/
var num=0;
function autoRun(){
num++;
if(num>9)num=0;
$("#img").attr("src","img/"+num+".jpg");
}
</script>
</body>
</html>
动画效果如下：
