jQuery实现随机图片切换和抽奖(示例代码)

渲染：

源代码：

HTML:

尸体！-小画框-div id=' div 1 ' img id=' xiaoimgid ' src=' http : img/mei 0 . jpg '/div！-start按钮-输入id=' startid '类型=' button '值=' start '！-stop按钮-输入id=' stop id '类型=' button '值=' stop '！-大图片框架-div id=' div 2 ' img id=' daimgid ' src=' http : img/mei 0 . jpg '/div/body CSS:

style div { float: left} #div1{border:2px #0f0f0f固体；宽度： 100 px；高度： 165 px；左边距left: 50px左边距： 100像素；} #div2{border:2px #0f0f0f固体；宽度： 400 px；高度： 650 px；左边距left: 600px} # xiaoImgID { width: 100px高度： 165 px；} # daImgID { width: 400px高度： 650 px；} # startID { width: 100px高度： 80px；font-size : 22px；左边距： 100像素；} # stopID { width: 100px高度： 80px；font-size : 22px；左边距left: 30px} /stylejquery:

脚本var startIDvar指数；$(function () {//2。向按钮添加点击事件$(“# startid”)。click(function(){//用户每次点击启动按钮关闭定时器一次//防止用户多次点击启动按钮导致同时运行多个定时器的bug clearInterval(startID)；//2.1定义一个循环定时器，每30毫秒循环一次。startid=set interval(function(){//2.2生成随机角标0-6楼，向下舍入索引=math。地板(数学。random()* 7)；//2.3设置src属性$ ('# xiaoimgid ')。prop ('src '，' img/mei' index '。小框架的jpg’；},60);});//3.单击停止按钮结束计时器$ ('# stopid ')。单击(function () {//3.1停止计时器clearInterval(startID))；//3.2设置大画幅的src属性。hide()首先从$ ('# daimgid ')中移除大图片框中的图片。prop ('src '，' img/mei' index '。jpg ')。hide()；//$('#daImgID ')。3.3秒后显示fadeIn(1500)；});});/脚本摘要

如上所述，边肖给大家介绍的jQuery实现了随机图片切换和抽奖功能，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！