導讀
項目已上傳到我的碼雲，如果有需要的，可以自行下載：項目原碼
今天，應產品經理的要求，當我們點擊左按鈕時，上下都顯示第六張圖片；當我們點擊右按鈕時，上下讀顯示第-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)最終達到的效果
- 當我們點擊向左移動時，上面的大圖也會隨着改變；如果達到最後一張了，就提示無法左移。
- 當我們點擊向右移動時，上面的大圖也會隨着改變；如果達到第一張了，就提示無法右移。
*當鼠標滑過下面的小圖時，上面的大圖也會隨着改變。
