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 EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
详解JQuery基础动画操作
Apr 12 jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
jQuery带控制按钮轮播图插件
Jul 31 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
PHP 加密/解密函数 dencrypt(动态密文,带压缩功能,支持中文)
2009/01/30 PHP
php中解析带中文字符的url函数分享
2015/01/20 PHP
php 利用socket发送HTTP请求(GET,POST)
2015/08/24 PHP
PHP实现可精确验证身份证号码的工具类示例
2018/05/31 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
javascript静态的url如何传递
2007/05/03 Javascript
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
jquery+css+ul模拟列表菜单具体实现思路
2013/04/15 Javascript
遍历DOM对象内的元素属性示例代码
2014/02/08 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
2016/01/18 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
2016/09/01 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
2016/11/21 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
2016/12/16 Javascript
javascript基本数据类型和转换
2017/03/17 Javascript
微信小程序 flex实现导航实例详解
2017/04/26 Javascript
JS查找数组中重复元素的方法详解
2017/06/14 Javascript
JavaScript实现三级联动菜单实例代码
2017/06/26 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
2018/01/25 Javascript
vue里面父组件修改子组件样式的方法
2018/02/03 Javascript
深入浅析Vue中的slots/scoped slots
2018/04/03 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
2020/08/05 Javascript
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
[03:45]Newbee战队出征西雅图 决战2016国际邀请赛
2016/08/02 DOTA
Python中的类与对象之描述符详解
2015/03/27 Python
Python编程实现删除VC临时文件及Debug目录的方法
2017/03/22 Python
在pycharm 中添加运行参数的操作方法
2019/01/19 Python
python多继承(钻石继承)问题和解决方法简单示例
2019/10/21 Python
.NET remoting的两种通道是什么
2016/05/31 面试题
经典的班主任推荐信
2013/10/28 职场文书
工程测量与监理专业应届生求职信
2013/11/27 职场文书
施工安全生产承诺书
2014/05/23 职场文书
家庭贫困证明书(3篇)
2014/09/15 职场文书
2015元旦晚会主持人开场白+结束语
2014/12/14 职场文书
借条格式范本
2015/05/25 职场文书
Java输出Hello World完美过程解析
2021/06/13 Java/Android