整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
前端项目开发中，大家可能多少都有用到过轮播图。一般为了省事，我们会使用现成的库，比如swiper。当然，很多组件库也带有轮播图组件，比如element-ui的ElCarousel组件。但是，有多少童鞋曾思考过其实现原理呢？又有多少童鞋尝试过手写一个呢？
其实，实现一个轮播图相当简单，我打算出一个大约3节的连载教程，教大家怎样一步一步实现轮播图。今天，我们先讲解结构和布局的设计。
首先，我们创建一个项目文件夹carousel-demo，在该目录下新建images文件夹和index.html，main.js，style.css三个文件。然后，大家找3张相同尺寸的banner图和2个相同尺寸的小图标放入images文件夹。我用的banner图尺寸是1280*720，文件名分别是1.jpg，2.jpg，3.jpg；我用的图标尺寸是32*32，文件名分别是left.png和right.png。
最终，我们实现的轮播图界面长这样，大家说漂不漂亮？
接下来，我们打开index.html文件，先创建一个基本的骨架，并引入我们刚才创建的css和js文件，代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Carousel demo</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="main.js"></script>
</body>
</html>我们的轮播图需要一个外层容器元素，该元素包含一个banner列表，一个指示器和一组左右导航按钮。由于默认显示第一张图片，所以我们给第一个指示器项添加了一个active类。代码如下：
<div class="carousel-wrapper">
<ul class="slides">
<li class="slide-item">
<img src="images/1.jpg">
</li>
<li class="slide-item">
<img src="images/2.jpg">
</li>
<li class="slide-item">
<img src="images/3.jpg">
</li>
</ul>
<ul class="indicators">
<li class="indicator-item active"></li>
<li class="indicator-item"></li>
<li class="indicator-item"></li>
</ul>
<ul class="nav">
<li class="nav-left"></li>
<li class="nav-right"></li>
</ul>
</div>现在，我们打开style.css文件，首先对默认样式做一些重置，将所有元素的内外边距设为0，盒模型设为边框盒。为了去掉li元素前面的小圆点，我们将li元素的list-style设为none。样式如下：
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
li {
list-style: none;
}接下来，我们从外到内，从上到下为元素定义样式。
首先，我们定义外层容器元素的样式。为了使布局更灵活，我们先给它指定一个最大宽度，并让其在水平方向居中。由于它的子元素需要堆叠，我们给它设置相对定位，让子元素相对于它来定位。由于我们的banner列表有多张图片，可以左右滚动，每次仅一张图片可见，所以需要将不可见的图片裁掉。样式如下：
.carousel-wrapper {
max-width: 800px;
margin: auto;
position: relative;
overflow: hidden;
}接下来，我们定义banner列表和其子元素样式。我们的banner列表有3张图片，可以左右滚动，每次仅显示一张，所以banner的宽度与容器一样，banner列表宽度是容器的3倍。
我们将banner列表元素显示为弹性盒，以让所有banner在一行排列显示。由于弹性盒子元素会均分空间，而我们的banner图宽度相同，所以不需要设置banner的宽度，仅将banner内的img元素宽度设为100%即可。
我们也为banner列表添加了过渡属性，当使用JS动态改变变换值的时候会有动画效果。样式如下：
.slides {
width: 300%;
display: flex;
transition: transform .3s;
}
.slide-item img {
display: block;
width: 100%;
}下面，我们定义指示器样式。我们的指示器需要在banner列表上层底部居中显示，我们使用left和X轴平移变换结合实现水平居中，全部样式如下：
.indicators {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex; // 弹性盒，让子元素在一行显示
padding: 5px;
border-radius: 10px;
background-color: rgba(255, 255, 255, .3);
pointer-events: none; // 阻止指示器容器成为指针事件目标
}
.indicator-item {
pointer-events: all; // 让指示器子元素可以成为指针事件目标
cursor: pointer;
width: 30px;
height: 6px;
margin: 0 4px;
border-radius: 6px;
background-color: #999;
}
.indicator-item.active { // 为活动指示器项设置一个不同的样式
background-color: #ccc;
}最后，我们定义导航按钮样式。我们的导航按钮需要在banner列表上层两边垂直方向居中显示，我们使用top和Y轴平移变换结合实现垂直居中，全部样式如下：
.nav li {
cursor: pointer;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, .3);
background-repeat: no-repeat;
background-position: center;
background-size: 24px;
}
.nav-left {
left: 0;
background-image: url(images/left.png);
}
.nav-right {
right: 0;
background-image: url(images/right.png);
}以上就是本文的全部内容了，童鞋们都理解了吗？还有什么不懂的欢迎评论区提问，感谢阅读！
Swiper3d是基于原生js和css实现的网页旋转木马轮播图插件，具有流畅的过渡效果，适用于pc和移动端。ie >= 10以及 其他主流浏览器都支持。
https://gitee.com/visitor009/swiper3d
<!-- css -->
<link rel="stylesheet" href="../css/3dSwiper.css">
<!-- html -->
<div class="swiper-container">
<ul class="swiper-wrap">
<li><img src=""></li>
<li><img src=""></li>
<li><img src=""></li>
</ul>
<ul class="swiper-dots"></ul>
<ul class="swiper-navigator">
<li class="swiper-btn-prev"><</li>
<li class="swiper-btn-next">></li>
</ul>
</div>
<!-- js -->
<script src="../js/3dSwiper.js"></script>
<script>
new Swiper(".swiper-container",{
pagination: ".swiper-dots",
navigator: {
prev: ".swiper-btn-prev",
next: ".swiper-btn-next"
}
});
</script>开源的插件非常多，有很多插件都很实用，本文介绍的是这样一个轮播图插件，也是偶然在码云上发现的，希望对你有所帮助!
<!DOCTYPE html>
<html>
<head>
<title>轮播图制作</title>
<style type="text/css">
.imgContainer {
width: 1000px;
height: 400px;
border: 1px solid #ccc;
margin: 0 auto;
}
.imgContainer .imgs img {
width: 1000px;
height: 400px;
}
.imgContainer .imgsBtn {
width: 112px;
height: 32px;
margin: 0 auto;
position: relative;
top: -38px;
text-align: center;
z-index: 5;
}
.imgContainer .imgsBtn span {
display: block;
float: left;
width:20px;
height: 20px;
line-height: 20px;
font-size: 13px;
margin: 3px;
border-radius: 50%;
}
.imgsBtnOne {
background-color: #ccc;
color: #222;
opacity: 0.8;
}
.imgsBtnTwo {
background-color: red;
color: #fff;
opacity: 0.8;
}
.imgContainer .imgsBtn span:hover {
cursor: pointer;
}
</style>
<script type="text/javascript">
var count = 1; //图片起始序号
var speed = 3000;//图片轮播速度
var ti = window.setInterval(changeImg,speed);//调用函数，使图片实现轮播
var spans; //包含数字的span
var imgs; //包含图片的div
var img; //图片标签
window.onload = function() {
init(); //获取包含数字的span，进行初始化
clickJumpImg();
}
//初始化
function init() {
imgs = document.getElementById("carouselImg"); //获取图片所在的div
img = imgs.firstElementChild; //获取图片标签
//获取包含数字的span的集合
spans = document.getElementById("spans").getElementsByTagName("span");
}
//切换图片和数字样式
function changeImg() {
img.src = "img/" + count + "a.jpg"; //设置图片路径
//使数字改变样式
for (var i = 0; i < spans.length; i++) { //第i个span对应第i+1张图片
//因为图片数字是从1开始，二span集合的下标从0开始
if (spans[i].innerHTML == count) {
spans[i].className = "imgsBtnTwo";
}else {
spans[i].className = "imgsBtnOne";
}
}
count++;
if (count>4) { //到最后一张图片后，设置下一张图片为第一张
count = 1;
}
}
//鼠标移入数字时，切换到对应图片
function clickJumpImg() {
for (var i = 0; i < spans.length; i++) {
spans[i].onclick = function() {
count = this.innerHTML;
//设置显示图片后，立即执行一次changeImg()函数，否则图片会延迟speed秒才出现
changeImg();
}
}
}
</script>
</head>
<body>
<div class="imgContainer">
<div id="carouselImg" class="imgs">
<img src="img/1a.jpg">
</div>
<div id="spans" class="imgsBtn">
<span class="imgsBtnTwo">1</span>
<span class="imgsBtnOne">2</span>
<span class="imgsBtnOne">3</span>
<span class="imgsBtnOne">4</span>
</div>
</div>
</body>
</html>*请认真填写需求信息，我们会在24小时内与您取得联系。
