电子相册动画版
【摘要】
视频课堂https://edu.csdn.net/course/play/7621
使用纯粹的javascript来实现的代码
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>动画相册</title...
视频课堂https://edu.csdn.net/course/play/7621
使用纯粹的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>
动画效果如下：
文章来源: aaaedu.blog.csdn.net，作者：tea_year，版权归原作者所有，如需转载，请联系作者。
原文链接：aaaedu.blog.csdn.net/article/details/79389544
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）