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+css实现的切换图片功能代码，包括了jQuery+css实现的切换图片功能代码的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery+css实现的切换图片功能代码。分享给大家供大家参考，具体如下： 运行效果截图如下： 具体代码如下： 更多关于jQuery特效相关内容感兴趣的读者可查看本站专题：《jQuery常见经典特效汇总》及《jQuery动画与特效用法总
-
本文向大家介绍js实现随机抽奖，包括了js实现随机抽奖的使用技巧和注意事项，需要的朋友参考一下 前言 在前端的开发当中，我们肯定会遇到随机抽奖的需求。我们要怎么去实现呢？下面就来分享随机抽奖的JS代码，有需要的小伙伴可以复制到编译器当中运行查看效果。 随机抽奖的JS代码 小编还为大家准备了精彩的专题：javascript经典小游戏汇总 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多
-
本文向大家介绍Android实现图片自动切换功能(实例代码详解)，包括了Android实现图片自动切换功能(实例代码详解)的使用技巧和注意事项，需要的朋友参考一下 在Android中图片的自动切换不仅可以实现自动切换，而且还可以使用手动切换。而且一般在切换的时候，在图片下方还带有其他内容的切换，用来标记是第几个图片的切换。 这种效果在我们日常生活中很常见，例如某宝购物，一些商城都可以使用到，用户体
-
效果如图： 引用flighty.nsi的内容： Name "www.flighty.cn" OutFile "flighty.exe" !include MUI.nsh !ifndef LR_LOADTRANSPARENT !define LR_LOADTRANSPARENT 0x0020 !endif !
-
本文向大家介绍JS实现转动随机数抽奖特效代码，包括了JS实现转动随机数抽奖特效代码的使用技巧和注意事项，需要的朋友参考一下 大家都玩过抽奖游戏，或者梦想抽到大奖吧，但是有没有想过抽奖游戏是怎么实现的呐？今天就给大家分享一款转动随机数抽奖的JS特效代码。 实现代码如下 实现的效果图： 现在抽奖游戏应用的非常广泛，我们每个人都会接触到，尤其是节假日的时候各大商场都会组织这种类型的游戏活动吸引顾客，我上
-
本文向大家介绍Android实现抽奖转盘实例代码，包括了Android实现抽奖转盘实例代码的使用技巧和注意事项，需要的朋友参考一下 本文详述了android抽奖程序的实现方法，程序为一个抽奖大转盘代码，里面定义了很多图形方法和动画。 实现主要功能的SlyderView.java源代码如下：