是什么,请自行百度就OK。话不多少,直接上程序代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>皮肤抽奖</title>
<!--设置css样式-->
<style>
.boxs {
margin: 150px auto;
width: 1040px;
height: 465px;
padding: 30px;
background: url(img/back1.jpg) repeat center center;
position: relative;
text-align: center;
}
.boxs h1 {
position: absolute;
left: 425px;
height: 10px;
color: #f66;
}
.innerBox {
width: 930px;
height: 225px;
padding: 0 15px;
position: absolute;
left: 65px;
top: 120px;
overflow: hidden;
}
.innerBox div {
list-style: none;
float: left;
padding: 5px;
width: 300px;
height: 225px;
overflow: hidden;
position: relative;
}
.innerBox ul{
list-style: none;
position: absolute;
left: 0;
top: 0;
padding: 0;
margin: 0;
}
.innerBox li img {
display: block;
width: 300px;
height: 225px;
}
#Play {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #66f;
color: #fff;
font-size: 30px;
font-weight: 500;
margin-top: 360px;
}
</style>
<!--导入随机数js文件(js文件中封装了一个生成指定范围的随机数函数)-->
<script src="js/random.js"></script>
<!--导入jQuery文件-->
<script src="jquery-3.2.1.js"></script>
<script>
jQuery(function($) {
//创建对象(按钮、抽奖框、图片列表和下标)
var $play = $('#Play');
var $box1 = $('.box1');
var $ul1 = $box1.children('ul');
var $box2 = $('.box2');
var $ul2 = $box2.children('ul');
var $box3 = $('.box3');
var $ul3 = $box3.children('ul');
var index1 = 0;
var index2 = 0;
var index3 = 0;
//复制第一张图片,并放到最后
var firstPic =$('.warp1 li').first().clone();
$ul1.append(firstPic);
var firstPic =$('.warp2 li').first().clone();
$ul2.append(firstPic);
var firstPic =$('.warp3 li').first().clone();
$ul3.append(firstPic);
//设置按钮点击事件
$play.on('click', function() {
//重置下标值
index1 = 0;
index2 = 0;
index3 = 0;
//设置定时器
var timerStart1 = setInterval(autoplay1, 30);
var timeStop1 = randomNumber(120, 130)*30;
var timerStart2 = setInterval(autoplay2, 30);
var timeStop2 = randomNumber(142, 152)*30;
var timerStart3 = setInterval(autoplay3, 30);
var timeStop3 = randomNumber(164, 174)*30;
//点击按钮后设置延时结束(3个抽奖框停止时间不一样)
var firstBox = setTimeout(function() {
clearInterval(timerStart1);
}, timeStop1);
var secondBox = setTimeout(function() {
clearInterval(timerStart2);
}, timeStop2);
var thirdBox = setTimeout(function() {
clearInterval(timerStart3);
}, timeStop3);
//计算返回最终显示的图片对应的编号
function numJpg(num){
var jpgNumPrv = parseInt((num / 30 - 100)%10);
return jpgNumPrv;
}
var num1 = numJpg(timeStop1);
var num2 = numJpg(timeStop2);
var num3 = numJpg(timeStop3);
//通过返回的图片对应的编号判断是否中奖
setTimeout(function() {
if(num1 === num2 && num2 === num3){
alert('恭喜中奖了,中奖皮肤编号为'+num1);
}else{
alert('继续努力');
}
}, 8000);
});
//自动轮播图
function autoplay1() {
index1++;
if(index1 === $ul1.children().length){
index1 = 1;
$ul1.css('top','0px');
}
var toper = -index1*$box1.height();
$ul1.animate({
top:toper
},20);
}
function autoplay2() {
index2++;
if(index2 === $ul2.children().length){
index2 = 1;
$ul2.css('top','0px');
}
var toper = -index2*$box1.height();
$ul2.animate({
top:toper
},20);
}
function autoplay3() {
index3++;
if(index3 === $ul3.children().length){
index3 = 1;
$ul3.css('top','0px');
}
var toper = -index3*$box1.height();
$ul3.animate({
top:toper
},20);
}
})
</script>
</head>
<body>
<div class="boxs">
<h1>王者荣耀皮肤抽奖</h1>
<div class="innerBox">
<div class="box1">
<ul class="warp1">
<li><img src="img/1.jpg" alt="" /></li>
<li><img src="img/2.jpg" alt="" /></li>
<li><img src="img/3.jpg" alt="" /></li>
<li><img src="img/4.jpg" alt="" /></li>
<li><img src="img/5.jpg" alt="" /></li>
<li><img src="img/6.jpg" alt="" /></li>
<li><img src="img/7.jpg" alt="" /></li>
<li><img src="img/8.jpg" alt="" /></li>
<li><img src="img/9.jpg" alt="" /></li>
<li><img src="img/10.jpg" alt="" /></li>
</ul>
</div>
<div class="box2">
<ul class="warp2">
<li><img src="img/1.jpg" alt="" /></li>
<li><img src="img/2.jpg" alt="" /></li>
<li><img src="img/3.jpg" alt="" /></li>
<li><img src="img/4.jpg" alt="" /></li>
<li><img src="img/5.jpg" alt="" /></li>
<li><img src="img/6.jpg" alt="" /></li>
<li><img src="img/7.jpg" alt="" /></li>
<li><img src="img/8.jpg" alt="" /></li>
<li><img src="img/9.jpg" alt="" /></li>
<li><img src="img/10.jpg" alt="" /></li>
</ul>
</div>
<div class="box3">
<ul class="warp3">
<li><img src="img/1.jpg" alt="" /></li>
<li><img src="img/2.jpg" alt="" /></li>
<li><img src="img/3.jpg" alt="" /></li>
<li><img src="img/4.jpg" alt="" /></li>
<li><img src="img/5.jpg" alt="" /></li>
<li><img src="img/6.jpg" alt="" /></li>
<li><img src="img/7.jpg" alt="" /></li>
<li><img src="img/8.jpg" alt="" /></li>
<li><img src="img/9.jpg" alt="" /></li>
<li><img src="img/10.jpg" alt="" /></li>
</ul>
</div>
</div>
<button id="Play">开始抽奖</button>
</div>
</body>
</html>
效果图如下:
1,需要先导入随机数函数
<script src="js/random.js"></script>
具体函数代码如下:
function randomNumber(start, end){ var randomNum = parseInt(Math.random()*(end-start)+start); return randomNum; }
2,导入jQuery文件
<script src="jquery-3.2.1.js"></script>
3,导入图片
在body内部导入图片,图片可以自己找。