轮播图的内部原理，这就涉及到简单的算法

曾经终败给现在 2022-12-07 01:24 93阅读 0赞

### 目录 ###

*  导读
 *  涉及的框架
 *  页面设计
 *  js脚本
 *  达到的效果

# 导读 #

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

![在这里插入图片描述][d3a64bacaaefe75f72dd82bd1f91af2b.png_pic_center]

今天，应产品经理的要求，当我们点击左按钮时，上下都显示第六张图片；当我们点击右按钮时，上下读显示第-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)

# 达到的效果 #

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

![在这里插入图片描述][5e4e3d7bc9a3fb49c442ff8c1b23840e.png_pic_center]

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

\*当鼠标滑过下面的小图时，上面的大图也会随着改变。  
![在这里插入图片描述][2675d283fc4821f33dcd99586e3f0bdf.png_pic_center]

[Link 1]: https://gitee.com/zbone/imgslide
[d3a64bacaaefe75f72dd82bd1f91af2b.png_pic_center]: /images/20221123/d5b5a6598a184091be46d3513a440aa1.png
[5e4e3d7bc9a3fb49c442ff8c1b23840e.png_pic_center]: /images/20221123/22f024a4cc7f42d9b7c47848407a7370.png
[2675d283fc4821f33dcd99586e3f0bdf.png_pic_center]: /images/20221123/b60f3c0658fb48af944683996b5cf890.png