html在抽奖图片自动效果图,jQuery实现图片随机切换、抽奖功能(实例代码)

效果图：

源代码：

HTML：

CSS：

div{float: left;}

#div1{border:2px #0f0f0f solid; width: 100px; height: 165px; margin-left: 50px; margin-left: 100px;}

#div2{border:2px #0f0f0f solid; width: 400px; height: 650px; margin-left: 600px;}

#xiaoImgID{ width: 100px; height: 165px;}

#daImgID{width: 400px; height: 650px;}

#startID{width: 100px; height: 80px; font-size: 22px; margin-left: 100px;}

#stopID{width: 100px; height: 80px; font-size: 22px; margin-left: 30px;}

jquery：

var startID;

var index;

$(function () {

// 2.给按钮添加单击事件

$("#startID").click(function () {

// 用户每次点击开始按钮时先关闭一次定时器

// 防止用户多次点击开始按钮造成的同时运行多个定时器的bug

clearInterval(startID);

// 2.1定义一个循环定时器 30毫秒循环一次

startID = setInterval(function () {

// 2.2生成随机角标 0-6 floor向下取整

index = Math.floor(Math.random() * 7);

// 2.3设置小像框的src属性

$("#xiaoImgID").prop("src","img/mei" + index + ".jpg");

},60);

});

// 3.点击停止按钮结束定时器

$("#stopID").click(function () {

// 3.1停止定时器

clearInterval(startID);

// 3.2给大像框设置src属性 .hide()先把大像框里的图片去掉

$("#daImgID").prop("src","img/mei" + index + ".jpg").hide();

// 3.3秒后显示

$("#daImgID").fadeIn(1500);

});

总结

以上所述是小编给大家介绍的jQuery实现图片随机切换、抽奖功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

html在抽奖图片自动效果图,jQuery实现图片随机切换、抽奖功能(实例代码)相关推荐

ecshop图片自动本地化插件,ECSHOP下载商品图片,ECSHOP商品详情远程图片,ecshop商品远程图片保存,ecshop图片自动本地化插件,商品图片本地化
ecshop图片自动本地化插件,ECSHOP下载商品图片,ECSHOP商品详情远程图片,ecshop商品远程图片保存,ecshop图片自动本地化插件,商品图片本地化,图片远程本地化插件,ecshop远 ...
Word图片自动编号，调整图片顺序自动更新图片编号，引用该图片的地方也对应更新
Word图片自动编号,调整图片顺序自动更新图片编号,引用该图片的地方也对应更新 1.软件环境⚙️ 2.问题描述
python资料百度网盘-python自动保存百度盘资源到百度盘中的实例代码
本实例的实现逻辑是,应用selenium UI自动化登录百度盘,读取存储百度分享地址和提取码的txt文档,打开百度盘分享地址,填入提取码,然后保存到指定的目录中全部代码如下: # -*-coding ...
python如何保存源文件_python自动保存百度盘资源到百度盘中的实例代码
本实例的实现逻辑是,应用selenium UI自动化登录百度盘,读取存储百度分享地址和提取码的txt文档,打开百度盘分享地址,填入提取码,然后保存到指定的目录中全部代码如下: # -*-coding ...
ajax数据交互代码,Django中使用jquery的ajax进行数据交互的实例代码
jquery框架中提供了$.ajax.$.get.$.post方法,用于进行异步交互,由于Django中默认使用CSRF约束,推荐使用$.get 示例:实现省市区的选择最终实现效果如图: 将jque ...
php9宫格抽奖程序_PHP实现抽奖功能实例代码
在项目开发中经常会遇到花钱抽奖类型的需求.但是老板总是担心用户用小钱抽到大奖.这样会导致项目亏损.下边这段代码可以有效制止抽奖项目亏钱. 个人奖池: 语言:thinkphp redis mysql 表 ...
php mysql随机抽奖源码_PHP实现抽奖功能实例代码
在项目开发中经常会遇到花钱抽奖类型的需求.但是老板总是担心用户用小钱抽到大奖.这样会导致项目亏损.下边这段代码可以有效制止抽奖项目亏钱. 个人奖池: 语言:thinkphp redis mysql 表 ...
python自动发邮件百度网盘_python自动保存百度盘资源到百度盘中的实例代码
本实例的实现逻辑是,应用selenium UI自动化登录百度盘,读取存储百度分享地址和提取码的txt文档,打开百度盘分享地址,填入提取码,然后保存到指定的目录中全部代码如下: # -*-coding ...
ajax 上传文件实例,jquery ajax实现文件上传功能实例代码
下面看下ajax实现文件上传没有使用插件一.单文件上传文件: 上传文件 $(function () { $("#upload").click(function () { va ...
html图片自动剪裁,jQuery简单且功能强大的图片剪裁插件
cropper是一款使用简单且功能强大的图片剪裁jQuery插件.该图片剪裁插件支持图片放大缩小,支持鼠标滚轮操作,支持图片旋转,支持触摸屏设备,支持canvas,并且支持跨浏览器使用. croppe ...

html在抽奖图片自动效果图,jQuery实现图片随机切换、抽奖功能(实例代码)

html在抽奖图片自动效果图,jQuery实现图片随机切换、抽奖功能(实例代码)相关推荐

最新文章

热门文章