<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.11.1.min.js">
</script>
<script type="text/javascript">
$(function(){
$("ul li").click(function(){
var $index = $(this).index();
$(".wrap .img").eq($index).removeClass("hide").addClass("show").siblings(".show").removeClass("show").addClass("hide");
})
}
)
</script>
<style>
body{
margin:0px;
padding: 0px;
}
@-webkit-keyframes in{
0%{left:1152px}
100%{left:0px}
}
@-webkit-keyframes out{
0%{left:0px}
100%{left:-1152px}
}
.wrap{
width:1152px;
height:648px;
border: 1px solid red;
margin:0 auto;
position:relative;
overflow:hidden;
}
.wrap .img{
width:1152px;
height:648px;
background: url('img/11.jpg');
position: absolute;
top:0px;
left:1152px;
}
.wrap .img:nth-child(2){
background: url('img/22.jpg');
}
.wrap .img:nth-child(3){
background: url('img/33.jpg');
}
.wrap .img:nth-child(4){
background: url('img/44.jpeg');
}
.wrap .img:nth-child(5){
background: url('img/55.jpg');
}
.wrap .show{
-webkit-animation:in 3s;
left: 0px;;
}
.wrap .hide{
-webkit-animation:out 3s;
left:1152px;
}
ul{
position: absolute;
right: 50px;
bottom: 20px;
}
li{
display: inline-block;
list-style: none;
width: 30px;
height:30px;
opacity:0.6;
border-radius:15px;
background: yellow;
cursor: pointer;
}
</style>
</head>
<body>
<div class="wrap">
<div class="img show"></div>
<div class="img "></div>
<div class="img "></div>
<div class="img "></div>
<div class="img "></div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>图片轮播
最新推荐文章于 2022-11-27 15:04:02 发布
326
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
