整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
前端項目開發中，大家可能多少都有用到過輪播圖。一般為了省事，我們會使用現成的庫，比如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小時內與您取得聯系。
