前端框架layui轮播图自定义上一页，下一页按钮 选项卡+轮播+图片预览viewer.min.js

原创 已于 2022-12-30 17:39:24 修改 · 1.6k 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#前端框架 #layui #javascript #前端
于 2022-03-11 22:19:40 首次发布
这是一个使用HTML、CSS和JavaScript实现的动态图片预览和轮播效果的示例。页面包含左侧的菜单栏和右侧的图片展示区。左侧菜单栏有三个选项，每个选项对应一组不同的图片。点击菜单项会更新右侧的图片轮播，同时展示相应的缩略图。页面还实现了自定义的上一张和下一张按钮控制轮播。此代码适用于前端开发中创建交互式图片浏览功能。

相关资源下载：https://download.csdn.net/download/masterphp/87354930

主页面：

<!DOCTYPE html>
<html>
<head>
    <title>预览</title>
    <meta name="referrer" content="never">
    <meta data-draft-node="block" data-draft-type="table" data-size="normal" data-row-style="normal">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <!--引入资源开始-->
    <link rel="stylesheet" href="css/layui.css">
    <link rel="stylesheet" href="css/viewer.min.css">
    <script src="css/jquery-1.9.0.js"></script>
    <script src="css/viewer.min.js"></script>
    <script src="css/layui.js"></script>
    <!--引入资源结束-->
</head>
<body>

<style>
    .bodys { width: 93%; border: 1px solid #ccc; padding: 3%; height: 29rem;}
    .layui-col-md5 { width: 100% }
    .layui-col-md9 { width: 82%; display: inline-block; margin-left: 3%; vertical-align: top }
    .leftpart { min-height: 5rem; border-right: 1px solid #ccc; text-align: center; }
    .layui-tab-title .layui-this { color: #009688; }
    .layui-tab-title .layui-this:after {border-bottom-color: #009688; border-top-color: white; border-left-color: white; border-right-color: white; }
    .layui-tab-title { border-bottom-style: none }
    .leftpart { width: 14%; display: inline-block }
    .weui-uploader__files {margin-top:.25rem; text-align: center }
    .weui-uploader__file { display: inline-block }
</style>

<div class="layui-fluid" >
    <div class="layui-col-md5">
        <div class="layui-row grid-demo bodys">
            <div class="layui-tab" lay-filter="test1" style="height: 23rem">
                <!--左侧菜单开始-->
                <ul class="layui-tab-title layui-col-md3 leftpart" style="height:20rem">
                    <li class="layui-this" lay-id="1">菜单1</li><br />
                    <li class="" lay-id="2">菜单2</li><br />
                    <li class="" lay-id="3">菜单3</li><br />
                </ul>
                <!--左侧菜单结束-->

                <!--右侧展示图片开始-->
                <div class="layui-col-md9 rightpart" style="height:20rem">

                    <!--展示大图开始-->
                    <div class="layui-carousel" id="test1">
                        <div carousel-item id="items"> </div>
                    </div>
                    <!--展示大图结束-->

                    <!--缩略图开始-->
                    <div style="width:100%;">
                        <div id="file_list">
                            <ul class="weui-uploader__files" id="eui-uploader">
                            </ul>
                        </div>
                    </div>
                    <br/>
                    <!--缩略图结束-->

                    <!--自定义上一页下一页开始-->
                    <div style="text-align:center; margin-top:1rem"> <span id="above" class="layui-btn" >上一张</span> <span id="next"  class="layui-btn">下一张</span> </div>
                    <!--自定义上一页下一页结束-->
                </div>
                <!--右侧展示图片结束-->
            </div>
        </div>
    </div>
</div>

<!--layui框架-->
<script>
    layui.use(['element','carousel'], function(){
        //初始化实例
        var element = layui.element;
        var carousel = layui.carousel;

        //获取宽度
        var height = '10rem;';

        /********************轮播开始*************************/
        //建造实例
        var ins = carousel.render({
                elem: '#test1'
                ,width: '100%' //设置容器宽度
                ,height:'65%'
                ,arrow: 'none' //不显示箭头
                ,indicator:'none'
                ,autoplay:false
            });

        //上一张
        $('#above').click(function(){
            ins.slide('sub');
        });
        //下一张
        $('#next').click(function(){
            ins.slide('add');
        });

        //获取缩略图容器
        var viewer =  new Viewer(document.getElementById('file_list'));

        //获取进入的第一份pic
        function getpic(){
            //根据type来获取数据
            var welfare_file_id = $('.layui-this').attr('lay-id');
            //初始化缩略图容器
            var str ='';
            //初始化大图展示容器
            var files ='';

            //请求数据（数据可以ajax异步渲染）
            if(welfare_file_id ==1){//菜单一
                str += '<div class="layui-this" align="center" ><img style="max-height: '+height+'" src="img/1.png"></div>';
                files += '<li class="weui-uploader__file" style="padding: 0rem 0.2rem;"><img style="height: 30px;" src="img/1.png" class="myui-uploader-pic"></li>';
            }else if(welfare_file_id ==2){//菜单二
                str += '<div class="layui-this" align="center"><img style="max-height: '+height+'" src="img/2.png"></div>';
                str += '<div align="center"><img style="max-height: '+height+'" src="img/3.png"></div>';

                files += '<li class="weui-uploader__file" style="padding: 0rem 0.2rem;"><img style="height: 30px;" src="img/2.png" class="myui-uploader-pic"></li>';
                files += '<li class="weui-uploader__file" style="padding: 0rem 0.2rem;"><img style="height: 30px;" src="img/3.png" class="myui-uploader-pic"></li>';
            }else{//菜单三
                str += '<div class="layui-this" align="center"><img style="max-height: '+height+'" src="img/4.png"></div>';
                str += '<div align="center"><img style="max-height: '+height+'" src="img/5.png"></div>';
                str += '<div align="center"><img style="max-height: '+height+'" src="img/6.png"></div>';

                files += '<li class="weui-uploader__file" style="padding: 0rem 0.2rem;"><img style="height: 30px;" src="img/4.png" class="myui-uploader-pic"></li>';
                files += '<li class="weui-uploader__file" style="padding: 0rem 0.2rem;"><img style="height: 30px;" src="img/5.png" class="myui-uploader-pic"></li>';
                files += '<li class="weui-uploader__file" style="padding: 0rem 0.2rem;"><img style="height: 30px;" src="img/6.png" class="myui-uploader-pic"></li>';
            }

            //数据填充
            $('#items').html(str);
            $('#eui-uploader').html(files);

            //图片渲染
            viewer.update();
            //轮播重载
            ins.reload({
                elem: '#test1'
                ,width: '100%' //设置容器宽度
                ,height:'65%'
                ,arrow: 'none' //不显示箭头
                ,indicator:'none'
                ,autoplay:false
            });
        }

        //初始化数据
        getpic();

        //监听Tab切换，以改变图片
        element.on('tab(test1)', function(){
            var id = this.getAttribute('lay-id');
            //初始化缩略图容器
            var str ='';
            //初始化大图展示容器
            var files ='';

            //请求数据（数据可以ajax异步渲染）
            if(id ==1){//菜单一
                str += '<div class="layui-this" align="center"><img style="max-height: '+height+'" src="img/1.png"></div>';
                files += '<li class="weui-uploader__file" style="padding: 0rem 0.2rem;"><img style="height: 30px;" src="img/1.png" class="myui-uploader-pic"></li>';
            }else if(id ==2){//菜单二
                str += '<div class="layui-this" align="center"><img style="max-height: '+height+'" src="img/2.png"></div>';
                str += '<div align="center"><img style="max-height: '+height+'" src="img/3.png"></div>';

                files += '<li class="weui-uploader__file" style="padding: 0rem 0.2rem;"><img style="height: 30px;" src="img/2.png" class="myui-uploader-pic"></li>';
                files += '<li class="weui-uploader__file" style="padding: 0rem 0.2rem;"><img style="height: 30px;" src="img/3.png" class="myui-uploader-pic"></li>';
            }else{//菜单三
                str += '<div class="layui-this" align="center"><img style="max-height: '+height+'" src="img/4.png"></div>';
                str += '<div align="center"><img style="max-height: '+height+'" src="img/5.png"></div>';
                str += '<div align="center"><img style="max-height: '+height+'" src="img/6.png"></div>';

                files += '<li class="weui-uploader__file" style="padding: 0rem 0.2rem;"><img style="height: 30px;" src="img/4.png" class="myui-uploader-pic"></li>';
                files += '<li class="weui-uploader__file" style="padding: 0rem 0.2rem;"><img style="height: 30px;" src="img/5.png" class="myui-uploader-pic"></li>';
                files += '<li class="weui-uploader__file" style="padding: 0rem 0.2rem;"><img style="height: 30px;" src="img/6.png" class="myui-uploader-pic"></li>';
            }

            //数据填充
            $('#items').html(str);
            $('#eui-uploader').html(files);

            //图片渲染
            viewer.update();

            //轮播重载
            ins.reload({
                elem: '#test1'
                ,width: '100%' //设置容器宽度
                ,height:'65%'
                ,arrow: 'none' //不显示箭头
                ,indicator:'none'
                ,autoplay:false
            });
        });
        /********************轮播结束*************************/
    });
</script>
</body>
</html>
masterphp
关注
Layui点击图片弹框预览的实现方法
10-16
今天小编就为大家分享一篇Layui点击图片弹框预览的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
前端必备技能——轮播图（原生代码+插件）
m0_60264901的博客
12-15 1万+
今天咱就是让你不仅自己能写出轮播图代码，还能用插件插入轮播图
Elementui自定义Pagination 上一页下一页使用按钮
sunnyboysix的博客
12-07 1万+
一 效果图 二 上代码 <el-button size="small" @click="pervious">上一页</el-button> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="current" :page-size="pageSize"
TexasSolver开发者指南：如何贡献代码与扩展功能
最新发布
gitblog_00126的博客
04-23 750
TexasSolver是一款高效的德州扑克GTO求解器，为开发者提供了强大的算法基础和灵活的扩展架构。本文将详细介绍如何参与项目贡献、扩展核心功能以及遵循开发规范，帮助新手快速融入开发流程。 ## 一、环境准备与项目构建 ### 1.1 快速克隆代码仓库 首先通过以下命令获取项目源码： ```bash git clone https://gitcode.com/gh_mirrors/te/T
Layui 修改表格样式
遇见--专栏
12-21 4983
使用Layui做表格显示数据时候，不要自定义表格，但是layui的css已经写好了，这个时候要改layui的css就比较麻烦，本文我总结了layui表格风格更改样式。
layui分页使用
ygy211715的博客
04-18 9731
layui分页使用个人觉得比bootstrap使用来的复杂，这里说一下layui分页的使用方法var currPage =1;var limit =10;laypage.render({ //layui分页         elem:'page',  //分页容器id        count:count,//总条数     curr:currPage,//当前页     limit:limit,...
layui 利用tab选项卡实现：上一步，下一步操作
u014206461的博客
12-22 2427
虽然闲心大大已经关闭layui官网，可他一直是我们jQuery族的骄傲，话不多说了 效果如下： CSS /* 顺序tab */ .order_tab .layui-tab-title{border: none !important;text-align: center;} .order_tab .layui-tab-title li+li{margin: 0 0 0 50px;} .order_tab .layui-tab-title li>span{width: 35px; height: 3.
前端轮播图最简单实现（小白也能学会）
qq_63656102的博客
05-23 4136
最为主要的就是得知道这张图片的宽度，因为每一次移动的距离就是这张图片的宽度，但是宽度我们不能给死，每一张图片的大小是不一样的，所以根据js的clientWidth来获取，这样不管图片是多大都能获得这张图片的大小，第一步的移动距离就完成了，核心部分也就完成了。轮播图大家肯定都不陌生，因为这是前端最为常见的一个功能，现在随着框架和一些插件的兴起，很少人会去原生的去写轮播图，所以今天带大家写一下原生的轮播图来熟悉一下。，主要原因就不细说了，大家应该是都很熟悉的。然后就是选择的定时器，这里一定要用。
LayUI-导航界面以及基础样式设置练习
arvicky的博客
08-06 4152
练习功能 一、布局容器+栅格 1.布局 2.栅格基本使用 3.按键 二、导航界面 1.水平导航+子导航 2.垂直导航 3.边侧导航 使用layUI之前首先要下载LayUI库，因为使用的是LayUI中提供的样式 所以使用前要在head中加载环境，主要加载css和js。加载前先将包导入项目中然后加载 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!--加载LayUI中的css--> &lt
LayUI⑹：分步表单
dawn0718的专栏
04-08 4692
　　在前端的开发中，页面多了让人纠结，也不好组织，在LayUI中有几种解决办法，分步表单就是比较不错的选择，缺点也明显，所有的页面集中在一个页面中，代码量也大。 　　在系统参数维护中，用户提出要一步步选择来维护，这样可以减少操作错误，我使用了LayUI的分步表单来完成。 　　用户的维护操作在一个页面中。 　　代码量有点大了，HTML部分将近180行，JavaScript代码将近500行，为了调试，我还是集中在一个HTML文件中。 　　开始网页界面部分设计得有点复杂，300行，结果因为一个<DI
Layui插件表格下拉框
热门推荐
weixin_44548473的博客
07-06 1万+
开发工具与关键技术： Vs 、Layui插件表格下拉框 作者：木有窝的鸟~小通 撰写时间：2019年7月6日 使用到layui插件的小伙伴可能都会发现，其实在layui插件表格里边添加下拉框或者input标签文本框都是比较复杂的。首先呢，在layui表格里面添加下拉框，在layui表格中就会出现默认的下拉框样式，而这种样式插件原生自带，进而出现了两个下拉框。 1、我们要做的是去除...
layui弹窗点击确定后再执行下一步
Cat_jie的博客
12-06 3976
layui弹窗点击确定后再执行下一步
素材，格式箭头图标，上一页下一页，返回等
04-16
素材，格式箭头图标，上一页下一页，返回等 精选的最好看的。
tab选项卡 ‘上一步‘ ‘下一步形式’
zcy_csdn123的博客
08-22 8199
今天工作遇到个需求，就是在一个页面中用上一步，下一步实现页面内容的转换，这让我一下就想到了tab选项卡，两者很像，只不过用来用来转换内容的不再是上面的标签，而且“上一步”“下一步”这样的button。 公司用的layui 本来想修改一下，但无奈不知道如何阻止框架tab标签的点击事件（如果有知道的大神请告诉我，不想重写框架的JS），所以就照样样式自己写了标签，但没有点击事件。 说下思路： 和ta
layui点击下一步时根据选择判断下一页展示的内容
weixin_46263334的博客
08-17 1199
layui点击下一步时根据选择判断下一页展示的内容 1.下面我们先看效果当我选择图片时下一步展示的勾选项。 2.下面我们先看效果当我选择音频时下一步展示的勾选项。 主要实现在点击下一步的时候进行判断 //html中的代码这里我把所有第二页需要展示的都写在一个div里了分别用audioa和audio为名字typea为整个div的名字 <div class="knowledgeAdd-item typea" data-num="1"> <div class="knowledgeA
【Layui】下拉框正确样式代码
咔咔博客
12-19 1万+
author：咔咔 wechat：fangkangfk &lt;div class="layui-form-item"&gt; &lt;label class="layui-form-label"&gt;类型&lt;/label&gt; &lt;div class="layui-input-inline "&gt;
切换图片（箭头）
m0_49893750的博客
09-10 1212
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ ...
前端入门，我的第一个轮播图
m0_48356361的博客
02-11 199
轮播图
LayUI点击按钮弹出图片预览并且可以左右滑动
Judi_Jie的专栏
06-23 2797
今天项目中需要实现一个需求：将用户上传图片记录以列表的形式展现出来，并且点击操作栏中的查看，弹出图片预览并且可以左右翻看上一张或下一张图片，样式如下： 代码如下： <div id="layer-photos" class="layer-photos-demo" style="display:none"> </div> table.on('tool(dataTable)', function(obj){ var data = obj.data; ...
layui框架实战案例(26)：layui-carousel轮播组件添加多个Echarts图标的效果
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
04-04 1334
在Layui中，使用layui-carousel轮播组件嵌套Echarts图表来实现多个图表的展示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值