使用JS和html5实现图片轮播

共4个文件

jpg：3个

html：1个

HTML5

JavaScript

需积分: 34 35 下载量 49 浏览量 2018-06-13 14:25:00 上传评论收藏 68KB RAR 举报

温馨提示

点击顺序轮播按钮或倒序轮播按钮可实现每秒顺序轮播一张图片或每秒倒序轮播一张图片，点击停止轮播按钮可停止当前轮播形式。不可连续按两次顺序轮播按钮或倒序轮播按钮，但可以按完顺序轮播按钮，再按倒序轮播按钮，反过来亦可。

资源推荐

资源详情

资源评论

收起资源包目录

图片轮播.rar （4个子文件）

图片轮播.html 2KB

img

3.jpg 18KB

1.jpg 28KB

2.jpg 23KB

共 4 条

<!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>

评论收藏

内容反馈