帝国cms应用bootstrap幻灯片carousel

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">&nbsp;&nbsp;
      <input type="checkbox" name="msavepic" value="1">远程保存&nbsp;<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');