<!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>

使用jquery完成抽奖图片滚动的效果的更多相关文章

  1. 实例源码--Android图片滚动切换效果

    下载源码 技术要点:  1.图片滚动切换技术 2.详细的源码注释 ...... 详细介绍: 1.图片滚动切换技术 本套源码实现了类似于网站图片滚动推广效果,效果不错,很不错的参考源码 2.源码目录 运 ...

  2. 使用JQuery.slideBox实现图片滚动效果

    1.下载JQuery.slideBox和jquery插件,并引用 <link href="css/jquery.slideBox.css" rel="stylesh ...

  3. jQuery插件实例三：图片滚动[切换]效果一

    图片切换效果在很多网站上都能看到,是一种常见的广告/活动宣传方式,通常位于网页上端.这个插件是众多图片切换效果的形式中的一种,数据源可在前端配置,也可从后台通JSON格式传输数据,当然,数据格式是固定 ...

  4. JQuery简单实现图片轮播效果

    很多页面都需要用到界面轮播,但是用原生js相对来说比较复杂,用jQuery实现效果比较迅速,写个简单的demo 1.首先在HTML页面要放置轮播图案位置插入div,这里写了轮播图片数量为3张,所以定义 ...

  5. JQuery实现资讯上下滚动悬停效果

    第一步:使用repeater绑定一个table. <table width="530" id="rollBar"> <asp:Repeater ...

  6. Jquery仿百度经验左右滚动切换效果(转)

    http://www.xwcms.net/webAnnexImages/fileAnnex/201608/61342/index.html

  7. Android实现图片滚动控件，含页签功能，让你的应用像淘宝一样炫起来

    首先题外话,今天早上起床的时候,手滑一下把我的手机甩了出去,结果陪伴我两年半的摩托罗拉里程碑一代就这么安息了,于是我今天决定怒更一记,纪念我死去的爱机. 如果你是网购达人,你的手机上一定少不了淘宝客户 ...

  8. jquery实现多行文字图片滚动效果

    今儿分享一个jquery实现多行滚动效果. 我看一些论坛网站上面,公告处用的较多. 代码如下 复制代码 // 多行滚动(function($){$.fn.extend({Scroll:function ...

  9. jQuery个性化图片轮播效果

    jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

随机推荐

  1. 《手把手教你》系列技巧篇（四十一）-java+ selenium自动化测试 - 处理iframe -上篇（详解教程）

    1.简介 原估计宏哥这里就不对iframe这个知识点做介绍和讲解了,因为前边的窗口切换就为这种网页处理提供了思路,另一个原因就是虽然iframe很强大,但是现在很少有网站用它了.但是还是有小伙伴或者童 ...

  2. JAVA学习（七）

    今天讲师又讲了一个多小时类的注意点,例如书写格式什么的,这些我c++中都学过了,所以很快看完. 然后又讲了IDE,我选择的是IntelliJ IDEA. 刚开始官网登不上去,花了一个小时,从网上翻了各 ...

  3. MySQL统计总数就用count(*)，别花里胡哨的《死磕MySQL系列 十》

    有一个问题是这样的统计数据总数用count(*).count(主键ID).count(字段).count(1)那个效率高. 先说结论,不用那么花里胡哨遇到统计总数全部使用count(*). 但是有很多 ...

  4. 七、Hadoop3.3.1 HA 高可用集群QJM （基于Zookeeper，NameNode高可用+Yarn高可用）

    目录 前文 Hadoop3.3.1 HA 高可用集群的搭建 QJM 的 NameNode HA Hadoop HA模式搭建(高可用) 1.集群规划 2.Zookeeper集群搭建: 3.修改Hadoo ...

  5. 【Tool】IntelliJ IDEA 使用技巧

    IntelliJ IDEA 使用技巧 2019-11-06  20:51:43  by冲冲 1.快捷键 Ctrl+w //括出相关范围 Ctrl+shift+f //按照代码段在全局搜索 Ctrl+f ...

  6. IDEA：Git stash 暂存分支修改的代码

    IDEA:Git stash 暂存分支修改的代码 场景:当我们正在master分支开发新功能的时候,突然接到一个任务发现线上出现了一个紧急的BUG需要修复,由于没有打新分支做这部分新需求,这时正做到半 ...

  7. 洛谷 P3994 高速公路（斜率优化）

    题目链接 题意:给出一棵树,\(1\) 号点为根,边上有边权. 每个点有两个参数 \(p_i,q_i\) 如果你想从 \(i\) 号点到与其距离为 \(d\) 的 \(j\) 号点,那么你需花费 \( ...

  8. 洛谷 P4437 [HNOI/AHOI2018]排列（贪心+堆，思维题）

    题面传送门 开始 WA ycx 的遗产(bushi 首先可以将题目转化为图论模型:\(\forall i\) 连边 \(a_i\to i\),然后求图的一个拓扑序 \(b_1,b_2,\dots b_ ...

  9. 蓝绿部署、滚动部署、金丝雀（Canary）发布、灰度发布、A/B测试

    最近看到Canary发布,一时没有反应过来是什么,一查才发现就是鼎鼎有名的金丝雀发布,发现经常一起出现的还有灰度发布.蓝绿部署.滚动部署.A/B测试,故一起学习一下这几个概念. 1. 蓝绿部署 目的: ...

  10. 制作nc文件（Matlab）

    首先看一个nc文件中包含哪些部分,例如一个标准的 FVCOM 输入文件 wind.nc: netcdf wind { dimensions: nele = 36858 ; node = 18718 ; ...