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

﹏ヽ暗。殇╰゛Y 2022-10-06 03:57 238阅读 0赞

效果图：

![6fd82368231662cde47321f948add457.gif][]

源代码：

HTML：

![mei0.jpg][]

![mei0.jpg][]

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实现图片随机切换、抽奖功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

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

[6fd82368231662cde47321f948add457.gif]: /images/20221005/5521149ac42e4d40b1874b7c27b76137.png
[mei0.jpg]:

发表评论取消回复

表情：

评论列表（有 0 条评论，238人围观）

还没有评论，来说两句吧...

相关阅读

相关【JavaWeb】JQuery实现抽奖的动画效果功能

这篇博客，教你怎么用JQuery框架实现抽奖送老婆功能哈哈哈！开个玩笑，就是简单的抽奖功能代码如下： <!DOCTYPE html>

╰+攻爆jí腚メ/ 2023年03月02日 05:25/ 0 赞/ 18 阅读

相关 php如何实现抽奖功能,PHP实现概率抽奖功能

php代码如下<?php header("Content-type: text/html; charset=utf-8"); $jiangpin = array( arr

清疚/ 2023年01月17日 15:55/ 0 赞/ 248 阅读

相关 jquery抽奖功能开发

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

╰+攻爆jí腚メ/ 2023年01月01日 05:47/ 0 赞/ 194 阅读

相关 html随机抽奖程序

html随机抽奖程序 <!doctype html> <html> <head> <meta charset="utf-8"> <

小灰灰/ 2022年11月19日 04:28/ 0 赞/ 351 阅读

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

效果图： ![6fd82368231662cde47321f948add457.gif][] 源代码： HTML： ![mei0.jpg][] ![mei0.jpg]

﹏ヽ暗。殇╰゛Y/ 2022年10月06日 03:57/ 0 赞/ 239 阅读

相关 html简单随机抽奖页面（在线抽奖、随机选取、自动挑选）

> `下载：` [https://download.csdn.net/download/weixin\_44893902/20366745][https_download.cs

比眉伴天荒/ 2022年08月30日 05:30/ 0 赞/ 609 阅读

相关 JQuery实现图片切换（自动切换+手动切换）

学习JS的时候本来积攒了很多有趣的小例子，但是苦于没有找到一些好的平台来展示这些JS效果。今天发现了RunJS这个分享代码的平台，迫不及待

ゝ一纸荒年。/ 2022年08月06日 14:15/ 0 赞/ 310 阅读

相关 html+css+js实现抽奖功能

html+css+js实现抽奖功能一、代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-

「爱情、让人受尽委屈。」/ 2022年06月06日 08:15/ 0 赞/ 288 阅读

相关 JS实现抽奖效果

这种效果很常见，所以对我们前段开发者来说是基本功，必须掌握．页面布局： ![70][] 实现思路如图：(一条流水线的思路) ![70 1][] 代码也很简单啦Ｈ

水深无声/ 2022年05月17日 01:15/ 0 赞/ 341 阅读

相关 js随机抽奖

随机抽奖 <p>张三</p> <button>点击停止</button> var arr = ['张三','李四','老王','王五','周

今天药忘吃喽~/ 2022年01月28日 00:29/ 0 赞/ 273 阅读