html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>飘雪轮播</title>
<link rel="stylesheet" href="style.css">
</head>
<body class="wrap">
<div class="igs">
<div class="ig"><img src="1.jpg" alt=""></div>
<div class="ig"><img src="2.jpg" alt=""></div>
<div class="ig"><img src="3.jpg" alt=""></div>
<div class="ig"><img src="4.jpg" alt=""></div>
<div class="ig"><img src="5.jpg" alt=""></div>
</div>
</body>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.3.min.js"></script>
<script src="style.js"></script>
</html>
js代码
$(function(){
var i = 0;
$('.ig').eq(0).show().siblings().hide();
$('.ig').on('click',function(){
i++;
if(i == $('.ig').length){
var back = '<div class="back"> \>\> </div>';
$('.igs').append(back);
$('.back').on('click',function(){
i=0;
$('.back').remove();
$('.ig').eq(i).fadeIn(100).siblings().fadeOut(100);
})
}
$('.ig').eq(i).fadeIn(100).siblings().fadeOut(100);
})
var snow = '<div class="snow">❅</div>';
setInterval(function(){
var f = $(window).width(); //获取浏览器宽度
var h = $(window).height(); //获取浏览器高度
var e = Math.random()*f; //获取根据浏览器的随机值
var fon = 50+Math.random()*50; //获取雪花的大小
var l = e - 200 + 400 * Math.random(); //结束后的距离
var k = 2000 + 5000 * Math.random(); //获取下落的速度
$(snow).clone().appendTo("body").css({
top:0,
left:e+"px",
opacity:1,
"font-size":fon,
}).animate({
top:h+"px",
left:l+"px",
opacity:0.1,
},k,"linear",function(){$(this).remove()})
},200)
})
css代码
*{
margin:0;
padding:0;
}
body{
background:black;
overflow: hidden;
font-size: 14px;
}
.igs{
position:relative;
width:500px;
height:700px;
top:10px;
left:100px;
}
.igs img{
width:100%;
display: block;
position: absolute;
border:2px solid #A8A6CA;
}
.ig{
position: relative;
}
.back {
background: #3A3838;
position: absolute;
right: 10px;
bottom: 10px;
padding: 10px;
width: 30px;
text-align: center;
font-size: inherit;
color: #fff;
}
.snow{
position:absolute;
text-align: center;
color:#fff;
}