Question

我有以下代码：

JQUERY ---

 var slider = $('.slider1').bxSlider({
  mode: 'horizontal',
  slideWidth: 200,
  minSlides: 2,
  maxSlides: 4,
  slideMargin: 10
 });

 $('.bx-next').click(function(e){
 e.preventDefault();
 $('.slider1').append('<div class="slide"><img src="images/57d54a2e53324.png"></div>');
 $('.slider1').append('<div class="slide"><img src="images/57d54a2e53324.png"></div>');
 $('.slider1').append('<div class="slide"><img src="images/57d54a2e53324.png"></div>');
 $('.slider1').append('<div class="slide"><img src="images/57d54a2e53324.png"></div>');
 slider.reloadSlider();
 slider.goToNextSlide();
 });

HTML ----

    <div class="slider1">
          <?php 
            $query = "SELECT * FROM vid LIMIT 4";
            $result = mysqli_query($conn,$query);
            if(!$result){echo 'error with query';}
            while ($row = mysqli_fetch_assoc($result)) { ?>
              <div class="slide">
                <img src='<?php echo "images/".$row['namev_id'].".png";?>' alt="Bacn">
              </div>
            <?php } ?>                
    </div>

我想要实现的是一个滑块，每个幻灯片上的移动通过ajax上传更多4个图片并将它们附加到滑块本身。 Hovewer，到目前为止我点击了下一个按钮pics得到附加，但在第二次和第三次按下一个按钮 - 它不会附加图片，但只是幻灯片。我不明白为什么。奇怪的是：（/ p>）里面的alert（）函数

$('.bx-next').click(function(e){

仅在第一次开火。因此第二次和以后的点击处理程序功能都不会被触发。有关正在发生的理由的任何想法？如果它是第一次发射而不是下一次发射，那么必须改变一些东西。但是什么？

我现在尝试实现的是每次点击下一个btn以附加4张图片并向前滑动 - 以便显示它们。

提前谢谢。

Answer 1

这一行：

$('.bx-next').click(function(e){

仅在第一次起作用，因为当您调用＆＃34; slider.reloadSlider＆＃34;时，该元素是动态生成的。所以，如果你需要这个活动，你必须委托它：

$(document).on('click', '.bx-next', function(e){

无论如何，我建议你使用bxSlider事件：onSlidePrev和onSlideNext。

摘录：

＆＃13;

function addNewImages(slider) {
  $('.slider1').append('<div class="slide"><img src="http://bxslider.com/images/730_200/tree_root.jpg"></div>');
  $('.slider1').append('<div class="slide"><img src="http://bxslider.com/images/730_200/hill_road.jpg"></div>');

  slider.reloadSlider();
  $('.bx-pager.bx-default-pager .bx-pager-item:last a').trigger('click');
}

var slider = $('.slider1').bxSlider({
  mode: 'horizontal',
  slideWidth: 200,
  minSlides: 2,
  maxSlides: 2,
  slideMargin: 10,
  onSlidePrev: function ($slideElement, oldIndex, newIndex) {
    //addNewImages(this);
  },
  onSlideNext: function ($slideElement, oldIndex, newIndex) {
    //addNewImages(this);
  }
});

$(document).on('click', '.bx-next', function(e){
  addNewImages(slider);
});

＆＃13;

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link href="https://rawgit.com/stevenwanderski/bxslider-4/master/dist/jquery.bxslider.min.css" rel="stylesheet">
<script src="https://rawgit.com/stevenwanderski/bxslider-4/master/dist/jquery.bxslider.min.js"></script>


<div class="slider1">
    <div class="slide">
        <img src='http://bxslider.com/images/home_slides/houses.jpg' alt="Bacn">
    </div>
    <div class="slide">
        <img src='http://bxslider.com/images/home_slides/hillside.jpg' alt="Bacn">
    </div>
    <div class="slide">
        <img src='http://bxslider.com/images/home_slides/picto.png' alt="Bacn">
    </div>

</div>

＆＃13;

将图像添加到bxSlider - 仅在首次单击时添加图像

1 个答案: