Question

我正在使用jquery.bxslider.js来滑动我的图像。

在我的html代码中，我使用如下：

<ul class="slide">    
<li>
  <a href="#">
    <img src="../img/pic1.png" id="1" />
  </a>
</li>
<li>
  <a href="#">
    <img src="../img/fish.png" id="2" />
  </a>
</li>
<li>
  <a href="#">
    <img src="../img/dog.jpg" id="3" />
  </a>
</li>

默认情况下，我使用这三个图像然后当用户单击下一个按钮时，我想从数据库中再获取一个图像，然后我将这个ajax请求附加到php文件中。

function load_image() {         
var id=$("ul li img:last-child").attr("id");  
  var result=$.ajax({  
  type: "GET",
  url: "getImage.php?id="+id,             
  dataType: "html",               
  success: function(data){           
    slider.destroySlider();//clear all old slider structure and then insert one more image in  the list        
    $(".slide").append(data);          
    loadSlide(); // function to call to bxslider to generate slide             
  }
});

};

我的问题是，当我调用函数loadSlide（）时，滑块总是重新加载并显示列表的第一个图像。

但我的目的不是重新加载幻灯片，只需在点击下一个按钮时显示下一个图像，当幻灯片转到下一个图像时，它应该再将一个图像从DB加载到滑块。

任何帮助将不胜感激!!!

致以最诚挚的问候，

Sokly

Answer 1

您可以使用Callback API加入新图片。

Answer 2

这是一个简单的方法让你完成它，假设你想按照新闻类别id滑动图像，如下所示。我只是使用新闻类别ID进行查询。只是在“bxslider”类之间嵌入你的语句。我猜这个帮助，因为我刚刚在我正在工作的网站上实现它，它工作正常。如果需要，您还可以随图像幻灯片一起获取标题或图片说明。

<ul class="bxslider">

<?php
$slider_str="select * from news where newscatid=4";           
$i=1;
$result=mysql_query($slider_str);


if(mysql_num_rows($result)>0)
{


while($row=mysql_fetch_assoc($result)) 
{  
if($i%2==1 && $i!=1)
{

}

?>
<li> <div class="slideimagesize"><img src="<?php echo 'extras/'.$row['image'];?>"       
width="200" height="150"/></div></li>
<?php 
if($i%2==0)
{

}
$i++;
}
} 
?>

</ul>

或者您也可以通过使用 WOWSLIDER 来实现这一点，下面是代码

//将其放在head标签之间

<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>

// Closing Head标签

<div id="wowslider-container1">
<div class="ws_images">
<ul>

<?php
$slider_str="select * from news where newscatid=4";           
$i=1;
$result=mysql_query($slider_str);


if(mysql_num_rows($result)>0)
{

    while($row=mysql_fetch_assoc($result)) 
    {  
        if($i%2==1 && $i!=1)
        {

        }
?>
<li><div class="slideimagesize"><a href="news.php?newsid=<?php echo $row['newsid'];?>"><img src="<?php echo 'extras/'.$row['image'];?>" width="350" height="160" alt=" <?php echo $row['subject']; ?>" title="<?php echo $row['subject']; ?>"/>
</a>
</div></li><br>

 <?php  
        if($i%2==0)
        {

        }
        $i++;
        }
        } 
?>

</ul>
</div>
</div>

  <script type="text/javascript" src="engine1/wowslider.js"></script>
  <script type="text/javascript" src="engine1/script.js"></script>

  <!-- End WOWSlider.com BODY section -->

</div>

从数据库中获取图像并附加到bxslider的滑块中

2 个答案: