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实现图片随机切换、抽奖功能(实例代码) 的全部内容, 来源链接: utcz.com/z/336156.html

回到顶部