用jQuery实现抽奖程序

本文实例为大家分享了jQuery实现抽奖程序的具体代码，供大家参考，具体内容如下

1. 主要需求

• 实现一个抽奖功能。
• 点击开始按钮后，开始按钮禁用，停止按钮取消禁用，小图片实现快速切换显示。
• 点击停止按钮后，停止按钮禁用，开始按钮取消禁用，小图片停止切换，将小图片在大图片位置显示。
• 小图片实现快速切换显示。
• 点击停止按钮后，淡入淡出选中图。
  

2. 素材页面

 
 
 
 
 
  #small {
   border: 1px solid blueviolet;
   width: 75px;
   height: 75px;
   margin-bottom: 20px;
  }

  #smallPhoto {
   width: 75px;
   height: 75px;
  }

  #big {
   border: 2px solid orangered;
   width: 500px;
   height: 500px;
   position: absolute;
   left: 300px;
   top: 10px
  }

  #bigPhoto {
   width: 500px;
   height: 500px;
  }

  #btnStart {
   width: 100px;
   height: 100px;
   font-size: 22px;
  }

  #btnStop {
   width: 100px;
   height: 100px;
   font-size: 22px;
  }
  





 




 



 

3. 代码实现

 
 
 

 
  #small {
   border: 1px solid blueviolet;
   width: 75px;
   height: 75px;
   margin-bottom: 20px;
  }

  #smallPhoto {
   width: 75px;
   height: 75px;
  }

  #big {
   border: 2px solid orangered;
   width: 500px;
   height: 500px;
   position: absolute;
   left: 300px;
   top: 10px
  }

  #bigPhoto {
   width: 500px;
   height: 500px;
  }

  #btnStart {
   width: 100px;
   height: 100px;
   font-size: 22px;
  }

  #btnStop {
   width: 100px;
   height: 100px;
   font-size: 22px;
  }
 





 




 

示例素材：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。