沐鳴測速註冊_兩種輪播圖實現方式

最近做了一個網站,首頁輪播圖一直沒有達到理想的效果,在網上找了兩個實現方法,一個是用css自己實現,一個是用swiper插件,個人認為swiper做的還比較好用。這裏只貼出主要的實現代碼,想要看具體實現代碼及效果可以到對應網址上看:

一、css實現輪播圖

原文網址:https://www.jianshu.com/p/550c11f3b731

實現邏輯:

1)將所有的輪播圖片放在一個容器裏面,並排排列;

2)編寫css動畫事件:每隔一定時間向左偏移一定距離,距離為一個輪播圖寬度;到最後一個輪播圖后切換到第一個圖片,實現無限循環

優點:

實現邏輯簡單,可以直接拿來用

缺點:

輪播圖數量固定,如果要增刪,需要修改代碼;不是一個順序的無限循環,到達最後一個輪播圖后,會有一個快速倒退的動畫,效果不是太好

主要實現代碼:

<!-- 點擊輪播 -->
<div class="slide" style="margin-top: 80px;">

<input type="radio" name="sildeInput" value="0" id="sildeInput1" checked hidden />
<label for="sildeInput1">1</label>

<input type="radio" name="sildeInput" value="1" id="sildeInput2" hidden />
<label for="sildeInput2">2</label>

<input type="radio" name="sildeInput" value="1" id="sildeInput3" hidden />
<label for="sildeInput3">3</label>

<ul>
<li>one-點擊切換</li>
<li>two-點擊切換</li>
<li>three-點擊切換</li>
</ul>
</div>
.slide {
position: relative;
margin: auto;
width: 600px;
height: 200px;
text-align: center;
font-family: Arial;
color: #FFF;
overflow: hidden;
}

.slide ul {
margin: 10px 0;
padding: 0;
width: calc(600px * 3);
transition: all 0.5s;
}

.slide li {
float: left;
width: 600px;
height: 200px;
list-style: none;
line-height: 200px;
font-size: 36px;
}

.slide li:nth-child(1) {
background: #9fa8ef;
}

.slide li:nth-child(2) {
background: #ef9fb1;
}

.slide li:nth-child(3) {
background: #9fefc3;
}

.slide input[name="sildeInput"] {
display: none;
}

.slide label[for^="sildeInput"] {
position: absolute;
top: 170px;
width: 20px;
height: 20px;
margin: 0 10px;
line-height: 20px;
color: #FFF;
background: green;
cursor: pointer;
border-radius: 50%;
}

.slide label[for="sildeInput1"] {
left: 0;
}

.slide label[for="sildeInput2"] {
left: 30px;
}

.slide label[for="sildeInput3"] {
left: 60px;
}

#sildeInput1:checked~ul {
margin-left: 0;
}

#sildeInput2:checked~ul {
margin-left: -600px;
}

#sildeInput3:checked~ul {
margin-left: -1200px;
}

#sildeInput1:checked~label[for="sildeInput1"] {
color: #000;
background: #fff;
}

#sildeInput2:checked~label[for="sildeInput2"] {
color: #000;
background: #fff;
}

#sildeInput3:checked~label[for="sildeInput3"] {
color: #000;
background: #fff;
}

二、swiper插件實現方式

文檔網址:https://www.swiper.com.cn/usage/index.html

實現方法:

1)下載插件文件:swiper-bundle.min.js和swiper-bundle.min.css,下載地址:https://www.swiper.com.cn/download/index.html#file1,下載文件后解壓,在\swiper-master\package目錄下有這兩個文件;

2)引入插件文件:

<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="dist/css/swiper-bundle.min.css">
</head>
<body>
...
<script src="dist/js/swiper-bundle.min.js"></script>
...
</body>
</html>

3)編寫輪播html頁面:

<div >
<div >
<div >Slide 1</div>
<div >Slide 2</div>
<div >Slide 3</div>
</div>
<!-- 如果需要分頁器 -->
<div ></div>

<!-- 如果需要導航按鈕 -->
<div ></div>
<div ></div>

<!-- 如果需要滾動條 -->
<div ></div>
</div>

4)JS編寫代碼啟動輪播圖效果

var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical', // 垂直切換選項
loop: true, // 循環模式選項

// 如果需要分頁器
pagination: {
el: '.swiper-pagination',
},

// 如果需要前進後退按鈕
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},

// 如果需要滾動條
scrollbar: {
el: '.swiper-scrollbar',
},
})

優點:

對輪播圖數量沒有限制,增刪輪播圖不需要修改代碼;

功能可配置,自由增刪輪播功能,api文檔地址:https://www.swiper.com.cn/api/index.html

可以外部控制輪播圖,詳細可見api文檔中的Methods(Swiper方法)

提供import引入方式,可應用在vue和react中。

站長推薦

1.雲服務推薦: 國內主流雲服務商,各類雲產品的最新活動,優惠券領取。地址:阿里雲騰訊雲華為雲

2.廣告聯盟: 整理了目前主流的廣告聯盟平台,如果你有流量,可以作為參考選擇適合你的平台點擊進入

鏈接: http://www.fly63.com/article/detial/10160