圖片滑動的內部原理，這就涉及到簡單的算法

時間 2019-12-07

標籤圖片滑動內部原理涉及簡單算法简体版

原文原文鏈接

導讀

項目已上傳到個人碼雲，若是有須要的，能夠自行下載：項目原碼javascript

今天，應產品經理的要求，當咱們點擊左按鈕時，上下都顯示第六張圖片；當咱們點擊右按鈕時，上下讀顯示第-1張圖片。css

涉及的框架

你能夠將項目down下來，使用 webstorm或HBuilder打開。
使用JQuery將靜態的HTML變得有靈魂。
使用vue.js實現數據的雙向綁定
使用bootstrap來美化靜態頁面
使用layui的更美地彈出信息，好比已經達到最後一張了,沒法左移

頁面設計

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>圖片的滑動</title>
    
        <link href="../css/bootstrap.css" rel="stylesheet">
        <link href="../css/bootstrap.min.css" rel="stylesheet">
        <link href="../css/layer.css" rel="stylesheet">
        <link href="../css/code.css" rel="stylesheet">
    
        <script src="../js/jQuery.js" type="text/javascript"></script>
        <script src="../js/bootstrap.js" type="text/javascript"></script>
        <script src="../js/bootstrap.min.js" type="text/javascript"></script>
        <script src="../js/vue.js" type="text/javascript"></script>
        <script src="../js/layui.js" type="text/javascript"></script>
        <script src="../js/layui.all.js" type="text/javascript"></script>
        <script src="../js/imgSlide.js" type="text/javascript"></script>
    
    </head>
    <body>
        <h2 style="width: 100%;text-align: center;margin-top: 20px">圖片移動</h2>
        <div class="containsImg">
            <div class="container" style="width:36%;height: 400px;position: relative;margin: 1% 32%;border-radius: 5px  ">
                <img :src="upImg.paths" :title="upImg.name" class="img-rounded" style="width: 100%;height: 100%;">
            </div>
            <div class="container" style="width:36%;height: 90px;position: relative;margin: 0 32%;border-radius: 5px  ">
                <img src="../imgs/left.png" class="img-rounded" onclick="fns.toLeft()" style="width: 6%;height: 100%;margin-right: 2%;float: left;">
                <img v-for="it in images" :src="it.paths" :title="it.name" onclick="fns.toUp(this)" onmouseover="fns.toUp(this)" class="img-rounded"
                     style="width: 16%;height: 100%;margin-right: 1%;float: left;">
                <img src="../imgs/right.png" class="img-rounded" onclick="fns.toRight()" style="width: 6%;height: 100%;float: left;margin-left: 1%">
            </div>
        </div>
    </body>
</html>

js頁面

/**
 * @author zby
 * @description 圖片移動
 */
/**
 * 自調用函數
 *      函數表達式能夠 "自調用"。
 *      自調用表達式會自動調用。
 *      若是表達式後面緊跟 () ，則會自動調用。
 *      不能自調用聲明的函數。
 *      經過添加括號，來講明它是一個函數表達式：
 *      (function () {
 *          var x = "Hello!!";      // 我將調用本身
 *       })();
 */
(function (document, window, $) {
    'use strict';
    var vm = {}, length = 5;
    var imgSrcs = new Array();
    var layer = {}

    /**
     * jQuery信息初始化
     */
    $(function () {

        var fns = {
            /**
             * 設計思路，圖片左移
             * 好比有六張圖片，首先展現1,5折五張圖片，向左移動一次，展現2,6張圖片，以此類推。。。
             */
            toLeft: function () {
                if (imgSrcs.length > 5) {
                    if (length < imgSrcs.length) {
                        length++;
                        vm.images = imgSrcs;
                        vm.images = vm.images.slice(length - 5, length);
                        //下標減1
                        vm.upImg = imgSrcs[length - 1];
                    } else {
                        length = imgSrcs.length;
                        layer.msg("已經達到最後一張了,沒法左移", {time: 800});
                    }
                } else {
                    layer.msg("小圖已所有展現,沒法左移", {time: 800});
                }
            },
            /**
             *設計思路，圖片右移
             *好比有六張圖片，首先展現2,6折五張圖片，向右移動一次，展現1,5張圖片，以此類推。。。
             */
            toRight: function () {
                if (imgSrcs.length > 5) {
                    if (length > 5) {
                        length--;
                        vm.images = imgSrcs;
                        vm.images = vm.images.slice(length - 5, length);
                        //下標減5
                        vm.upImg = imgSrcs[length - 5];
                    } else {
                        length = 5;
                        layer.msg("已經達到第一張了,沒法右移", {time: 800});
                    }
                } else {
                    layer.msg("小圖片已所有展現，沒法右移", {time: 800});
                }
            },
            toUp: function (me) {
                vm.upImg = {
                    paths: $(me).attr("src"),
                    name: $(me).attr("title")
                }
            }
        }

        /**
         * 變量、方法提高，也就是說，能夠在定義以前使用該變量和方法
         */
        init();

        //變量升級爲window對象,fns是局部變量，將其提高爲全局變量，即Windows變量
        //全局變量可應用於頁面上的全部腳本。
        window.fns = fns;
    });

    /**
     * 初始化數據
     */
    function init() {
        vm = new Vue({
            el: ".containsImg",
            data: {
                images: {},
                upImg: {}
            },
        })

        imgSrcs.push({paths: "../imgs/1.jpg", name: "清幽竹林"});
        imgSrcs.push({paths: "../imgs/2.jpg", name: "夕陽晚景"});
        imgSrcs.push({paths: "../imgs/3.jpg", name: "山峯湖水"});
        imgSrcs.push({paths: "../imgs/4.jpg", name: "月下蕩人"});
        imgSrcs.push({paths: "../imgs/6.jpg", name: "藍天白雲水悠悠"});
        imgSrcs.push({paths: "../imgs/7.jpg", name: "峭壁臨水"});
        imgSrcs.push({paths: "../imgs/8.jpg", name: "青山綠樹"});
        imgSrcs.push({paths: "../imgs/9.jpg", name: "明亮春景"});
        imgSrcs.push({paths: "../imgs/10.jpg", name: "銀裝素裹"});
        imgSrcs.push({paths: "../imgs/11.jpg", name: "霧凇雪路"});
        imgSrcs.push({paths: "../imgs/12.jpg", name: "柏樹綠水"});

        vm.images = imgSrcs;
        if (vm.images.length > 0) {
            vm.upImg = {
                name: imgSrcs[0].name,
                paths: imgSrcs[0].paths,
            }
            if (vm.images.length > 5) {
                vm.images = vm.images.slice(0, 5);
            }
        }

        layui.use('layer', function () {
            layer = layui.layer;
        });
    }


})(document, window, jQuery)