图片滑动的内部原理，这就涉及到简单的算法

摘要：涉及的框架你可以将项目下来，使用或打开。当我们点击向右移动时，上面的大图也会随着改变如果达到第一张了，就提示无法右移。当鼠标滑过下面的小图时，上面的大图也会随着改变。

项目已上传到我的码云，如果有需要的，可以自行下载：项目原码

今天，应产品经理的要求，当我们点击左按钮时，上下都显示第六张图片；当我们点击右按钮时，上下读显示第-1张图片。

你可以将项目down下来，使用 webstorm或HBuilder打开。

使用JQuery将静态的HTML变得有灵魂。

使用vue.js实现数据的双向绑定

使用bootstrap来美化静态页面

使用layui的更美地弹出信息，比如已经达到最后一张了,无法左移

    
        
        
    
        
        
        
        
    
        
        
        
        
        
        
        
    
    
    
        
图片移动
        

            

                
            
            

                
                
                
            
        
    

/**
 * @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)

当我们点击向左移动时，上面的大图也会随着改变；如果达到最后一张了，就提示无法左移。

当我们点击向右移动时，上面的大图也会随着改变；如果达到第一张了，就提示无法右移。

*当鼠标滑过下面的小图时，上面的大图也会随着改变。