<!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三种)
共23个文件
jpg:8个
png:7个
js:4个
需积分: 48 15 下载量 121 浏览量
2018-12-10
20:29:33
上传
评论 1
收藏 34.49MB RAR 举报
温馨提示
此文件包含三种轮播图的效果制作。jquery中的轮播图效果是一位大佬所写,另两种实现较为简单初学者可做参考。
资源推荐
资源详情
资源评论
收起资源包目录
轮播图效果(原生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
共 23 条
- 1
资源评论
帮窝消消黑眼圈
- 粉丝: 70
- 资源: 8
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功