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 () {// 用户每次点击开始按钮时先关闭一次定时器// 防止用户多次点击开始按钮造成的同时运行多个定时器的bugclearInterval(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实现图片随机切换、抽奖功能相关推荐

微信转发抽奖+php,jQuery+PHP实现微信转盘抽奖功能的方法
本文实例讲述了jQuery+PHP实现微信转盘抽奖功能的方法.分享给大家供大家参考,具体如下: 本文结合实例将使用jQuery和PHP来实现转盘抽奖程序. 准备工作首先要准备素材,抽奖的界面用到两张 ...
PHP做大转盘抽奖的思路,jQuery+PHP实现微信转盘抽奖功能的方法
本文实例讲述了jQuery+PHP实现微信转盘抽奖功能的方法.分享给大家供大家参考,具体如下: 本文结合实例将使用jQuery和PHP来实现转盘抽奖程序. 准备工作首先要准备素材,抽奖的界面用到两张 ...
html怎么用小小的图片铺满作为背景,多种背景图片随机切换的应用
在皮肤『QQ Style』中我使用了随机背景切换功能,这个随机背景切换是一个独立的功能,上面使用的只是其中一小部分应用.下面我将演示背景随机切换的更多应用,然后大家就可以有更多的拓展. 第一:背景图片 ...
简洁风个人主页（3） js背景图片随机切换
静态页面做完了,现在用js做一个背景图片随机切换的效果. 1.点击'个人网站'这个字样,实现body背景的切换.所以,首先获取这两个节点. var body = document.body; var ...
开始暂停按钮实现图片随机切换并显示在指定图像框内
目的点击开始按钮图片在框图区域1中随机滚动点击停止按钮图片停止滚动并且展示在大框图区域2中页面标签代码功能实现 1:点击开始按钮的响应函数 3是定义的循环定时器定时时间为20ms,其执行 ...
html图片左右转换,jquery实现图片左右切换的方法
/p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 图片左右滚动 $(function(){ ...
jq 中英文切换_怎样用jquery/js 实现中英文切换的功能?
中英切换中文英文早上好 // 中文 var zh_word = { index: { //页面这里只是为了比较容易分组 ,也可以再细化分组 nav: "导航", top: ...
js实现点击按钮图片自动切换_☆往事随風☆的博客
文章目录前言一.基本思路二.代码分析 1.创建数组保存图片的存储路径 2.获取按钮对象 3.调用定时器 4.关闭定时器三.整体代码四.效果展示前言利用js实现一个图片自动切换的功能. 一 ...
jq加css制作图片切换,jQuery+css实现的切换图片功能代码
本文实例讲述了jQuery+css实现的切换图片功能代码.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: demo body { margin:0; padding:0; } . ...

jquery实现图片随机切换、抽奖功能

jquery实现图片随机切换、抽奖功能

jquery实现图片随机切换、抽奖功能相关推荐

最新文章

热门文章