投稿
  1. 极客之音首页
  2. 技术随笔

使用 html、css、JavaScript 、vue.js、bootstrap、jquery、layui实现轮播图 轮播图实现的内部算法 javascript、js的严格模式 自调用函数的语法

小半 • • 技术随笔 • 阅读 180

导读：本篇文章讲解 使用 html、css、JavaScript 、vue.js、bootstrap、jquery、layui实现轮播图 轮播图实现的内部算法 javascript、js的严格模式 自调用函数的语法，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com

目录

引言

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

项目已上传到我的码云，如果有需要的，可以自行下载：[项目原码]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代码

自调用函数

如果自调用表达式后面紧跟 () ，则会自动调用，但不能自调用声明的函数。

通过添加括号，来说明它是一个自调用(函数)表达式，如下代码：

// 我将调用自己
 (function () {
   var x = "Hello!!";      
 })();

js的严格模式

严格模式的作用

  • 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为。

  • 消除代码运行的一些不安全之处，保证代码运行的安全。

  • 提高编译器效率，增加运行速度。

  • 为未来新版本的Javascript做好铺垫。

严格模式的使用

针对整个脚本文件

将"use strict"放在脚本文件的第一行，则整个脚本都将以”严格模式”运行。

如果这行语句不在第一行，则无效，整个脚本以”正常模式”运行。

如果不同模式的代码文件合并成一个文件，这一点需要特别注意。

(严格地说，只要前面不是产生实际运行结果的语句，”use strict”可以不在第一行，比如直接跟在一个空的分号后面。)

<script>
　　"use strict";
　　console.log("这是严格模式。");
</script>

<script>
　　console.log("这是正常模式。");
　　this is normal script
</script>

上面的代码表示，一个网页中依次有两段Javascript代码。

前一个script标签是严格模式，后一个不是。

针对单个函数

将"use strict"放在函数体的第一行，则整个函数以”严格模式”运行，如下代码：

function strict(){
　　"use strict";
　　return "这是严格模式。";
}

function notStrict() {
　　return "这是正常模式。";
}

脚本文件的变通写法

因为第一种调用方法不利于文件合并，所以更好的做法是，借用第二种方法，将整个脚本文件放在一个立即执行的匿名函数之中。

也就是上文所说在，在调用函数中增加严格模式"use strict";

(function (){
　　"use strict";
　　// some code here
})();

轮播图的代码实现：vue.js+layui+jQuery

/**
 * @author zs
 * @description 图片移动
 */
(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)

达到的效果

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

在这里插入图片描述

  • 当我们点击向右移动时，上面的大图也会随着改变；如果达到第一张了，就提示无法右移。
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pS2qzalw-1600082558054)(/img/bVbpUs0)]

*当鼠标滑过下面的小图时，上面的大图也会随着改变。
在这里插入图片描述

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/99240.html

赞 (0)
小半的头像小半
0 0

相关推荐

极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！