jQuery实现图片随机切换、抽奖功能(实例代码)


Posted in jQuery onOctober 23, 2019

效果图:

jQuery实现图片随机切换、抽奖功能(实例代码)

源代码:

HTML:

<body>
<!-- 小像框 -->
<div id="div1">
  <img id="xiaoImgID" src="img/mei0.jpg">
</div>
<!-- 开始按钮 -->
<input id="startID" type="button" value="开始">
<!-- 停止按钮 -->
<input id="stopID" type="button" value="停止">
<!-- 大像框 -->
<div id="div2">
  <img id="daImgID" src="img/mei0.jpg">
</div>
</body>

CSS:

<style>
    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;}
  </style>

jquery:

<script>
    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);
      });
    });
  </script>

总结

以上所述是小编给大家介绍的jQuery实现图片随机切换、抽奖功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

jQuery 相关文章推荐
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
详解jquery和vue对比
Apr 16 jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
jquery实现拖拽添加元素功能
Dec 01 jQuery
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 #jQuery
jQuery/JS监听input输入框值变化实例
Oct 17 #jQuery
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 #jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 #jQuery
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 #jQuery
jquery 时间戳转日期过程详解
Oct 12 #jQuery
jquery将json转为数据字典的实例代码
Oct 11 #jQuery
You might like
Yii框架上传图片用法总结
2016/03/28 PHP
PHP框架性能测试报告
2016/05/08 PHP
PHP封装的数据库保存session功能类
2016/07/11 PHP
laravel model模型定义实现开启自动管理时间created_at,updated_at
2019/10/17 PHP
js验证表单第二部分
2006/11/25 Javascript
JavaScript获取GridView中用户点击控件的行号,列号
2009/04/14 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
2012/01/04 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
2012/02/03 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
2013/08/19 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
2013/10/17 Javascript
Jquery实现纵向横向菜单
2016/01/24 Javascript
js获取浏览器和屏幕的各种宽度高度
2017/02/22 Javascript
vue指令以及dom操作详解
2017/03/04 Javascript
js实现产品缩略图效果
2017/03/10 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
2017/07/07 Javascript
jQuery插件实现弹性运动完整示例
2018/07/07 jQuery
开发用到的js封装方法(20种)
2018/10/12 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
2019/04/17 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
2019/10/16 Javascript
基于JavaScript实现留言板功能
2020/03/16 Javascript
原生jQuery实现只显示年份下拉框
2020/12/24 jQuery
Python 随机生成中文验证码的实例代码
2013/03/20 Python
深入分析在Python模块顶层运行的代码引起的一个Bug
2014/07/04 Python
轻松实现python搭建微信公众平台
2016/02/16 Python
Python实现公历(阳历)转农历(阴历)的方法示例
2017/08/22 Python
利用python将xml文件解析成html文件的实现方法
2017/12/22 Python
Diango + uwsgi + nginx项目部署的全过程(可外网访问)
2018/04/22 Python
python字典值排序并取出前n个key值的方法
2018/10/17 Python
解决pycharm中导入自己写的.py函数出错问题
2020/02/12 Python
协程Python 中实现多任务耗资源最小的方式
2020/10/19 Python
python链表类中获取元素实例方法
2021/02/23 Python
Bluebella美国官网:英国性感内衣品牌
2018/10/04 全球购物
OnePlus加拿大官网:中国国际化手机品牌
2020/10/13 全球购物
办公室领导干部作风整顿个人整改措施
2014/09/17 职场文书
职代会闭幕词
2015/01/28 职场文书
财务会计个人原因辞职信
2019/06/21 职场文书