用Swiper插件實(shí)現(xiàn)無縫輪播的品牌展示，鼠標(biāo)移動(dòng)停止，鼠標(biāo)移出無縫移動(dòng)視覺效果

2018-11-16 13:18 作者:愛交作業(yè)的D1N910 0人讀過 | 我要投稿

正常操作，正常分析，大家好，我是D1n910。

文章關(guān)鍵詞：技術(shù) 前端?JQuery 入門滾動(dòng)

文章前言：

公司要求做官網(wǎng)呀呀呀，其中有一部分設(shè)計(jì)是要求我們最親愛的品牌商的LOGO能夠在底部無縫輪播，鼠標(biāo)移上去就停下來。

效果如下：

一、使用插件介紹

1、使用的框架是JQuery，因?yàn)橹v究快速、兼容、展示，所以沒有用vue、react之類的看起來高大上的框架。

2、使用的是優(yōu)秀的輪播插件Swiper3.0版（實(shí)際上Swiper2.0版用起來也是一樣一樣的），可以配合JQuery使用，這樣包的大小會(huì)更小

插件官網(wǎng)鏈接：https://3.swiper.com.cn/api/index.html

三、開始使用

參考官網(wǎng) https://3.swiper.com.cn/usage/index.html

加載插件。

需要用到的文件有swiper.min.js和swiper.min.css文件。

你可以像下面這樣在html里面引用。

<!DOCTYPE html>
<html>
<head>
 ? ?...
 ? ?<link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body>
 ? ?...
 ? ?<script src="path/to/swiper.min.js"></script>
</body>
</html>

我用的是webpack，所以我在我的js文件里這么引用

import '../../css/swiper-3.4.2.min.less' 
import Swiper from './swiper-3.4.2.jquery.min.js'

? 2.HTML內(nèi)容

官網(wǎng)示例

<div class="swiper-container">
 ? ?<div class="swiper-wrapper">
 ? ? ? ?<div class="swiper-slide">Slide 1</div>
 ? ? ? ?<div class="swiper-slide">Slide 2</div>
 ? ? ? ?<div class="swiper-slide">Slide 3</div>
 ? ?</div>
 ? ?<!-- 如果需要分頁器 -->
 ? ?<div class="swiper-pagination"></div>
 ? ?
 ? ?<!-- 如果需要導(dǎo)航按鈕 -->
 ? ?<div class="swiper-button-prev"></div>
 ? ?<div class="swiper-button-next"></div>
 ? ?
 ? ?<!-- 如果需要滾動(dòng)條 -->
 ? ?<div class="swiper-scrollbar"></div>
</div>
<!-- 導(dǎo)航等組件可以放在container之外 -->

以下是我的內(nèi)容

（1）輪播圖容器，class名自定，id名自定

（2）基本輪播內(nèi)容容器

（3）輪播子內(nèi)容容器

（4）輪播頁展示出來的內(nèi)容，自定義，這里是放圖片的容器

（5）我要實(shí)現(xiàn)我的效果而做的存儲(chǔ)公司logo的img標(biāo)簽

?3.樣式方面

你可能想要給Swiper定義一個(gè)大小，當(dāng)然不要也行。

.swiper-container {
 ?  width: 600px;
 ?  height: 300px;
} ?

你可以隨意自定義css樣式，這里我的設(shè)置如下（使用的less來寫css，內(nèi)嵌的寫法你可以看作是子繼承）

.swiper-jointVenture-container {
 ?width: 100%;
 ?overflow: hidden;
 ?padding-top: 140px;
 ?padding-bottom: 196px;
 ?height: 168px;
 ?.swiper-wrapper {
 ? ?-webkit-transition-timing-function: linear; //（1） 之前是ease-out
 ? ?-moz-transition-timing-function: linear;
 ? ?-ms-transition-timing-function: linear;
 ? ?-o-transition-timing-function: linear;
 ? ?transition-timing-function: linear;
 ? ?margin: 0 auto;
 ?}
 ?.swiper-slide {
 ? ?width: 260px;
 ? ?margin: 0 20px;
 ? ?.jointVentureItem {
 ? ? ?display: flex;
 ? ? ?align-items: center;
 ? ? ?justify-content: center;
 ? ? ?width: 100%;
 ? ? ?height: 168px;
 ? ? ?background-color: #ffffff;
 ? ? ?box-shadow: 0px 0px 10px 0px rgba(96, 143, 230, 0.1);
 ? ? ?border-radius: 10px;
 ? ? ?img {
 ? ? ? ?width: 222px;
 ? ? ? ?overflow-y:scroll;
 ? ? ? ?-webkit-filter: grayscale(100%);//（2） 變灰
 ? ? ? ?filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);//（2） 變灰
 ? ? ? ?filter: grayscale(100%);//（2） 變灰
 ? ? ? ?filter: gray;//（2） 變灰
 ? ? ?}
 ? ? ?&:hover{
 ? ? ? ?img {
 ? ? ? ? ?width: 222px;
 ? ? ? ? ?overflow-y:scroll;
 ? ? ? ? ?-webkit-filter: initial;//（3)變回來
 ? ? ? ? ?filter: initial;//（3)變回來
 ? ? ? ? ?filter: initial;//（3)變回來
 ? ? ? ? ?filter: initial;//（3)變回來
 ? ? ? ?}
 ? ? ?}
 ? ?}
 ?}
}

上面的代碼注釋中我標(biāo)識(shí)了（1）、（2）、（3）

（1）? ? 這個(gè)很重要，保證了勻速播放

原來的樣式長(zhǎng)這樣

.swiper-container-free-mode>.swiper-wrapper｛
 ? transition-timing-function: ease-out;
 ? margin: 0 auto;
｝

我的寫法在解析后相當(dāng)于這樣

.jointVenture .swiper-jointVenture-container .swiper-wrapper {
 ?  transition-timing-function: linear;
 ?  margin: 0 auto;
}

linear是勻速；而原來的ease-out相對(duì)于勻速，開始時(shí)快，結(jié)束時(shí)候間慢。這么做就可以完美替換樣式。

如果不改這個(gè)屬性，效果會(huì)像下面這樣

注：修改后的css代碼可能不起作用，原因可能是因?yàn)槟銓懙牡燃?jí)不夠高，可以像我這樣在前面加上別的父親容器的屬性增加等級(jí)。

（2）能看到品牌沒移上去的時(shí)候是灰色的，就是用css濾鏡實(shí)現(xiàn)的。

（3）這個(gè)inherit屬性是指還原到繼承~

4.JS的相關(guān)寫法（用的JQuery）

// （1）下面的代碼決定無縫輪播的效果
var jSpeed = 6000 // 定義了播放速度，你想多少速度就多少速度，這里主要是關(guān)系到下面的函數(shù)調(diào)用
var jointVentureSwiper = new Swiper('.swiper-jointVenture-container',{ // 初始化并存儲(chǔ)了輪播器
 ?autoplay: 1, // 設(shè)置了自動(dòng)播放
 ?speed: jSpeed, // 設(shè)置了播放速度
 ?freeMode: true, // 設(shè)置了是否可以自由運(yùn)動(dòng)
 ?loop : true, // 設(shè)置了是否可以輪播
 ?slidesPerView :'auto', // 設(shè)置了顯示的多少個(gè)為自動(dòng)
 ?loopedSlides: 8, // 設(shè)置了輪播顯示的個(gè)數(shù)，你的是多少個(gè)參與輪播就是多少個(gè)
 ?noSwiping : true, // 禁止了手滑動(dòng)
 ?noSwipingClass : 'swiper-slide'// 禁止了手滑動(dòng)的元素
})
// （2）下面的代碼決定了鼠標(biāo)一上去能不能暫停播放，移開后能繼續(xù)流暢播放
/** nextTransForm 移開鼠標(biāo)后位移到的位置 **/
var nextTransForm = '' 
/** nextSpeed 移開鼠標(biāo)后位移的時(shí)間 **/
var nextSpeed = 0
/** 監(jiān)聽鼠標(biāo)移到輪播圖的子元素上，停止元素 **/
$('#jointVentureSwiper .jointVentureItem').on('mouseenter', function () {
 ?/** 保存下一次移動(dòng)的位置 **/
 ?nextTransForm = 'transform:' + $('#jointVentureSwiper').find('.swiper-wrapper').eq(0).attr('style').split('transform:')[1].split(';')[0]
 ?/** 得到下一次移動(dòng)到子元素左邊的位置 **/
 ?var nextS = -1 * parseInt(nextTransForm.split('translate3d(')[1].split('px')[0])
 ?/** 得到當(dāng)前鼠標(biāo)下子元素上的距離左邊的 **/
 ?var nowS = -1 * parseInt($('#jointVentureSwiper').find('.swiper-wrapper').eq(0).css('transform').split('1, ')[2].split(',')[0])
 ?/** 得到實(shí)際上，鼠標(biāo)移動(dòng)后，子元素應(yīng)該移動(dòng)的時(shí)間 **/
 ?/** 注意這個(gè)280，這是我的元素這么寬，你可以寫代碼獲取，這是我懶了 **/
 ?nextSpeed = jSpeed * ((nextS - nowS) / 280)
 ?/** transform---設(shè)置當(dāng)前位置；前面的代碼是兼容swiper2.0，因?yàn)?.0會(huì)加點(diǎn)料 **/
 ?/** transition-duration:0ms;讓元素不移動(dòng) **/
 ?$('#jointVentureSwiper').find('.swiper-wrapper').eq(0).attr('style', `${$('#jointVentureSwiper').find('.swiper-wrapper').eq(0).attr('style').split('transform: ')[0]}transform: ${$('#jointVentureSwiper').find('.swiper-wrapper').eq(0).css('transform')};transition-duration:0ms;`)
});
/** 監(jiān)聽鼠標(biāo)移開輪播圖的子元素，輪播圖繼續(xù)滾動(dòng) **/
$('#jointVentureSwiper .jointVentureItem').on('mouseleave', function () {
 ? ?/** 講剛剛的內(nèi)容直接放上去，然后就會(huì)發(fā)現(xiàn)又動(dòng)起來了，且無縫，類似上面的暫停代碼 **/
 ?$('#jointVentureSwiper').find('.swiper-wrapper').eq(0).attr('style', `${$('#jointVentureSwiper').find('.swiper-wrapper').eq(0).attr('style').split('transform: ')[0]}${nextTransForm};transition-duration:${nextSpeed}ms;`)
 ?jointVentureSwiper.startAutoplay()
});

（1）這是參考了官網(wǎng)的寫法，大家試了就知道了

（2）這很關(guān)鍵，如果你直接使用Swiper的暫停方法的話，就會(huì)發(fā)現(xiàn)它需要【移動(dòng)到下一個(gè)方塊】上才會(huì)暫停；

原因是因?yàn)槲灰频膶?shí)現(xiàn)原理是用了css實(shí)現(xiàn)，它固定了下一個(gè)位移的位置，雖然啟動(dòng)暫停了，還是需要移動(dòng)到寫好的位移的下一個(gè)位置才暫停。

所以我通過（2）直接用當(dāng)前的位置替換，再把時(shí)間換成0s，就可以暫停；

記錄原來要位移到下一個(gè)地點(diǎn)的位置，計(jì)算之間的距離從而得到【勻速】運(yùn)動(dòng)到那里的時(shí)間，就可以達(dá)到移開鼠標(biāo)后又無縫移動(dòng)的視覺效果啦。

教程完畢。

公司官網(wǎng)目前已經(jīng)上線了，做的時(shí)間不是很久，不到兩周

地址:

http://www.lecloudpay.com/

服務(wù)器很小，所以加載資源有點(diǎn)尷尬，前端是我一個(gè)人做的，害羞羞。沿用了之前的大佬的做法。沒有兼容IE8，大家可以上去看看~。

來自蛋糕D1n910——?dú)g迎關(guān)注呀

有什么問題、批評(píng)意見，歡迎在評(píng)論區(qū)指出，我一定會(huì)回復(fù)的哦。

標(biāo)簽：

最美情侣中文字幕电影,在线麻豆精品传媒,在线网站高清黄,久久黄色视频

用Swiper插件實(shí)現(xiàn)無縫輪播的品牌展示，鼠標(biāo)移動(dòng)停止，鼠標(biāo)移出無縫移動(dòng)視覺效果

三、開始使用