pboot轮播图多图

最新推荐文章于 2024-08-16 19:02:09 发布
最新推荐文章于 2024-08-16 19:02:09 发布
阅读量1.1k 收藏
点赞数
分类专栏： PbootCMS 文章标签： javascript css html
原文链接：https://blog.csdn.net/raik520/article/details/102633227
版权

刚开始做pbootcms的网站，记录一下以备不时之需，也分享给大家，亲测有效，有问题欢迎评论留言

1.修改文件/apps/admin/view/default/content/slide.html

<div class="layui-form-item">
                     <label class="layui-form-label">图片</label>
                     <div class="layui-input-inline">
                     	<input type="text" name="pic" id="pic" required  lay-verify="required" value="{$slide->pic}" placeholder="请上传图片"  class="layui-input">
                     </div>
                     <button type="button" class="layui-btn upload" data-des="pic">
					 	 <i class="layui-icon">&#xe67c;</i>上传图片
					 </button>
					 <div id="pic_box" class="pic">{if([$slide->pic])}<dl><dt><img src="{SITE_DIR}{$slide->pic}" data-url="{$slide->pic}"></dt><dd>删除</dd></dl>{/if}</div>
                </div>


                <div class="layui-form-item">
                     <label class="layui-form-label">图一</label>
                     <div class="layui-input-inline">
                        <input type="text" name="pic1" id="pic1"    value="{$slide->pic1}" placeholder="请上传图片"  class="layui-input">
                     </div>
                     <button type="button" class="layui-btn upload" data-des="pic1">
                         <i class="layui-icon">&#xe67c;</i>上传图片
                     </button>
                     <div id="pic1_box" class="pic1">{if([$slide->pic1])}<dl><dt><img src="{SITE_DIR}{$slide->pic1}" data-url="{$slide->pic1}"></dt><dd>删除</dd></dl>{/if}</div>
                </div>

2、修改css /apps/admin/view/default/css/comm.css

.pic,
.pic1,
.pic2 {
	margin-left: 130px;
}
.pic dl,
.pic1 dl,
.pic2 dl {
	float: left;
	position: relative;
}

.pic dl dd,
.pic1 dl dd,
.pic2 dl dd {
	position: absolute;
	right: 5px;
	top: 5px;
	cursor: pointer;
	background: #666;
	color: #fff;
	padding: 2px;
}

.pic img,
.pic1 img,
.pic2 img {
	max-height: 100px;
	margin: 5px 0;
	margin-right: 5px;
}

3、修改/apps/admin/view/default/js/mylayui.js

  //图片页面删除功能
  $('.pic').on("click",'dl dd',function(){
	  var id=$(this).parents('.pic').attr('id');
	  var url=$(this).siblings('dt').find('img').data('url');
	  var input=$('#'+id.replace('_box',''));
	  var value = input.val();
	  value = value.replace(url,'');
	  value = value.replace(/^,/, '');
	  value = value.replace(/,$/, '');
	  value = value.replace(/,,/, ',');
      input.val(value);
	  $(this).parents('dl').remove();
  });

    //图片1页面删除功能
  $('.pic1').on("click",'dl dd',function(){
	  var id=$(this).parents('.pic1').attr('id');
	  var url=$(this).siblings('dt').find('img').data('url');
	  var input=$('#'+id.replace('_box',''));
	  var value = input.val();
	  value = value.replace(url,'');
	  value = value.replace(/^,/, '');
	  value = value.replace(/,$/, '');
	  value = value.replace(/,,/, ',');
      input.val(value);
	  $(this).parents('dl').remove();
  });

4、修改/apps/admin/controller/content/SlideController.php

    // 轮播图增加
    public function add()
    {
        if ($_POST) {
            // 获取数据
            $gid = post('gid', 'int');
            $pic = post('pic');
            $pic1 = post('pic1');
            $pic2 = post('pic2');
            $link = post('link');
            $title = post('title');
            $subtitle = post('subtitle');
            $sorting = post('sorting', 'int');
            
            if (! $gid) {
                $gid = $this->model->getMaxGid() + 1;
            }
            
            if (! $pic) {
                alert_back('图片不能为空！');
            }
            
            // 构建数据
            $data = array(
                'acode' => session('acode'),
                'gid' => $gid,
                'pic' => $pic,
                'pic1' => $pic1,
                'pic2' => $pic2,
                'link' => $link,
                'title' => $title,
                'subtitle' => $subtitle,
                'sorting' => $sorting,
                'create_user' => session('username'),
                'update_user' => session('username')
            );
            
            // 执行添加
            if ($this->model->addSlide($data)) {
                $this->log('新增轮播图成功！');
                if (! ! $backurl = get('backurl')) {
                    success('新增成功！', base64_decode($backurl));
                } else {
                    success('新增成功！', url('/admin/Slide/index'));
                }
            } else {
                $this->log('新增轮播图失败！');
                error('新增失败！', - 1);
            }
        }
    }

    // 轮播图删除
    public function del()
    {
        if (! $id = get('id', 'int')) {
            error('传递的参数值错误！', - 1);
        }
        
        if ($this->model->delSlide($id)) {
            $this->log('删除轮播图' . $id . '成功！');
            success('删除成功！', - 1);
        } else {
            $this->log('删除轮播图' . $id . '失败！');
            error('删除失败！', - 1);
        }
    }

    // 轮播图修改
    public function mod()
    {
        if (! ! $submit = post('submit')) {
            switch ($submit) {
                case 'sorting': // 修改列表排序
                    $listall = post('listall');
                    if ($listall) {
                        $sorting = post('sorting');
                        foreach ($listall as $key => $value) {
                            if ($sorting[$key] === '' || ! is_numeric($sorting[$key]))
                                $sorting[$key] = 255;
                            $this->model->modSlide($value, "sorting=" . $sorting[$key]);
                        }
                        $this->log('批量修改轮播图排序成功！');
                        success('修改成功！', - 1);
                    } else {
                        alert_back('排序失败，无任何内容！');
                    }
                    break;
            }
        }
        
        if (! $id = get('id', 'int')) {
            error('传递的参数值错误！', - 1);
        }
        
        // 单独修改状态
        if (($field = get('field', 'var')) && ! is_null($value = get('value', 'var'))) {
            if ($this->model->modSlide($id, "$field='$value',update_user='" . session('username') . "'")) {
                location(- 1);
            } else {
                alert_back('修改失败！');
            }
        }
        
        // 修改操作
        if ($_POST) {
            
            // 获取数据
            $gid = post('gid', 'int');
            $pic = post('pic');
            $pic1 = post('pic1');
            $pic2 = post('pic2');
            $link = post('link');
            $title = post('title');
            $subtitle = post('subtitle');
            $sorting = post('sorting', 'int');
            
            if (! $gid) {
                $gid = $this->model->getMaxGid() + 1;
            }
            
            if (! $pic) {
                alert_back('图片不能为空！');
            }
            
            // 构建数据
            $data = array(
                'gid' => $gid,
                'pic' => $pic,
                'pic1' => $pic1,
                'pic2' => $pic2,
                'link' => $link,
                'title' => $title,
                'subtitle' => $subtitle,
                'sorting' => $sorting,
                'update_user' => session('username')
            );
            
            // 执行添加
            if ($this->model->modSlide($id, $data)) {
                $this->log('修改轮播图' . $id . '成功！');
                if (! ! $backurl = get('backurl')) {
                    success('修改成功！', base64_decode($backurl));
                } else {
                    success('修改成功！', url('/admin/Slide/index'));
                }
            } else {
                location(- 1);
            }
        } else {
            // 调取修改内容
            $this->assign('mod', true);
            if (! $result = $this->model->getSlide($id)) {
                error('编辑的内容已经不存在！', - 1);
            }
            $this->assign('gids', $this->model->getGid());
            $this->assign('slide', $result);
            $this->display('content/slide.html');
        }
    }
}

4.数据库添加字段（可以使用DB Browser for SQLite 编辑器）
在这里插入图片描述
alter table ay_slide add pic1 int;
update ay_slide set pic1 = pic;
alter table ay_slide add pic2 int;
update ay_slide set pic2 = pic;

5.修改文件/apps/home/controller/ParserController.php

                            case 'i':
                                $one_html = str_replace($matches2[0][$j], $this->adjustLabelData($params, $key), $one_html);
                                break;
                            case 'src':
                                if ($value->pic) {
                                    if (! preg_match('/^http/', $value->pic)) {
                                        $one_html = str_replace($matches2[0][$j], $this->adjustLabelData($params, SITE_DIR . $value->pic), $one_html);
                                    } else {
                                        $one_html = str_replace($matches2[0][$j], $this->adjustLabelData($params, $value->pic), $one_html);
                                    }
                                } else {
                                    $one_html = str_replace($matches2[0][$j], '', $one_html);
                                }
                                break;

                                case 'src1':
                                if ($value->pic1) {
                                    if (! preg_match('/^http/', $value->pic1)) {
                                        $one_html = str_replace($matches2[0][$j], $this->adjustLabelData($params, SITE_DIR . $value->pic1), $one_html);
                                    } else {
                                        $one_html = str_replace($matches2[0][$j], $this->adjustLabelData($params, $value->pic1), $one_html);
                                    }
                                } else {
                                    $one_html = str_replace($matches2[0][$j], '', $one_html);
                                }
                                break;
夏末有时
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
pboot素材内容.rar
04-06
图片资源则是视觉设计的关键，包括logo、背景图、按钮图等。 在实际应用中，理解并掌握Pboot素材的使用方法至关重要。你可以根据项目需求，选择合适的模板或元素，通过PbootCMS后台管理界面进行上传和设置。例如，...
pbootcms模板分类个人图片相册wap版网站源码
07-05
模板介绍 pbootcms模板个人写真图片相册自适应网站源码，语言编码：UTF-8，模板颜色：黑白，适用站点：图片、相册、写真。 安装教程：http://88hzy.cn/1184.html 功能特点 手工书写DIV+CSS、代码精简无冗余，自适应结构，全球先进技术，高端视觉体验。 SEO框架布局，栏目及文章页均可独立设置标题/关键词/描述。 附带测试数据、安装教程、入门教程、安全及备份教程，后台直接修改联系方式、传真、邮箱、地址等，修改更加方便。 配置需求 语言程序：PHP + SQLite，前端规范：html+css+jQuery，设备支持：PC端+手机端。 程序运行环境：linux+nginx/ linux+apache / windows + iis(支持php5.3+) / 其他支持php5.3+环境。
网站源码数码产品pbootcms模板网页设计主题
网站模板下载（www.91084.com）
07-11 524
我们把它制作成模板收录在格展网络中，此次设计的数码产品网站主题模板，我们注重了用户体验的多样性，确保各类浏览器都能流畅访问。我们坚信，通过这款设计，能够为大家带来更加便捷的数码产品信息获取体验。数码产品网站主题网站设计主要聚焦于展示各种数码产品，提供详细的产品信息、购买渠道以及用户评价和互动功能。通过以上设计元素和功能，数码产品网站能够为用户提供一个全面、详细、安全的数码产品购买平台，满足用户的购物需求，提升用户体验和满意度。我很高兴向大家介绍我刚刚制作的数码产品的网站设计。数码产品的网站设计分享。
bootStrap轮播图只能存在一个问题解决
LUSHIJIE__的博客
10-24 461
转到他人博客 解决方法: 修改轮播动画的id属性 id="myCarousel"改为 id=“myCarousela” 修改ol li 内的data-target属性为你修改后的id 全部的data-target="#myCarousel" 改为 data-target="#myCarousela" 修改a标签的href属性为#修改后的id 全部的href="#myCarousel"改为href="#myCarousela" ...
PowerApps 轮播图
lisong315389的博客
08-21 223
我们都知道通常都是用JS写轮播界面，虽然Power Apps里面没有完整的轮播图控件但也是可以做的，而且看起来也不输JS写出来的轮播图。
pbootcms后台添加设置缩略图和多图按钮功能
weixin_43878963的博客
11-13 455
后台添加文章时，加了图片，缩略图会自动提取，但是呢，前端文章列表中，有些想要展现缩略图，有些不想要展现。pbootcms的缩略图系统默认是自动提取的，假如有些文章想要缩略，有些又不要想要怎么处理呢？一种是不添加缩略图，这样操作比较麻烦的是需要回过去修改一下，就是将缩略图删除再保存。这样就完美解决了缩略图设置功能了，希望可以帮助到大家！第二种方式是在后台发文章时就添加设置功能！在代码136/468行处添加。在代码96/428行。
phpcms多图片上传字段的调用方法
verytxt的专栏
09-06 1945
{loop $array_images $k $r} {/loop} 在文章模型里新建了一个 多图片 的字段.要在内容页调用出来. 使用V9的GET方式直接跟SQL语句，因为上传组图图片信息保存在v9_attachment中，而ID住处则要通过v9_attachment_index表来获取 其中还带有标题提示信息, 下面就有一个表之间的子查录过程：
个人写真图片相册pbootcms网站模板{内附安装教程}
05-31
源码简介：语言编码：UTF-8，模板颜色：黑白，适用站点：图片、相册、写真。 模板特点：1、手工书写DIV+CSS、代码精简无冗余。2、自适应结构，全球先进技术，高端视觉体验。3、SEO框架布局，栏目及文章页均可独立...
PBoot免费插件-免费采集伪原创发布推送插件
02-26
《PBoot免费插件：一站式SEO优化解决方案》 在当今互联网时代，网站的搜索引擎优化（SEO）至关重要，它直接影响到网站的可见度和流量。PBoot免费插件正是为了解决这一问题而生，它是一款集关键词采集、文章伪原创、...
免费PBoot插件-免费采集伪原创发布推送插件
02-24
《免费PBoot插件：SEO优化与自动化利器》 PBoot插件，作为一个深受开发者和网站管理员喜爱的工具，尤其以其免费版本，更是受到了广泛关注。免费PBoot插件旨在为用户提供一套全面的SEO（搜索引擎优化）解决方案，集...
pboot采集插件免费下载自动采集发布
02-14
pboot采集插件,免费pboot采集插件,免费下载,全自动采集伪原创发布推送插件
Pbootcms字段为空调用另一个字段标签代码
网站模板下载（www.91084.com）
05-12 342
如果[list:ext_gezhancn]自定义标签为空则去调用[list:ico]这个图片标签。[list:ext_gezhancn]为自定义标签。
layui实现多图片上传以及视频上传，包括预览和删除功能
DEFT1998的博客
08-14 3013
layui实现多图片上传以及视频上传，包括预览和删除功能1.html代码2.js代码3.后台代码4.实现效果 1.html代码 <!--多图上传--> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;"> <legend>上传图片</legend> </fieldset> <div class="layui-uplo
pbootcms自动配图出图插件
weixin_45788869的博客
04-23 1042
pbootcms文章无图自动出图配图插件是一款非常实用和高效的插件，可以大大提高文章的可读性和吸引力，节省时间和精力，提高网站的 SEO，增加互动性，对于网站的内容创作和推广都非常有帮助。3、提高网站的 SEO：图片是网站内容中非常重要的一部分，可以丰富网站的内容和形式，吸引搜索引擎的注意力，提高网站的搜索排名和流量。1、提高文章的可读性和吸引力：插入图片可以丰富文章的内容和形式，增强读者的阅读体验和吸引力，提高文章的点击率和转化率。8、文章有图片时候，不进行配图操作，文章无图片会自动配图出图。
PHPCMS V9手机移动端（支持单图和多图）图片上传，（PHPCMS V9前台使用layui的上传组件代替默认的SWFupload上传图片）
大海哪蓝
11-02 2194
默认phpcms的上传 图片使用的是swfupload，导致手机移动端上传图片无法使用。这里我们使用layui的上传组件来使其支持手机移动端（支持单图和多图）图片上传，效果图如下：   实现步骤： 一、 打开phpcms\modules\attachment\attachments.php文件，新增如下函数： public function imgupload() { pc_base:...
Pbootcms网站后台管理系统登录界面描述/LOGO/背景图/介绍修改教程
weixin_43878963的博客
05-17 2425
Pbootcms网站后台管理系统登录界面标题/描述/LOGO图/介绍修改教程。如图所示，我们看到的信息都是有关pbootcms的信息，那么我们如何来修改呢？打开 网站根目录/apps/admin/view/default 文件夹，打开 index.html 文件。将文件夹中的logo.jpg 改为自己想要的图片即可。pbootcms网站管理登录后台界面的“高效、简洁、强悍的PHP企业网站管理系统”删除办法。找到 网站根目录/apps/admin/view/default/images 文件夹。
微信小程序骨架屏
最新发布
djjdjdjdjddjjdjd的博客
08-16 184
⑤ 在onLoad 中页面加载前定义 isLoading.value=true, 在加载完后定义 isLoading.value=false.骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容。① 在相应微信小程序页面右下角点生成骨架屏，左侧小程序目录会自动生成 .wxml 、.wxss 文件，⑥ 在生成骨架屏页面中 v-if="isLoading" v-else 定义显示与隐藏。
pboot的标签有什么作用
03-30
pboot（Python Bootcamp）是一个Python编程的基础课程，它的标签主要用于帮助识别和分类与该课程相关的内容和资源。通过标签，用户可以更方便地找到与pboot相关的文章、问答、教程、代码等信息，从而更好地学习和应用Python编程技能。同时，标签也有助于建立社区，将对Python编程感兴趣的人们聚集在一起，分享知识、交流经验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值