代码之家 › 专栏 › 技术社区 › Kamlesh Katpara

突出显示旋转木马滑块php中活动项内的活动子项

css twitter-bootstrap php javascript

Kamlesh Katpara · 技术社区 · 8 年前

我正在努力实现如下图所示。我想创建一个图像旋转滑块,其中我有4个项目,每个项目有4个幻灯片。这些图像就像一个单选按钮选择,我从数据库中获取列表,因此我想通过高亮显示作为选中的幻灯片来高亮显示选中的单选按钮。因此,每当旋转木马加载时,它应该突出显示选定为无线电输入的幻灯片

Simple Carousel

以下是它的链接: https://bootsnipp.com/snippets/featured/simple-carousel

这是我的代码:

<div class="carousel-inner">

<?php
  $result = '';
  foreach ($template_data as $key => $value) {

    if ($key == 0) {
      $result .= '<div class="item active">';
    }
    elseif ($key !=0 && ($key % 4 == 0)) { 
      //to avoid first empty "active"
      $result .= "</div>";
      $result .= '<div class="item">';
    }

    $result .= '<div class="col-md-3"><a href="#"><img src="http://placehold.it/250x250" alt="#" title="#"></a></div>';
  }

  $result .= '</div>';
  echo $result;
?> 

</div>

1 回复 | 直到 8 年前

hunteke 8 年前

你的基本前提在我看来很好,不过 example on jsFiddle 或者像强调问题这样会更好。对于未来的问题,请考虑一下。

同时,我可能会考虑重新组织代码,这样在编写开始和结束元素标记时就不会有歧义。如果打开标记,请将其关闭。始终:

<?php
    $result = '';
    foreach ($template_data as $key => $value) {

        $cssClass = 'item';
        if ( /* Your test to determine 'active'; you currently have $key == 0 */ ) {
            $cssClass .= ' active';
        }

        $result .= "<div class='$cssClass'><div class='col-md-3'><a href='#'><img src='http://placehold.it/250x250' alt='#' title='#'></a></div></div>";
    }

    echo $result;
?>

唯一必要的检查应该是确定项目是否处于活动状态。如果是,请进行相应修改。否则,循环为 每个项目都一样 . 以后更容易写、阅读和推理。