一、定时器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定时器</title>
<script src="js/jquery.min.js" ></script>
<script type="text/javascript">
//单次定时器
//setTimeout(执行功能,多少毫秒之后)
// setTimeout(function(){
// $("#content").text("setTimeout定时器设置的内容");
// },3000);
//循环定时器：每隔多少毫秒执行这段代码
//setInterval(执行功能,每隔多少毫秒)
setInterval(function(){
$("#content").append("setInterval定时器设置的内容!");
},1000);
</script>
</head>
<body>
<div id="content">
</div>
</body>
</html>
1.相对定位:relative
-
不会变成行内块元素
-
相对自身原本的位置进行定位
- 参考自身原本的位置，原来的位置仍然占用文档流
- 对兄弟元素的绝对定位不起作用
2.绝对定位:absolute
-
位置会参考相对定位（有多个相对定位的话就参考最近的父元素的相对定位）
-
变成行内块元素
-
绝对定位absolute:脱离文档流,自身变为行内块，需要相对定位
3.固定定位:fixed
-
位置参考浏览器，会变成行内块元素
-
固定定位会脱离文档流，下面的相对定位会看不到他，会压住固定定位所在的区域
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>轮播图</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } #content{ width: 500px; height: 350px; margin: 10px auto; position: relative;/*相对定位*/ } #content img{ width: 100%; height: 100%; } #before{ display: block; width: 100px; height: 35px; position: absolute;/*绝对定位*/ left: 20px; top: 150px } #after{ display: block; width: 100px; height: 35px; position: absolute; right: 20px; top: 150px; } </style> <script src="js/jquery.min.js"></script> <script> $(function(){ //1.使用数组存储图片的地址，使用索引循环取出地址 // var pic=["img/case1.jpg","img/case2.jpg","img/case3.jpg", // "img/case4.jpg","img/case5.jpg","img/case6.jpg"]; // var n=0; // setInterval(function(){ // n++; // //如果大于5，重新从第0个开始 // if(n>5){ // n=0; // } // //从数组中取出地址，设置图片的链接 // $("#content img").attr("src",pic[n]); // },1000); //2.每隔多少毫秒直接修改图片的地址编号 var n=1; setInterval(function(){ n++; if(n>6){ n=1; } $("#content img").attr("src","img/case"+n+".jpg"); },5000); //点击播放上一页 $("#before").click(function(){ //1.首先需要知道当前播放的是哪一张图片的地址 找到编号 3 让3-1 就是上一张 var src=$("#content img").attr("src"); //2.查找地址字符串中最后的.jpg的位置索引 img/case1.jpg var index=src.lastIndexOf(".jpg"); //3.使用.jpg的索引-1 就是图片编号的索引位置，根据索引拿到数字编号字符，再转换成整数 var num=parseInt(src.charAt(index-1)); var n if(num==1){ n=6; //如果第一张，显示第6张 }else{ n=num-1; //如果不是第一张，显示第-1张 } //4.让数字编号-1 重新设置图片的地址，就是上一张的操作 $("#content img").attr("src","img/case"+(n)+".jpg") }); //点击播放下一页 $("#after").click(function(){ //1.首先需要知道当前播放的是哪一张图片的地址 找到编号 3 让3+1 就是下一张 var src=$("#content img").attr("src"); //2.查找地址字符串中最后的.jpg的位置索引 img/case1.jpg var index=src.lastIndexOf(".jpg"); //3.使用.jpg的索引-1 就是图片编号的索引位置，根据索引拿到数字编号字符，再转换成整数 var num=parseInt(src.charAt(index-1)); var n if(num==6){ n=1; }else{ n=num+1; } //4.让数字编号-1 重新设置图片的地址，就是上一张的操作 $("#content img").attr("src","img/case"+(n)+".jpg") }); }); </script> </head> <body> <div id="content"> <img src="img/case1.jpg" /> <button id="before">上一页</button> <button id="after">下一页</button> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>点名</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } #content{ width: 180px; height: 120px; line-height: 120px; text-align: center; color: green; font-size: 24px; border: 5px darkcyan dotted; margin: 10px auto; } #big{ clear: both; width: 800px; height: 550px; line-height: 550px; text-align: center; color: orangered; font-size: 80px; font-weight: bold; margin: 10px auto; border: 5px darksalmon double; } #ctrl{ width: 300px; overflow: hidden; margin: 10px auto; } #start{ display: block; width: 120px; height: 50px; float: left; border: none; background-color: green; font-size: 18px; color: white; } #stop{ display: block; width: 120px; height: 50px; float: right; border: none; background-color: chocolate; font-size: 18px; color: white; } </style> <script src="js/jquery.min.js"></script> <script> $(function(){ //定义人员名单 var names=[ "叶枫","饶政","郭汶广","王志刚","时力强","柴浩阳","王宁","雷坤恒", "贠耀强","齐东豪","袁文涛","孙啸聪","李文彬","孙赛欧","曾毅","付临", "王文龙","朱海尧","史艳红","赵冉冉","詹梦","苏真娇","张涛","王浩", "刘发光","王愉茜","牛怡衡","臧照生","梁晓声","孔顺达","田野","宫帅龙", "高亭","张卓","陈盼盼","杨延欣","李蒙惠","瞿新成","王婧源","刘建豪", "彭习峰","胡凯","张武超","李炳杰","刘传","焦泽国" ]; //定义定时器 var interval; //点击开始，随机从数组中取出一个元素，显示在div中 $("#start").click(function(){ //让开始按钮不可用，让结束按钮可用 $(this).prop("disabled",true); $("#stop").prop("disabled",false); //使用定时器，随机生成数组索引，获取数组元素，更新div内容 interval=setInterval(function(){ //随机一个数组索引 var n = Math.floor(Math.random()*names.length); $("#content").text(names[n]); },200); }); //点击停止，让定时器结束执行 $("#stop").click(function(){ //让结束按钮不可用，让开始按钮可用 $(this).prop("disabled",true); $("#start").prop("disabled",false); //让定时器停止 clearInterval(interval); //停止之后把滚动条区域的文本内容，显示到大屏区域 var name = $("#content").text(); $("#big").text(name).hide(); $("#big").slideDown(3000); }); }); </script> </head> <body> <div id="content"> 准备好了吗？ </div> <div id="ctrl"> <button id="start">开始</button> <button id="stop" disabled=true>结束</button> </div> <div id="big"> 敬请期待 </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>抽奖案例</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } #content{ width: 180px; height: 120px; border: 5px darkcyan dotted; margin: 10px auto; } #content img{ width: 180px; height: 120px; } #big{ clear: both; width: 800px; height: 550px; margin: 10px auto; border: 5px darksalmon double; } #big img{ width: 100%; height: 100%; } #ctrl{ width: 300px; overflow: hidden; margin: 10px auto; } #start{ display: block; width: 120px; height: 50px; float: left; border: none; background-color: green; font-size: 18px; color: white; } #stop{ display: block; width: 120px; height: 50px; float: right; border: none; background-color: chocolate; font-size: 18px; color: white; } </style> <script src="js/jquery.min.js"></script> <script> $(function(){ //定义图片地址 var pic=["img/man00.jpg","img/man01.jpg","img/man02.jpg","img/man03.jpg", "img/man04.jpg","img/man05.jpg","img/man06.jpg"] //定义定时器 var interval; //开始按钮 $("#start").click(function(){ //让开始按钮不可用，让结束按钮可用 $(this).attr("disabled",true); $("#stop").attr("disabled",false); //使用定时器 interval = setInterval(function(){ //随机获取图片索引显示 var n = Math.floor(Math.random()*pic.length); $("#content img").attr("src",pic[n]); },200); }); //结束按钮 $("#stop").click(function(){ //让结束按钮不可用 $(this).attr("disabled",true); //让开始按钮可用 $("#start").attr("disabled",false); //把定时器关闭 clearInterval(interval); //停止的时候把大图片的地址也进行替换，替换成当前停止的时候的小图片的地址 var src = $("#content img").attr("src"); $("#big img").attr("src",src).hide(); $("#big img").show(1000); }); }); </script> </head> <body> <div id="content"> <img src="img/man00.jpg" /> </div> <div id="ctrl"> <button id="start">开始</button> <button id="stop" disabled=true>结束</button> </div> <div id="big"> <img src="img/man00.jpg" /> </div> </body> </html>
403
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
