JavaScript写的一个图片的抽奖功能的案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
</head>
<body><!--小图--><div style="background-color:red;border: dotted; height: 50px; width: 50px"><img src="../img/01.jpg" id="smallImg" style="width: 50px; height: 50px;"></div><!--大图--><div id="bigimgdiv" style="border: double ;width: 500px; height: 500px; position: absolute; left: 500px; top:10px"><img id="bigImg" src="#" style="width: 500px; height: 500px"></div><!--开始按钮--><input id="startBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value="开始" onclick="Imgstart()"><input id="stopBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value="停止" onclick="ImgsStop()"></body>
<script>$(function () {$("#bigimgdiv").hide();});var imgs =new Array();//1.准备一个数组for(var i=0;i<13;i++){if (i<9){imgs[i]="../img/0"+(i+1)+".jpg"}else {imgs[i]="../img/"+(i+1)+".jpg"}}//2.准备一个计数器var count = 0;//3.图片总数var total= imgs.length;//4.定时器var timeId = null; //点击停止,清除定时任务.//4.编写一个图片转动的方法function chageImage(){timeId = window.setInterval(function(){count = count%total;  //依靠他循环  0%13 = 0    1%13 = 1  2%13  .... 13%130  14%13=1var img = imgs[count];  //获取第一张图片  第二张图$("#smallImg").prop("src",img).show();count++;},10)}//5.编写一个开始的方法function Imgstart(){chageImage();//设置按钮$("#startBtn").prop("disabled",true);  //开始按钮不能点击$("#stopBtn").prop("disabled",false);  //停止按钮可以点击$("#bigimgdiv").hide();}//6编写一个结束的方法function ImgsStop(){//清除定时任务window.clearInterval(timeId);//设置按钮$("#startBtn").prop("disabled",false);$("#stopBtn").prop("disabled",true);//获取图片路径var img = imgs[--count%total];//给大图上先隐藏$("#bigimgdiv").show(300);$("#bigImg").prop("src",img).hide();$("#bigImg").delay(300).show(300);}
</script>
</html>

JavaScript写的一个图片的抽奖功能的案例相关推荐

[js] 使用js实现一个图片剪裁的功能
[js] 使用js实现一个图片剪裁的功能 /** * 裁切图片* @param imgUrl 原始图片路径* @param x,y,width,height 从点[x, y]开始,将宽度width,高 ...
原生js完成一个简单的抽奖功能
文章目录前言实现过程 1.前期准备 2.CSS美化 3.使用 js 完成抽奖功能 3.1 随机数模块 3.2 随机奖品 3.3 开始抽奖 3.4 点击开始抽奖完整代码 HTML部分 CSS部分 ...
PIL+pyqt 写了一个图片批量无损压缩工具python
前言学习了一段时间python了-但是一直没有好的系统性的练手项目- 刚好最近想整理电脑里老旧的照片, 图片太多大概130G 文件- 本人也是比较怀旧的人.图片不想丢弃-磁盘用了有10年了,以防意 ...
写了一个图片横向滚动且首尾相接的JS组件
当年我也是从网上down组件直接拿来用的小白. 记得三年前去XM面试的时候,明哥问我: "如果你需要一个页面特效,你怎么做?" 我呆萌的回答说:"网上down一个哦!&q ...
python批量裁剪图片_用Python写了一个图片格式批量处理工具
来源:blog.csdn.net/kimol_justdo 前言就在昨天,正当我在刺激战场厮杀时,"叮叮叮",微信来消息了.我心想:"这是肾马情况?" 我打开 ...
Python3，为了给女神暗送秋波，我默默的写了一个图片字符画生成器，真香。
图片字符画制作 1.引言 2.代码实战 2.1 原理 2.2 实例 3.总结 1.引言小屌丝:鱼哥,给你看个照片. 小鱼:什么-照片-首先声明,我可是正经人. 小屌丝:你先看看. 小鱼:就这,有啥好 ...
用JavaScript写的一个摇号程序（随机数）
<script type="text/javascript"></script> 老弟叫我帮忙他找个摇号程序,号码从001-200. 最近刚看了JS高级编程 ...
HTML5 + Javascript 写出一个钢琴
首发:GitHubClub 原文:juejin.im/post/6879708939190009869 学生时代的我们如果有像郎朗一样的琴技,想必追起女生会非常的容易,但在以前,一架钢琴对普通家庭来说 ...
用JavaScript写了一个自动给抖音商家发私信的脚本分享给大家
客户需求是这样的他的douying帐号开通了商品橱窗,然后里面有一个选品广场,搜索关键词,找到相应的店铺,进入想要的店铺给店主发招商合作信息,功能就是这么简单. 特别需求:发过的店铺不能再发,只发新 ...

JavaScript写的一个图片的抽奖功能的案例

JavaScript写的一个图片的抽奖功能的案例相关推荐

最新文章

热门文章