<!DOCTYPE html>
<html lang="en">
<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">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<title>jquery实现轮播图</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.content {
width: 900px;
height: 450px;
margin: 200px auto;
overflow: hidden;
position: relative;
}
.box {
width: 100%;
height: 100%;
}
.box ul {
width: 100%;
height: 100%;
}
.box ul li {
float: left;
position: absolute;
top: 0;
left: 0;
}
img {
width: 100%;
background: rgba(255, 255, 255, .8)
}
.box1 ul {
width: 100%;
margin: 0 auto;
height: 100%;
border-radius: 15px;
}
.box ul li {
opacity: 0;
}
.box ul li.block {
animation: play 2s forwards;
}
.box ul li.b {
opacity: 1;
}
@keyframes play {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<div class="content">
<div class="box">
<ul>
<li class="b"><img src="http://e.hiphotos.baidu.com/image/pic/item/500fd9f9d72a6059099ccd5a2334349b023bbae5.jpg" alt=""></li>
<li><img src="http://e.hiphotos.baidu.com/image/pic/item/9358d109b3de9c824d60cc586781800a18d843db.jpg" alt=""></li>
<li><img src="http://h.hiphotos.baidu.com/image/pic/item/c75c10385343fbf20503329abb7eca8065388f58.jpg" alt=""></li>
<li><img src="http://f.hiphotos.baidu.com/image/pic/item/72f082025aafa40f766f5229a064034f79f0199c.jpg" alt=""></li>
<li><img src="http://e.hiphotos.baidu.com/image/pic/item/500fd9f9d72a6059099ccd5a2334349b023bbae5.jpg" alt=""></li>
</ul>
</div>
</div>
</body>
</html>
<script>
var count = 0;
function autoplay() {
id = setInterval(function() {
if (count >= 4) {
count = 0;
$("li").eq(2).css("opacity", 0);
}
count++
$("li").eq(count).addClass("block").siblings("li").removeClass("block");
$(".block").prev().css("opacity", 1).siblings().css("opacity", 0);
}, 3000);
}
autoplay();
</script>