<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-no-swiping">
<img src="img/bj.png" class="bg1 pos-ab full" />
<img src="img/three_02.png" class="three pos-ab" />
<img src="img/btn.png" class="btn pos-ab"/>
<img src="img/logo.png" class="logo pos-ab" />
</div>
<div class="swiper-slide swiper-no-swiping">
<div class="main full card1">
<div class="card-div">
<img src="img/card1.png" class="card-img" />
<p class="card-num">123456789</p>
</div>
<div class="none moren-div">
<text class="moren-text">暂未领取礼品~</text>
</div>
<img src="img/tip.png" class="tip" />
</div>
</div>
</div>
</div>
<script language="javascript">
$(".swiper-container").height($(window).height());
var swiper = new Swiper(".mySwiper", {
// direction: "vertical",
// loop: true,
noSwiping : true,
// slidesPerView: 1,
// spaceBetween: 30,
// mousewheel: true,
});
//放入所有的照片
var img = new Array("card1.png", "card2.png", "card3.png", "card4.png", "card5.png");
//点击事件
$(".btn").click(function () {
//随机一个数 img Math.random() * 4 标示0到4随机数
// var shu = Math.floor(Math.random() * 4);
//1-6之间的随机数
var shu = parseInt(Math.random() * 5)+1;
//修改src 拼接一个地址
// $(".card-img").attr("src", "img/" + img[shu] + "");
$(".card-img").attr("src", "img/card" + shu + ".png");
// var shu = 3
if(shu==3){
console.log('222')
$(".card-num").addClass("color1")
}else{
}
swiper.slideTo(1, 0, true);
});
</script>
文字根据图片的改变的意思是通过把图片的索引值拿到,可以规定具体的哪一张卡片的颜色,更改它的class样式就可以了
css
.main {
overflow: hidden;
}
.main img {
position: absolute;
}
.card-div {
position: absolute;
left: 0.25rem;
top: 0.6rem;
width: 7rem;
height: 3.86rem;
}
.card-img {
position: absolute;
left: 0rem;
top: 0rem;
width: 7rem;
height: 3.86rem;
}
.card-num {
position: absolute;
font-size: 0.36rem;
text-align: right;
left: 0.7rem;
top: 2.9rem;
color: #ffffff;
}
.color1 {
color: #000000;
/* color: #ffffff; */
}
.tip {
width: 6.16rem;
left: 0.67rem;
top: 5.06rem;
}
.bg1 {
left: 0;
top: 0;
}
.three {
width: 7.5rem;
height: 9.32rem;
top:8%;
}
.btn {
width: 5rem;
left: 1.2rem;
top: 82%;
}
.logo{width: 3rem;height: auto;left: 0.2rem;top: 0.2rem;}
.swiper {
width: 100%;
height: 100vh;
}
.swiper-slide {
text-align: center;
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
}
math以及random详解:
Math.random() 是得到一个0-1之间随机数。
Math.floor(i) 是得到一个数的整数部分
Math.random()*4的值是[0-4)之间的随机数
tmp就是指随机出来的一个整数0,1,2,3其中的一个
Math.random() 是取随机数*4 可以计算出一个结果
Math.floor是取最接近这个结果的一个最大整数
var n1 = parseInt(Math.random() * 9) + 1;
Math.random() * 9 标示0到9随机数,类型是double,像1.2,2.3都是, parseInt(Math.random() * 9) + 1;
标示1到10的随机整数,在0~1之间的随机数*9说明其这个随机数最大值为9,然后取整,说明是想取0~9之间的整数,然后加1,说明想随机取1~10之间的整数,然后把这几个整数给构造成类似‘1+2+3=6’这样的字符串装到html的某个td里面去。所以这个的意义在于随机形成一个10以内的加法算式给显示出来