点击切换，图片随机，文字根据图片的颜色来改变

<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以内的加法算式给显示出来