PC端和移動端的圖片滑動切換插件，你有用過嗎？

言

圖片切換在目前的web或者app應用中早已不是新鮮事，尤其是在App首頁頂部推薦中會經常用到，今天就給大家推薦幾款Github上開源的圖片滑動切換庫。

slick

slick一款功能異常強大的圖片切換效果庫，支持各種動畫效果和樣式，運行效果如下圖所示。

slick運行效果

目前slick在Github上的信息如下圖所示。

github上的信息

目前star數已經達到了18k+，可以說是非常火熱的一個開源庫了。

安裝

可以通過npm或者bower進行安裝。

安裝

實現

首先看下html代碼，是一個很簡單的div代碼塊。

html代碼

然后是js代碼進行調用，其中包含一些常用的配置。

js代碼調用

slick庫唯一的缺點就是依賴于jQuery，現在已經沒人喜歡用jQuery了，希望slick庫能脫離jQuery，那樣就會更受歡迎了。

swipe

swipe是一款輕量級的圖片滑動切換的庫，對移動端表現出完美的支持，運行效果如下。

swipe插件運行效果

目前swipe在Github上的信息如下所示。

swipe在github上的信息

安裝

swipe同樣支持npm和bower安裝的方式。

安裝

使用

使用swipe插件也非常的簡單，首先定義html元素。

html元素

然后定義CSS樣式。

CSS樣式

最后通過js代碼進行調用。

js代碼調用

總結

今天這篇文章給大家總結了兩個非常實用的圖片滑動切換插件，分別支持PC端和移動端，歡迎自己動手體驗。

義骨架，寫html和css

html部分

<template>
    <div class="drag-wrapper" ref="dragDiv">
        <div class="drag_bg"></div>
        <div class="drag_text f14">{{ confirmWords }}</div>
        <!-- 移動的模塊 -->
        <div ref="moveDiv"
             @mousedown="mousedownFn($event)"
             :class="{'handler_ok_bg': confirmSuccess}"
             class="handler handler_bg"></div>
    </div>
</template>

css部分: 由于擔心圖片源的問題，所以寫成了base64的圖片

<style scoped>
    .drag{
        position: relative;
        background-color: #e8e8e8;
        width: 100%;
        height: 40px;
        line-height: 40px;
        text-align: center;
    }
    .handler{
        width: 40px;
        height: 40px;
        border: 1px solid #ccc;
        cursor: move;
        position: absolute;top: 0px;left: 0px;
    }
    .handler_bg{
        background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==") no-repeat center;
    }
    .handler_ok_bg{
        background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDlBRDI3NjVGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDlBRDI3NjRGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNWEzMWNhMC1hYmViLTQxNWEtYTEwZS04Y2U5NzRlN2Q4YTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==") no-repeat center;
    }
    .drag_bg{
        background-color: #7ac23c;
        height: 40px;
        width: 0px;
    }
    .drag_text{
        position: absolute;
        top: 0px;
        width: 100%;text-align: center;
        -moz-user-select: none;
        -webkit-user-select: none;
        user-select: none;
        -o-user-select:none;
        -ms-user-select:none;
    }
</style>

實現滑動拖拽校驗

定義參數

data() {
    return {
        beginClientX:0,               // 距離屏幕左端距離
        mouseMoveStata:false,         // 觸發拖動狀態  判斷
        maxwidth:'',                  // 拖動最大寬度，依據滑塊寬度算出來的
        confirmWords:'拖動滑塊驗證',   // 滑塊文字
        confirmSuccess:false          // 驗證成功判斷
    }
}

1. 在mounted里面，根據滑塊寬度計算可拖動最大寬度以及監聽手指的觸摸和離開事件

mounted() {
    // 根據滑塊寬度計算可拖動最大寬度
    this.maxwidth=this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth
    // 監聽手指的觸摸事件
    document.getElementsByTagName('html')[0].addEventListener('mousemove', this.mouseMoveFn)
    // 監聽手指離開事件
    document.getElementsByTagName('html')[0].addEventListener('mouseup', this.moseUpFn)
}

2. 編寫手指滑動的事件和手指離開的事件

mousemove事件

首先判斷是否觸發拖動狀態,然后計算拖動的距離和模塊距離，實時賦值

//驗證成功函數
mouseMoveFn(e){
    if(this.mouseMoveStata){
        let width=e.clientX - this.beginClientX
        if(width > 0 && width <=this.maxwidth) {
            document.getElementsByClassName('handler')[0].style.left=width + 'px'
            document.getElementsByClassName('drag_bg')[0].style.width=width + 'px'
        }else if(width > this.maxwidth) this.successFunction()
    }
},

mouseup事件

把拖動狀態改成false，并且把滑塊移到對應的手指落下位置上

moseUpFn(e) {
    this.mouseMoveState=!1                        // 修改狀態
    const width=e.clientX - this.beginClientX     // 計算獲取寬度
    if(width < this.maxwidth) {                     // 當寬度小于模塊的寬度時，賦值
        document.getElementsByClassName('handler')[0].style.left=0 + 'px'
        document.getElementsByClassName('drag_bg')[0].style.width=0 + 'px'
    }
}

在上面html部分的handler塊里，定義了mousedown事件(mousedownFn($event))
需要阻止文件選中等瀏覽器默認行為，并把觸發拖動狀態這個閾值打開，記錄手指移動的距離

mousedownFn:function (e) {
    e.preventDefault && e.preventDefault()   // 阻止文字選中等 瀏覽器默認事件
    this.mouseMoveStata=true               // 把觸發拖動狀態這個閾值打開
    this.beginClientX=e.clientX            // 記錄手指移動的距離
},

至此，功能就完成了。。

完整的JS代碼如下

<script>
    export default {
        data(){
            return {
                beginClientX:0,           /*距離屏幕左端距離*/
                mouseMoveStata:false,     /*觸發拖動狀態  判斷*/
                maxwidth:'',               /*拖動最大寬度，依據滑塊寬度算出來的*/
                confirmWords:'拖動滑塊驗證',   /*滑塊文字*/
                confirmSuccess:false           /*驗證成功判斷*/
            }
        },
        mounted(){
            this.maxwidth=this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth
            document.getElementsByTagName('html')[0].addEventListener('mousemove',this.mouseMoveFn)
            document.getElementsByTagName('html')[0].addEventListener('mouseup',this.moseUpFn)
        },
        methods: {
            mousedownFn:function (e) {
                if(!this.confirmSuccess){
                    e.preventDefault && e.preventDefault()   //阻止文字選中等 瀏覽器默認事件
                    this.mouseMoveStata=true
                    this.beginClientX=e.clientX
                }
            },
            //mousedoen 事件
            successFunction(){
                this.confirmSuccess=true
                this.confirmWords='驗證通過'
                this.$emit('onValidation', true)
                if(window.addEventListener){
                    document.getElementsByTagName('html')[0].removeEventListener('mousemove',this.mouseMoveFn)
                    document.getElementsByTagName('html')[0].removeEventListener('mouseup',this.moseUpFn)
                }else document.getElementsByTagName('html')[0].removeEventListener('mouseup',()=>{})
                document.getElementsByClassName('drag_text')[0].style.color='#fff'
                document.getElementsByClassName('handler')[0].style.left=this.maxwidth + 'px'
                document.getElementsByClassName('drag_bg')[0].style.width=this.maxwidth + 'px'
            },
            //驗證成功函數
            mouseMoveFn(e){
                if(this.mouseMoveStata){
                    let width=e.clientX - this.beginClientX
                    if(width > 0 && width <=this.maxwidth) {
                        document.getElementsByClassName('handler')[0].style.left=width + 'px'
                        document.getElementsByClassName('drag_bg')[0].style.width=width + 'px'
                    }else if(width > this.maxwidth) this.successFunction()
                }
            },
            //mousemove事件
            moseUpFn(e){
                this.mouseMoveStata=false
                var width=e.clientX - this.beginClientX
                if(width<this.maxwidth){
                    document.getElementsByClassName('handler')[0].style.left=0 + 'px'
                    document.getElementsByClassName('drag_bg')[0].style.width=0 + 'px'
                }
            }
        }
    }
</script>

最后最后：

公眾號：小何成長，佛系更文，都是自己曾經踩過的坑或者是學到的東西
有興趣的小伙伴歡迎關注我哦，我是：何小玍。大家一起進步鴨

HTML+CSS3+JS創意設計——打造炫酷滑動登錄頁面

**引言：探索交互之美**

在Web開發的世界里，優秀的用戶體驗往往始于一個精心設計的登錄界面。HTML5、CSS3以及JavaScript的結合讓我們能夠創造出極具創意與個性化的滑動登錄頁面，讓用戶在首次接觸應用時就能留下深刻印象。本篇文章將詳細介紹如何利用基礎的HTML+CSS3+JS技術，從零開始打造一款令人眼前一亮的滑動登錄頁面，并通過詳細的代碼實例解析，帶領您領略前端交互設計的魅力。

---

### **一、搭建基礎HTML結構**

**標題：** 構建骨骼——登錄表單的基礎布局

首先，我們需要構建一個簡潔明了的HTML結構，包括用戶名輸入框、密碼輸入框、登錄按鈕以及可選的注冊鏈接。為了實現滑動效果，我們還將引入一個容器元素來包裹整個登錄區域。

```html

<!DOCTYPE html>

<head>

<title>滑動登錄頁面</title>

</head>

<body>

</form>

</div>

</body>

</html>

```

---

### **二、CSS3魔法——樣式與動畫**

**標題：** 點綴肌膚——賦予登錄表單靈動之感

接下來，我們將使用CSS3為登錄表單添加樣式，并利用`@keyframes`規則定義滑動動畫效果。同時，我們還需要保證登錄表單在不同設備上具有良好的響應式布局。

```css

/* styles.css */

body {

margin: 0;

background-color: #f0f0f0;

}

#login-slider {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 300px;

height: auto;

background-color: white;

box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

overflow: hidden;

}

.login-form {

display: flex;

flex-direction: column;

padding: 20px;

animation: slideIn 1s ease-in-out forwards;

}

/* 定義滑動動畫 */

@keyframes slideIn {

0% {

transform: translateY(100%);

}

100% {

transform: translateY(0);

}

/* 登錄表單元素樣式 */

input[type="text"],

input[type="password"] {

margin-bottom: 10px;

padding: 10px;

border: none;

border-radius: 5px;

}

button {

cursor: pointer;

background-color: #007bff;

color: white;

padding: 10px 20px;

border: none;

border-radius: 5px;

text-transform: uppercase;

font-weight: bold;

}

/* 響應式布局 */

@media screen and (max-width: 768px) {

#login-slider {

width: 90%;

}

```

---

### **三、JavaScript增強交互**

**標題：** 賦予靈魂——用JavaScript實現滑動觸發與驗證邏輯

現在我們要借助JavaScript來控制登錄表單的滑動行為，例如當用戶點擊某個鏈接或者頁面加載完成后自動觸發滑動動畫。同時，可以增加一些簡單的表單驗證功能。

```javascript

// scripts.js

document.addEventListener('DOMContentLoaded', ()=> {

// 頁面加載完成后執行滑動動畫

const loginSlider=document.getElementById('login-slider');

loginSlider.classList.add('slide-active');

// 表單提交事件處理，此處僅為示例，實際場景下需加入真實驗證邏輯

const form=document.querySelector('.login-form');

form.addEventListener('submit', (event)=> {

event.preventDefault(); // 阻止默認提交行為

const username=form.querySelector('input[type="text"]').value;

const password=form.querySelector('input[type="password"]').value;

// 實現簡單驗證邏輯，如為空檢查

if (!username || !password) {

alert('用戶名和密碼不能為空!');

} else {

// 這里可以替換為真實的登錄請求邏輯

console.log('正在登錄...', username, password);

}

});

```

---

### **四、創意無限——拓展與優化**

**標題：** 持續創新——更多滑動登錄頁面的設計思路與實踐

除了上述基本的滑動登錄形式，還可以進一步豐富設計，比如：

- 添加進度條指示登錄滑動完成度；

- 使用CSS變量實現自定義主題切換；

- 結合SVG圖標增加視覺吸引力；

- 通過IntersectionObserver API實現視口可見時自動滑動；

- 配合AJAX技術實現實時驗證和無刷新登錄。

---

**結語：**

通過這次對HTML+CSS3+JS組合技術的探索，我們不僅成功地制作出了一個富有創意的滑動登錄頁面，還展現了前端技術在交互設計中的無限可能性。學習并靈活運用這些基礎知識，可以讓您的Web應用更加生動有趣，從而更好地吸引和留住用戶。持續關注前端技術的最新發展，不斷挑戰自我，用代碼書寫更美好的Web世界。

在線咨詢

上一篇：Wordpress建站教程：文章顯示字數和閱讀時間的
下一篇：NET Core 中實現 PDF 的加載與顯示

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商