共计 3919 个字符，预计需要花费 10 分钟才能阅读完成。
导读
项目已上传到我的码云，如果有需要的，可以自行下载：项目原码
今天，应产品经理的要求，当我们点击左按钮时，上下都显示第六张图片；当我们点击右按钮时，上下读显示第 - 1 张图片。
涉及的框架
你可以将项目 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)
最终达到的效果
当我们点击向左移动时，上面的大图也会随着改变；如果达到最后一张了，就提示无法左移。
当我们点击向右移动时，上面的大图也会随着改变；如果达到第一张了，就提示无法右移。
* 当鼠标滑过下面的小图时，上面的大图也会随着改变。
