如何动态地将文本附加到轮播中的图像?

时间:2014-03-10 10:38:49

标签: javascript jquery html

有问题的轮播是弹性滑动http://tympanus.net/Development/Elastislide/index.html,目前我的搜索结果显示在旋转木马内,但我无法动态添加文本文本,以便向用户清楚地说明结果是。

<!-- Elastislide Carousel and Overlay -->
    <ul id="carousel" class="elastislide-list">
    <?php

if(isset($_POST["title"]))
{
  $se = $_POST['title'];
    $DBH = new PDO("mysql:host=$host;dbname=$dbname", $user, $pass);
    $sth = $DBH->prepare("SELECT subjects_id FROM subjects WHERE title LIKE '%".$se."%'");
    $sth->execute();
    $result = $sth->fetchAll();
    $arr  = $result;
    $image=2;
    $length = count($arr);
    for ($i=0; $i < $length && $i<40; $i++)
    { 
        if ($arr[$i]!="") 
          {
              echo'<li><a  id="dummy" href="http://localhost/website/subjects/view/'.$arr[$i][0].'" ><img src="images/small/'.$image.'.jpg" alt="image02" /></a></li>';

              $image++;
          }
    }
} 
?>      

</ul>
<script type="text/javascript">    
( function($) 
  {
      $( '#carousel' ).elastislide();
  } ) ( jQuery );

</script>
<!-- End Elastislide Carousel and Overlay  -->

1 个答案:

答案 0 :(得分:0)

检查我的回答here

您可以在图像之后添加div并动态更改其内容。

<ul id="carousel" class="elastislide-list">
<div id="description">
    <label id="caption">First image</label>
</div>

希望这有帮助。