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插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
简述jQuery Easyui一些用法
Aug 01 jQuery
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
jquery实现轮播图特效
Apr 12 jQuery
jquery检测上传文件大小示例
Apr 26 jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
jQuery实现评论模块
Aug 19 jQuery
jQuery实现图片切换效果
Oct 19 jQuery
jQuery实现本地存储
Dec 22 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
获取用户Ip地址通用方法与常见安全隐患(HTTP_X_FORWARDED_FOR)
2013/06/01 PHP
用php守护另一个php进程的例子
2015/02/13 PHP
Yii2中添加全局函数的方法分析
2017/05/04 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2010/05/18 Javascript
JQuery UI的拖拽功能实现方法小结
2012/03/14 Javascript
jQuery extend 的简单实例
2013/09/18 Javascript
jQuery中$.fn的用法示例介绍
2013/11/05 Javascript
javascript生成json数据简单示例分享
2014/02/14 Javascript
JavaScript函数获取事件源的小例子
2014/05/14 Javascript
JavaScript AOP编程实例
2015/06/16 Javascript
Bootstrap每天必学之附加导航(Affix)插件
2016/04/25 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
web 屏蔽BackSpace键实例代码
2016/12/24 Javascript
原生js实现焦点轮播图效果
2017/01/12 Javascript
vue 挂载路由到头部导航的方法
2017/11/13 Javascript
Angular移动端页面input无法输入的解决方法
2017/11/14 Javascript
JavaScript设计模式之调停者模式实例详解
2018/02/03 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
2018/05/03 Javascript
解决vue.js 数据渲染成功仍报错的问题
2018/08/25 Javascript
vue router 组件的高级应用实例代码
2019/04/08 Javascript
Vue 实现从文件中获取文本信息的方法详解
2019/10/16 Javascript
vue Tab切换以及缓存页面处理的几种方式
2019/11/05 Javascript
js实现简单图片拖拽效果
2021/02/22 Javascript
[01:59][TI9趣味视频] 全明星赛奖励
2019/08/23 DOTA
Python转码问题的解决方法
2008/10/07 Python
在Python中使用Neo4j数据库的教程
2015/04/16 Python
Python自定义主从分布式架构实例分析
2016/09/19 Python
对Python 文件夹遍历和文件查找的实例讲解
2018/04/26 Python
Python sys模块常用方法解析
2020/02/20 Python
AmazeUI框架搭建的方法步骤(图文)
2020/08/17 HTML / CSS
施工材料员岗位职责
2014/02/12 职场文书
领导莅临指导欢迎词
2015/09/30 职场文书
小学生作文写作技巧100例,非常实用!
2019/07/08 职场文书
vue如何实现关闭对话框后刷新列表
2022/04/08 Vue.js