帝国cms应用bootstrap幻灯片carousel
时间：2023年11月07日
/来源：网络
/编辑：佚名
bootstrap是比较成熟的自适应网站框架，大章力现在做的所有网站前端都是基于bootstrap，后端系统基于帝国cms系统，今天就来说下，最近的应用如何让bootstrap的幻灯片carousel应用于帝国cms系统中。
下面是bootstrap的基本代码
<div id="carouselExampleIndicators" class="carousel slide " data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" class="s1 active" data-bs-slide-to="0" aria-label="Slide 0">
</button>
<button type="button" data-bs-target="#carouselExampleIndicators" class="s1" data-bs-slide-to="1" aria-label="Slide 1">
</button>
<button type="button" data-bs-target="#carouselExampleIndicators" class="s1" data-bs-slide-to="2" aria-label="Slide 2">
</button>
<button type="button" data-bs-target="#carouselExampleIndicators" class="s1" data-bs-slide-to="3" aria-label="Slide 3">
</button>
<button type="button" data-bs-target="#carouselExampleIndicators" class="s1" data-bs-slide-to="4" aria-label="Slide 4">
</button>
</div>
<div class="carousel-inner text-center">
<div class="carousel-item active">
<img src="/d/file/p/2023/05-17/62e3d755d82a9e2ccb2e10b1fb726fec.jpg" alt="">
</div>
<div class="carousel-item">
<img src="/d/file/p/2023/05-17/6d2658a871afbdd574996636e00f7cad.jpg" alt="">
</div>
<div class="carousel-item">
<img src="/d/file/p/2023/05-17/ea5679cfb92b87eed9d48a55cd877054.jpg" alt="">
</div>
<div class="carousel-item">
<img src="/d/file/p/2023/05-17/f41f92eda9969e99b93779e5791c0e02.jpg" alt="">
</div>
<div class="carousel-item">
<img src="/d/file/p/2023/05-17/5938e364a0edc2b9781831022b62f84d.jpg" alt="">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true">
</span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true">
</span>
<span class="visually-hidden">Next</span>
</button>
</div>
我们要蒋帝国cms程序内容嵌入到循环内容里
首先在模型中新建一个字段，名称自己取，我将他取名为morepic字段， 使用的字段类型是MEDIUMTEXT，在下面的输入表单替换html代码输入
<script>
function dopicadd()
{var i;
var str="";
var oldi=0;
var j=0;
oldi=parseInt(document.add.morepicnum.value);
for(i=1;i<=document.add.downmorepicnum.value;i++)
{
j=i+oldi;
str=str+"<tr><td width=7%><div align=center>"+j+"</div></td><td width=33%><div align=center><input name=msmallpic[] type=text size=28 id=msmallpic"+j+" ondblclick=SpOpenChFile(1,'msmallpic"+j+"')><br><input type=file name=msmallpfile[] size=15></div></td><td width=30%><div align=center><input name=mbigpic[] type=text size=28 id=mbigpic"+j+" ondblclick=SpOpenChFile(1,'mbigpic"+j+"')><br><input type=file name=mbigpfile[] size=15></div></td><td width=30%><div align=center><input name=mpicname[] type=text></div></td></tr>";
}
document.getElementById("addpicdown").innerHTML="<table width='100%' border=0 cellspacing=1 cellpadding=3>"+str+"</table>";
}
</script>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="25">
图片地址前缀:
<input name="mpicurl_qz" type="text" id="mpicurl_qz">
<input type="checkbox" name="msavepic" value="1">远程保存 <input type="checkbox" name="mcreatespic" value="1" onclick="if(this.checked){setmcreatespic.style.display='';}else{setmcreatespic.style.display='none';}">生成缩图
<span id="setmcreatespic" style="display:none">：<input type=text name="mcreatespicwidth" size=4 value="<?=$public_r[spicwidth]?>">*<input type=text name="mcreatespicheight" size=4 value="<?=$public_r[spicheight]?>">(宽*高)</span>
<?php
if(TranmoreIsOpen())
{
?>
<input type="button" name="Submit" value="多选上传" onclick="window.open('ecmseditor/tranmore/tranmore.php?type=1&classid=<?=$classid?>&filepass=<?=$filepass?>&infoid=<?=$id?>&modtype=0&sinfo=1&ecmsdo=ecmstmmorepic&tranfrom=2<?=$ecms_hashur['ehref']?>&oldmorepicnum='+document.add.morepicnum.value,'ecmstmpage','width=700,height=550,scrollbars=yes');">
<?php
}
?>
</td>
</tr>
<tr>
<td><table width="100%" border=0 align=center cellpadding=3 cellspacing=1>
<tr bgcolor="#DBEAF5">
<td width="7%"><div align=center>编号</div></td>
<td width="33%"><div align=center>缩图 <font color="#666666">(双击选择)</font></div></td>
<td width="30%"><div align=center>大图 <font color="#666666">(双击选择)</font></div></td>
<td width="30%"><div align=center>图片说明</div></td>
</tr>
</table></td>
</tr>
<tr>
<td id=defmorepicid>
<?php
if($ecmsfirstpost==1)
{
?>
<table width='100%' border=0 align=center cellpadding=3 cellspacing=1>
<?php
$morepicnum=3;
for($mppathi=1;$mppathi<=$morepicnum;$mppathi++)
{
?>
<tr>
<td width='7%'><div align=center><?=$mppathi?></div></td>
<td width='33%'><div align=center>
<input name=msmallpic[] type=text id='msmallpic<?=$mppathi?>' size=28 ondblclick="SpOpenChFile(1,'msmallpic<?=$mppathi?>');">
<br><input type=file name=msmallpfile[] size=15>
</div></td>
<td width='30%'><div align=center>
<input name=mbigpic[] type=text id='mbigpic<?=$mppathi?>' size=28 ondblclick="SpOpenChFile(1,'mbigpic<?=$mppathi?>');">
<br><input type=file name=mbigpfile[] size=15>
</div></td>
<td width='30%'><div align=center>
<input name=mpicname[] type=text id='mpicname<?=$mppathi?>'>
</div></td>
</tr>
<?php
}
?>
</table>
<?php
}
else
{
$morepicpath="";
$morepicnum=0;
if($r[morepic])
{
$r[morepic]=stripSlashes($r[morepic]);
//地址
$j=0;
$pd_record=explode("\r\n",$r[morepic]);
for($i=0;$i<count($pd_record);$i++)
{
$j=$i+1;
$pd_field=explode("::::::",$pd_record[$i]);
$morepicpath.="<tr>
<td width='7%'><div align=center>".$j."</div></td>
<td width='33%'><div align=center>
<input name=msmallpic[] type=text value='".$pd_field[0]."' size=28 id=msmallpic".$j." ondblclick=\"SpOpenChFile(1,'msmallpic".$j."');\">
<br><input type=file name=msmallpfile[] size=15>
</div></td>
<td width='30%'><div align=center>
<input name=mbigpic[] type=text value='".$pd_field[1]."' size=28 id=mbigpic".$j." ondblclick=\"SpOpenChFile(1,'mbigpic".$j."');\">
<br><input type=file name=mbigpfile[] size=15>
</div></td>
<td width='30%'><div align=center>
<input name=mpicname[] type=text value='".$pd_field[2]."'><input type=hidden name=mpicid[] value=".$j."><input type=checkbox name=mdelpicid[] value=".$j.">删
</div></td>
</tr>";
}
$morepicnum=$j;
$morepicpath="<table width='100%' border=0 cellspacing=1 cellpadding=3>".$morepicpath."</table>";
}
echo $morepicpath;
}
?>
</td>
</tr>
<tr>
<td height="25">地址扩展数量: <input name="morepicnum" type="hidden" id="morepicnum" value="<?=$morepicnum?>">
<input name="downmorepicnum" type="text" value="1" size="6"> <input type="button" name="Submit5" value="输出地址" onclick="javascript:dopicadd();"></td>
</tr>
<tr>
<td id=addpicdown></td>
</tr>
</table>
下面在新建一个字段用来说明图片循环有几张，我取名为num，字段为字符型0-255字节(VARCHAR)，长度设置为30.
以上在数据库里的设计工作就完成了，下面设计模板了代码了
<button type="button" data-bs-target="#carouselExampleIndicators" class="s1" data-bs-slide-to="0" aria-label="Slide '1"></button>
上面是用来显示幻灯片中的点点的，有几个点就要循环几次，并且初始的data-bs-slide-to="0"，然后依次1，2，3，4，所以这里就需要知道总共有几张图，所以就会用到num字段，这个字段用来写当前的幻灯片有几张图。
<?php
for ($i = 0; $i < $navinfor[num]; $i++) {
echo '<button type="button" data-bs-target="#carouselExampleIndicators" class="s1" data-bs-slide-to="'.$i.'" aria-label="Slide '.$i.'"></button>';
}
?>
上面的代码中$navinfor[num]就是我们 添加进去的字段有几张图，而'.$i.'就是有几张图，并且会在循环中不断变化1，2，3，4...
接下来就是幻灯片的图片地址了，我们存储在morepic字段中，要加它每个图片地址切割开来，所以用到代码
<?php
if($navinfor[morepic])
{
$exp=explode(chr(13),$navinfor[morepic]);
if($exp)
{
?>
<?php
foreach($exp as $k=>$v)
{
$exp2=explode('::::::',$v);
if($exp2[1])
{
echo '<div class="carousel-item">
<img src="'.$exp2[1].'" alt="'.$exp2[2].'">
</div>';
}
}
}
}
?>
上面红色代码中就是模板样式代码，可以自己灵活变化，橙色代码就是数据库中的字段名称。
有了上面的代码，整个幻灯片carousel内容都出来，下面要解决的是幻灯片第一张图片class需要添加active的属性。我用到的是jquery来对第一张图片添加active，代码如下
$('.carousel-item:first').addClass('active');
同理对幻灯片中的点点也要对第一个点添加active的属性，但是幻灯片中没有class ，所以需要自己手动添加一个class以便后面添加.active类，下图中s1是我自己添加的空类，只是为了jquery更好的抓取使用
<button type="button" data-bs-target="#carouselExampleIndicators" class="s1" data-bs-slide-to="0" aria-label="Slide 2">
最后添加jquery代码方法同上为第一个class添加active
$('.s1:first').addClass('active');
整个幻灯片carousel嵌入到bootstrap前端，帝国cms后端的系统中了。
下面是bootstrap的基本代码
<div id="carouselExampleIndicators" class="carousel slide " data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" class="s1 active" data-bs-slide-to="0" aria-label="Slide 0">
</button>
<button type="button" data-bs-target="#carouselExampleIndicators" class="s1" data-bs-slide-to="1" aria-label="Slide 1">
</button>
<button type="button" data-bs-target="#carouselExampleIndicators" class="s1" data-bs-slide-to="2" aria-label="Slide 2">
</button>
<button type="button" data-bs-target="#carouselExampleIndicators" class="s1" data-bs-slide-to="3" aria-label="Slide 3">
</button>
<button type="button" data-bs-target="#carouselExampleIndicators" class="s1" data-bs-slide-to="4" aria-label="Slide 4">
</button>
</div>
<div class="carousel-inner text-center">
<div class="carousel-item active">
<img src="/d/file/p/2023/05-17/62e3d755d82a9e2ccb2e10b1fb726fec.jpg" alt="">
</div>
<div class="carousel-item">
<img src="/d/file/p/2023/05-17/6d2658a871afbdd574996636e00f7cad.jpg" alt="">
</div>
<div class="carousel-item">
<img src="/d/file/p/2023/05-17/ea5679cfb92b87eed9d48a55cd877054.jpg" alt="">
</div>
<div class="carousel-item">
<img src="/d/file/p/2023/05-17/f41f92eda9969e99b93779e5791c0e02.jpg" alt="">
</div>
<div class="carousel-item">
<img src="/d/file/p/2023/05-17/5938e364a0edc2b9781831022b62f84d.jpg" alt="">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true">
</span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true">
</span>
<span class="visually-hidden">Next</span>
</button>
</div>
我们要蒋帝国cms程序内容嵌入到循环内容里
首先在模型中新建一个字段，名称自己取，我将他取名为morepic字段， 使用的字段类型是MEDIUMTEXT，在下面的输入表单替换html代码输入
<script>
function dopicadd()
{var i;
var str="";
var oldi=0;
var j=0;
oldi=parseInt(document.add.morepicnum.value);
for(i=1;i<=document.add.downmorepicnum.value;i++)
{
j=i+oldi;
str=str+"<tr><td width=7%><div align=center>"+j+"</div></td><td width=33%><div align=center><input name=msmallpic[] type=text size=28 id=msmallpic"+j+" ondblclick=SpOpenChFile(1,'msmallpic"+j+"')><br><input type=file name=msmallpfile[] size=15></div></td><td width=30%><div align=center><input name=mbigpic[] type=text size=28 id=mbigpic"+j+" ondblclick=SpOpenChFile(1,'mbigpic"+j+"')><br><input type=file name=mbigpfile[] size=15></div></td><td width=30%><div align=center><input name=mpicname[] type=text></div></td></tr>";
}
document.getElementById("addpicdown").innerHTML="<table width='100%' border=0 cellspacing=1 cellpadding=3>"+str+"</table>";
}
</script>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="25">
图片地址前缀:
<input name="mpicurl_qz" type="text" id="mpicurl_qz">
<input type="checkbox" name="msavepic" value="1">远程保存 <input type="checkbox" name="mcreatespic" value="1" onclick="if(this.checked){setmcreatespic.style.display='';}else{setmcreatespic.style.display='none';}">生成缩图
<span id="setmcreatespic" style="display:none">：<input type=text name="mcreatespicwidth" size=4 value="<?=$public_r[spicwidth]?>">*<input type=text name="mcreatespicheight" size=4 value="<?=$public_r[spicheight]?>">(宽*高)</span>
<?php
if(TranmoreIsOpen())
{
?>
<input type="button" name="Submit" value="多选上传" onclick="window.open('ecmseditor/tranmore/tranmore.php?type=1&classid=<?=$classid?>&filepass=<?=$filepass?>&infoid=<?=$id?>&modtype=0&sinfo=1&ecmsdo=ecmstmmorepic&tranfrom=2<?=$ecms_hashur['ehref']?>&oldmorepicnum='+document.add.morepicnum.value,'ecmstmpage','width=700,height=550,scrollbars=yes');">
<?php
}
?>
</td>
</tr>
<tr>
<td><table width="100%" border=0 align=center cellpadding=3 cellspacing=1>
<tr bgcolor="#DBEAF5">
<td width="7%"><div align=center>编号</div></td>
<td width="33%"><div align=center>缩图 <font color="#666666">(双击选择)</font></div></td>
<td width="30%"><div align=center>大图 <font color="#666666">(双击选择)</font></div></td>
<td width="30%"><div align=center>图片说明</div></td>
</tr>
</table></td>
</tr>
<tr>
<td id=defmorepicid>
<?php
if($ecmsfirstpost==1)
{
?>
<table width='100%' border=0 align=center cellpadding=3 cellspacing=1>
<?php
$morepicnum=3;
for($mppathi=1;$mppathi<=$morepicnum;$mppathi++)
{
?>
<tr>
<td width='7%'><div align=center><?=$mppathi?></div></td>
<td width='33%'><div align=center>
<input name=msmallpic[] type=text id='msmallpic<?=$mppathi?>' size=28 ondblclick="SpOpenChFile(1,'msmallpic<?=$mppathi?>');">
<br><input type=file name=msmallpfile[] size=15>
</div></td>
<td width='30%'><div align=center>
<input name=mbigpic[] type=text id='mbigpic<?=$mppathi?>' size=28 ondblclick="SpOpenChFile(1,'mbigpic<?=$mppathi?>');">
<br><input type=file name=mbigpfile[] size=15>
</div></td>
<td width='30%'><div align=center>
<input name=mpicname[] type=text id='mpicname<?=$mppathi?>'>
</div></td>
</tr>
<?php
}
?>
</table>
<?php
}
else
{
$morepicpath="";
$morepicnum=0;
if($r[morepic])
{
$r[morepic]=stripSlashes($r[morepic]);
//地址
$j=0;
$pd_record=explode("\r\n",$r[morepic]);
for($i=0;$i<count($pd_record);$i++)
{
$j=$i+1;
$pd_field=explode("::::::",$pd_record[$i]);
$morepicpath.="<tr>
<td width='7%'><div align=center>".$j."</div></td>
<td width='33%'><div align=center>
<input name=msmallpic[] type=text value='".$pd_field[0]."' size=28 id=msmallpic".$j." ondblclick=\"SpOpenChFile(1,'msmallpic".$j."');\">
<br><input type=file name=msmallpfile[] size=15>
</div></td>
<td width='30%'><div align=center>
<input name=mbigpic[] type=text value='".$pd_field[1]."' size=28 id=mbigpic".$j." ondblclick=\"SpOpenChFile(1,'mbigpic".$j."');\">
<br><input type=file name=mbigpfile[] size=15>
</div></td>
<td width='30%'><div align=center>
<input name=mpicname[] type=text value='".$pd_field[2]."'><input type=hidden name=mpicid[] value=".$j."><input type=checkbox name=mdelpicid[] value=".$j.">删
</div></td>
</tr>";
}
$morepicnum=$j;
$morepicpath="<table width='100%' border=0 cellspacing=1 cellpadding=3>".$morepicpath."</table>";
}
echo $morepicpath;
}
?>
</td>
</tr>
<tr>
<td height="25">地址扩展数量: <input name="morepicnum" type="hidden" id="morepicnum" value="<?=$morepicnum?>">
<input name="downmorepicnum" type="text" value="1" size="6"> <input type="button" name="Submit5" value="输出地址" onclick="javascript:dopicadd();"></td>
</tr>
<tr>
<td id=addpicdown></td>
</tr>
</table>
下面在新建一个字段用来说明图片循环有几张，我取名为num，字段为字符型0-255字节(VARCHAR)，长度设置为30.
以上在数据库里的设计工作就完成了，下面设计模板了代码了
<button type="button" data-bs-target="#carouselExampleIndicators" class="s1" data-bs-slide-to="0" aria-label="Slide '1"></button>
上面是用来显示幻灯片中的点点的，有几个点就要循环几次，并且初始的data-bs-slide-to="0"，然后依次1，2，3，4，所以这里就需要知道总共有几张图，所以就会用到num字段，这个字段用来写当前的幻灯片有几张图。
<?php
for ($i = 0; $i < $navinfor[num]; $i++) {
echo '<button type="button" data-bs-target="#carouselExampleIndicators" class="s1" data-bs-slide-to="'.$i.'" aria-label="Slide '.$i.'"></button>';
}
?>
上面的代码中$navinfor[num]就是我们 添加进去的字段有几张图，而'.$i.'就是有几张图，并且会在循环中不断变化1，2，3，4...
接下来就是幻灯片的图片地址了，我们存储在morepic字段中，要加它每个图片地址切割开来，所以用到代码
<?php
if($navinfor[morepic])
{
$exp=explode(chr(13),$navinfor[morepic]);
if($exp)
{
?>
<?php
foreach($exp as $k=>$v)
{
$exp2=explode('::::::',$v);
if($exp2[1])
{
echo '<div class="carousel-item">
<img src="'.$exp2[1].'" alt="'.$exp2[2].'">
</div>';
}
}
}
}
?>
上面红色代码中就是模板样式代码，可以自己灵活变化，橙色代码就是数据库中的字段名称。
有了上面的代码，整个幻灯片carousel内容都出来，下面要解决的是幻灯片第一张图片class需要添加active的属性。我用到的是jquery来对第一张图片添加active，代码如下
$('.carousel-item:first').addClass('active');
同理对幻灯片中的点点也要对第一个点添加active的属性，但是幻灯片中没有class ，所以需要自己手动添加一个class以便后面添加.active类，下图中s1是我自己添加的空类，只是为了jquery更好的抓取使用
<button type="button" data-bs-target="#carouselExampleIndicators" class="s1" data-bs-slide-to="0" aria-label="Slide 2">
最后添加jquery代码方法同上为第一个class添加active
$('.s1:first').addClass('active');
整个幻灯片carousel嵌入到bootstrap前端，帝国cms后端的系统中了。
新闻资讯 更多
- 【帝国cms教程】帝国CMS模板变量$GLOBALS[navclassid]用法分析04-03
- 【帝国cms教程】鲜为人知帝国CMS内容页调用上一篇和下一篇的精华方法汇总04-03
- 【帝国cms教程】怎么快速找出帝国CMS数据库配置文件路径及迁移网站后修改技巧！04-03
- 【帝国cms教程】帝国CMS模板$GLOBALS[navclassid]用法详解04-03
- 【帝国cms教程】帝国cms 7.5版列表页分页样式修改笔记04-02
- 【帝国cms教程】解决帝国CMS搜索页面模板不支持灵动标签和万能标签的方法04-02
- 【帝国cms教程】帝国CMS只备份栏目和模板的方法04-02
- 【帝国cms教程】帝国CMS怎样删除清空数据库记录？04-02
猜你需要
热门文章
- 178Moban源码谈谈免费源码与收费源码的区别
- 2帝国CMS忘记后台登陆用户名、密码、认证码的解决方法
- 3帝国CMS(EmpireCMS) v7.5后台任意代码执行漏洞及具体修复方法
- 4帝国CMS和WordPress 哪个好？哪个适合建站？
- 5如何解决Discuz的密码错误次数过多请15分钟后登陆的问题
- 6帝国cms灵动标签取得内容和栏目链接地址
- 7emlog pro 注册码“开心”教程（如果有一天，emlog官方版 或者 emlog免费版 跑路了，那用户怎么办？）
- 8织梦CMS在nginx下设置伪静态方法（附nginx伪静态规则）
- 9帝国cms后台登录出现”您还未登录”怎么解决？
- 10帝国cms7.5忘记登录密码 和忘记登录认证码以及多次登录 失败被锁定解决办法
豫ICP备2021026617号-1
豫公网安备：41172602000185