<!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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<title>轮播图 练习</title>
<style>
.lunboimg {
list-style-type: none;
}
.lbimg {
position: absolute;
}
.lunbobtn {
position: absolute;
top: 75%;
left: 40%
}
.lbbtn {
margin-left: 10px;
display: inline-block;
background-color: gray;
border-radius: 50%;
width: 20px;
height: 20px;
}
.lbbtn:hover {
width: 22px;
height: 22px;
}
.rtriangle{
margin-top: 50px;
width: 0;
height: 0;
border-width:70px 40px;
border-style: solid;
}
.righttriangle {
position: absolute;
top: 40%;
left:78%;
display: inline-block;
border-right: 10px solid; border-bottom: 10px solid;
width: 50px; height: 50px;
transform: rotate(-45deg);
}
.righttriangle:hover {
border-right: 12px solid yellow; border-bottom: 12px solid yellow;
}
.lefttriangle {
position: absolute;
top: 40%;
left:17%;
display: inline-block;
border-left: 10px solid; border-bottom: 10px solid;
width: 50px; height: 50px;
transform: rotate(45deg);
}
.lefttriangle:hover {
border-left: 12px solid yellow; border-bottom: 12px solid yellow;
}
</style>
</head>
<body>
<div class="container">
<ul class="lunboimg">
<li class="lbimg">
<a href="#"><img src="23.jpg" width="1000px" height="600px"></a>
</li>
<li class="lbimg">
<a href="#"><img src="21.jpg" width="1000px" height="600px"></a>
</li>
<li class="lbimg">
<a href="#"><img src="22.jpg" width="1000px" height="600px"></a>
</li>
<li class="lbimg">
<a href="#"><img src="20.jpg" width="1000px" height="600px"></a>
</li>
</ul>
<ul class="lunbobtn">
<li class="lbbtn"></li>
<li class="lbbtn"></li>
<li class="lbbtn"></li>
<li class="lbbtn"></li>
</ul>
<div class="rlbtn">
<div id="rightbtn" class="righttriangle"></div>
<div id="leftbtn" class="lefttriangle"></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="test.js"></script>
</body>
</html>
轮播图效果(原生js+jquery+bootstrap三种)
需积分: 48 121 浏览量
2018-12-10
20:29:33
上传
评论 1
收藏 34.49MB RAR 举报
轮播图效果(原生js+jquery+bootstrap三种).rar （23个子文件） 
轮播图效果(原生js+jquery+bootstrap三种) bootstrap4实现轮播图 
test.js 2KB
test.html 3KB
21.jpg 462KB 23.jpg 518KB 22.jpg 8.2MB 20.jpg 2.81MB 原生js实现轮播图效果 test.html 3KB 21.jpg 462KB 23.jpg 518KB 22.jpg 8.2MB 20.jpg 2.81MB jquery实现轮播图 images 
a2.png 462KB a3.png 2.81MB right.png 898B Carousel.js 7KB PicCarousel.js 7KB jquery-1.8.3.min.js 91KB a1.png 518KB left.png 1KB style.css 1KB a5.png 8.2MB a4.png 1003KB index.html 2KB资源评论
