使用jquery完成抽獎圖片滾動的效果

本文轉載自查看原文 2019-09-15 22:44 487

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>jquery案例之抽獎</title>
 <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
</head>
<body>

<!-- 小像框 -->
<div style="border-style:dotted;width:160px;height:100px">
 <img id="img1ID" src="../img/man00.jpg" style="width:160px;height:100px"/>
</div>

<!-- 大像框 -->
<div
 style="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px">
 <img id="img2ID" src="../img/man00.jpg" width="800px" height="500px"/>
</div>

<!-- 開始按鈕 -->
<input
 id="startID"
 type="button"
 value="點擊開始"
 style="width:150px;height:150px;font-size:22px"
 onclick="imgStart()">

<!-- 停止按鈕 -->
<input
 id="stopID"
 type="button"
 value="點擊停止"
 style="width:150px;height:150px;font-size:22px"
 onclick="imgStop()">


<script language='javascript' type='text/javascript'>
 //准備一個一維數組，裝用戶的像片路徑
 var imgs = [
 "../img/man00.jpg",
 "../img/man01.jpg",
 "../img/man02.jpg",
 "../img/man03.jpg",
 "../img/man04.jpg",
 "../img/man05.jpg",
 "../img/man06.jpg"
 ];

 /*
 * 分析：
 * 1、給開始按鈕綁定單擊事件
 * 1.1、定義循環定時器
 * 1.2、切換小相框src屬性
 * *定義一個數組，存放圖片存放路徑
 * *生成隨機數，數組索引
 *
 * 2、給結束按鈕綁定單擊事件
 * 2.1、清空定時器
 * 2.2、給大相框設置src屬性
 *
 * */
 $(function () {
 var index;
 var interval;
 $("#startID").prop("disabled",false);
 $("#stopID").prop("disabled",true);
 // 1、給開始按鈕綁定單擊事件
 $("#startID").click(function () {
 // 1.1、定義循環定時器,20毫米循環一次
 interval = setInterval(function () {
 //1.2、生成隨機角標0~6
 index= Math.floor(Math.random()*7);
 //1.3、設置小相框src屬性
 $("#img1ID").prop("src",imgs[index]);
 },20);
 $("#startID").prop("disabled",true);
 $("#stopID").prop("disabled",false);
 });

 // 2、給結束按鈕綁定單擊事件
 $("#stopID").click(function () {
 clearInterval(interval);
 $("#img2ID").prop("src",imgs[index]).hide();
 $("#img2ID").show(1000);
 $("#startID").prop("disabled",false);
 $("#stopID").prop("disabled",true);
 });
 });

</script>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JQuery圖片輪播滾動效果(網頁效果--每日一更) 圖片的無縫滾動效果網頁圖片的滾動效果使用JQuery實現圖片輪播效果【轉】使用jquery animate創建平滑滾動效果用jQuery實現數字滾動效果 jquery 實現滾動向上滾動圖片上一張停頓一下在上一張效果【小型系統】抽獎系統-使用Java Swing完成 vue 首頁背景圖片加載完成前增加 loading 效果 -- 使用 new Image() 實現 jQuery文字無縫滾動效果代碼