Question

以下是我的工作内容：

<div class="row">
<div class="span 6">
<?php for ($i=1; $i<=100; $i++) { ?>
  <div id="cf7_<?=$i?>" class="shadow">
      <img class='opaque' src="/img/imgA<?=$i?>.jpg" />
      <img src="/img/imgB<?=$i?>.jpg" />
      <img src="/img/imgC<?=$i?>.jpg" />
      <img src="/img/imgD<?=$i?>.jpg" />
  </div>
  <?php } ?>
  <p id="cf7_controls">
      <span class="selected">Image 1</span>
      <span>Image 2</span>
      <span>Image 3</span>
      <span>Image 4</span>
  </p>
</div>

<script>
$(document).ready(function() {
    $("#cf7_controls").on('click', 'span', function() {
    $("#cf7_<?=$i?> img").removeClass("opaque");
    var newImage = $(this).index();
    $("#cf7_<?=$i?> img").eq(newImage).addClass("opaque");
    $("#cf7_controls span").removeClass("selected");
    $(this).addClass("selected");
    });
});
</script>

<style>
p#cf7_controls {
  text-align:center;
}
#cf7_controls span {
  padding-right:2em;
  cursor:pointer;
}
#cf7_<?=$i?> {
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto 10px;
}
#cf7_<?=$i?> img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  opacity:0;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}

#cf7_<?=$i?> img.opaque {
  opacity:1;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=1);
}
</style>

我从http://css3.bradshawenterprises.com/cfimg/#cfimg7提取了此代码和Need helping getting this string of Javascript to work 当有少量图像时，它可以很好地工作，即具有id =＆＃39; cf7＆＃39;的几个div。但是，当有超过一百张图像时，即带有id =＆＃39; cf7＆＃39;的100多张图像，我认为应该在id =＆＃39; cf7＆＃39;以及相应的javascript和css样式表中插入php或javascript变量。我该怎么做？先感谢您。

Answer 1

据我了解，您希望能够在页面上拥有多个交叉淡化图像元素，因此您需要不同的ID。但是我不认为这个for循环会做它应该做的事情。

首先，不要在PHP样式表中搞乱。样式表应位于不同的文件中，或至少位于<head>中。实际上有些浏览器会忽略<head>之外的样式表。

如果您需要#cf7的多个实例，则应使用类并在样式表中使用此类。此外，您需要一个id来通过javascript识别元素。

不要忘记将控件和javascript放在循环中！否则，这些只会在页面上出现一次。每张图片都需要相应的控件。

但是，我建议在这里使用一个函数：

<?php

function showCrossFadingImages($id, $image_array) {
  echo "<div id='cf7_$id' class='cf7 shadow'>";

  $opaque = 'class="opaque"';
  foreach ($image_array as $img) {
    echo "<img src='/img/$img' $opaque />";
    $opaque = ''; // don't show this after the first iteration
  }

  echo '</div>';

  echo "<div id='cf7_controls_$id' class='cf7_controls'>";

  $selected = 'class="selected"';
  foreach ($image_array as $i => $img) {
    echo "<span $selected>Image $i</span>";
    $selected = ''; // don't show this after the first iteration
  }

  echo '</div>';

  echo "<script>
        \$(document).ready(function() {
          \$('#cf7_controls_$id').on('click', 'span', function() {
            \$('#cf7_$id img').removeClass('opaque');
            var newImage = \$(this).index();
            \$('#cf7_$id img').eq(newImage).addClass('opaque');
            \$('#cf7_controls_$id span').removeClass('selected');
            \$(this).addClass('selected');
          });
        });
        </script>";
}

现在你可以调用这个函数：

showCrossFadingImages(1, array("Turtle.jpg", "Rainbow_Worm.jpg", "Birdman.jpg"));

我没有对它进行过测试，但它应该有效。

编辑：样式表现在应该有以下选择器：

p.cf7_controls

.cf7_controls span

.cf7

.cf7 img

.cf7 img.opaque

多个图像淡入淡出的php变量

1 个答案: