<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
div{
width:300px;
height:300px;
margin:0px auto;
text-align:center;
}
</style>
</head>
<body>
<div>
<img id="pic" src="img/1.jpg" alt="卡通图片"/>
<br>
<button id="last">倒序轮播</button> <button id="next">顺序轮播</button>
<button id="stop">停止轮播</button>
</div>
<script type="text/javascript">
var n=0,flag1=false,flag2=false;
var t1,t2;
var arrayObject=["img/1.jpg","img/2.jpg","img/3.jpg"];
function lastPic(){
var e1=document.getElementById("pic");
n--;
if(n<0){
n=2;}
e1.src=arrayObject[n];
}
function nextPic(){
var e=document.getElementById("pic");
n++;
if(n>2){
n=0;}
e.src=arrayObject[n];
}
function lunBo1(){
if(flag2==false){
t1=window.setInterval("nextPic()",1000);//顺序
flag1=true;
}
else{
clearInterval(t2);
t1=window.setInterval("nextPic()",1000);//顺序
flag1=true;
flag2=false;
}
}
function lunBo2(){
if(flag1==false){
t2=window.setInterval("lastPic()",1000);//倒序
flag2=true;
}
else{
clearInterval(t1);
t2=window.setInterval("lastPic()",1000);//倒序
flag2=true;
flag1=false;
}
}
function Stop(){
clearInterval(t1);
clearInterval(t2);
}
var btnE2=document.getElementById("next");
var btnE1=document.getElementById("last");
var btnE3=document.getElementById("stop");
btnE2.addEventListener("click",lunBo1,false);
btnE3.addEventListener("click",Stop,false);
btnE1.addEventListener("click",lunBo2,false);
</script>
</body>
</html>
没有合适的资源?快使用搜索试试~ 我知道了~
使用JS和html5实现图片轮播
共4个文件
jpg:3个
html:1个
需积分: 34 35 下载量 96 浏览量
2018-06-13
06:25:00
上传
评论
收藏 68KB RAR 举报
温馨提示
点击顺序轮播按钮或倒序轮播按钮可实现每秒顺序轮播一张图片或每秒倒序轮播一张图片,点击停止轮播按钮可停止当前轮播形式。不可连续按两次顺序轮播按钮或倒序轮播按钮,但可以按完顺序轮播按钮,再按倒序轮播按钮,反过来亦可。
资源推荐
资源详情
资源评论
收起资源包目录
图片轮播.rar (4个子文件)
图片轮播.html 2KB
img
3.jpg 18KB
1.jpg 28KB
2.jpg 23KB
共 4 条
- 1
资源评论
- #完美解决问题
- #运行顺畅
- #内容详尽
- #全网独家
- #注释完整
qq_39131382
- 粉丝: 1
- 资源: 7
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 地面无线电台(站)设置使用申请表.xlsx
- 档案材料归档移交目录表.docx
- 辅导员工作考核汇总表.docx
- 辅导员工作考核上报表.docx
- 辅导员工作考核登记表、辅导员工作量化考核表.docx
- 高中阶段(水平五)体育寒假作业建议表.docx
- 各年龄段骨密度参考值表.docx
- 工贸小微企业公示牌内容填写示范.docx
- 公寓管理服务中心研究生入住申请表.doc
- 管理工程系学生周五和周六晚不住校申请表.doc
- 国内公务接待清单.doc
- 技能学分项目和分值表.docx
- 教师学生听课记录.doc
- 快速随机Hough变换应用于多圆检测的研究与实现
- 普通高等学校毕业就业证明函.doc
- 省直住房货币化补贴提取申请表.xls
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功