免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

最近做了一個(gè)網(wǎng)站，首頁(yè)輪播圖一直沒(méi)有達(dá)到理想的效果，在網(wǎng)上找了兩個(gè)實(shí)現(xiàn)方法，一個(gè)是用css自己實(shí)現(xiàn)，一個(gè)是用swiper插件，個(gè)人認(rèn)為swiper做的還比較好用。這里只貼出主要的實(shí)現(xiàn)代碼，想要看具體實(shí)現(xiàn)代碼及效果可以到對(duì)應(yīng)網(wǎng)址上看：

一、css實(shí)現(xiàn)輪播圖

原文網(wǎng)址：https://www.jianshu.com/p/550c11f3b731

實(shí)現(xiàn)邏輯：

1）將所有的輪播圖片放在一個(gè)容器里面，并排排列；

2）編寫(xiě)css動(dòng)畫(huà)事件：每隔一定時(shí)間向左偏移一定距離，距離為一個(gè)輪播圖寬度；到最后一個(gè)輪播圖后切換到第一個(gè)圖片，實(shí)現(xiàn)無(wú)限循環(huán)

優(yōu)點(diǎn)：

實(shí)現(xiàn)邏輯簡(jiǎn)單，可以直接拿來(lái)用

缺點(diǎn)：

輪播圖數(shù)量固定，如果要增刪，需要修改代碼；不是一個(gè)順序的無(wú)限循環(huán)，到達(dá)最后一個(gè)輪播圖后，會(huì)有一個(gè)快速倒退的動(dòng)畫(huà)，效果不是太好

主要實(shí)現(xiàn)代碼：

/*//自動(dòng)播放*/ .slide .slide-auto {     animation: marginLeft 10.5s infinite; }@keyframes marginLeft {    0% {        margin-left: 0;    }    28.5% {        margin-left: 0;    }    33.3% {        margin-left: -600px;    }    62% {        margin-left: -600px;    }    66.7% {        margin-left: -1200px;    }    95.2% {        margin-left: -1200px;    }    100% {        margin-left: 0;    }}

二、swiper插件實(shí)現(xiàn)方式

文檔網(wǎng)址：https://www.swiper.com.cn/usage/index.html

實(shí)現(xiàn)方法：

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

2）引入插件文件：

...         ...

3）編寫(xiě)輪播html頁(yè)面：

Slide 1         

Slide 2         

Slide 3               

4）JS編寫(xiě)代碼啟動(dòng)輪播圖效果

var mySwiper = new Swiper ('.swiper-container', {     direction: 'vertical', // 垂直切換選項(xiàng)     loop: true, // 循環(huán)模式選項(xiàng)          // 如果需要分頁(yè)器     pagination: {       el: '.swiper-pagination',     },          // 如果需要前進(jìn)后退按鈕     navigation: {       nextEl: '.swiper-button-next',       prevEl: '.swiper-button-prev',     },          // 如果需要滾動(dòng)條     scrollbar: {       el: '.swiper-scrollbar',     },   })

優(yōu)點(diǎn)：

對(duì)輪播圖數(shù)量沒(méi)有限制，增刪輪播圖不需要修改代碼；

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

可以外部控制輪播圖，詳細(xì)可見(jiàn)api文檔中的Methods（Swiper方法）

提供import引入方式，可應(yīng)用在vue和react中。

缺點(diǎn)：

有學(xué)習(xí)成本，不過(guò)不高