将图像添加到 bxSlider - 图像仅在第一次单击时添加
Adding images to bxSlider - images add only on first time clicking
我有以下代码:
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,到目前为止,我实现了点击下一个按钮图片被附加,但是在第二次和第三次按下下一个按钮时 - 它不会附加图片但只会幻灯片。我不明白为什么。奇怪的是:
中的 alert() 函数
$('.bx-next').click(function(e){
仅在第一次触发。所以第二次和以后的点击处理函数不会被触发。任何关于正在发生的原因的想法?如果它第一次触发但之后没有触发,则必须更改某些内容。但是什么?
我现在尝试实现的是在每次单击下一个 btn 时附加 4 张图片并向前滑动 - 以便显示它们。
提前致谢。
这一行:
$('.bx-next').click(function(e){
仅在第一次有效,因为该元素是在您调用 "slider.reloadSlider" 时动态生成的。所以,如果你需要这个事件,你必须委托它:
$(document).on('click', '.bx-next', function(e){
无论如何,我建议您使用 bxSlider 事件:onSlidePrev 和 onSlideNext。
片段:
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);
});
<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>
我有以下代码:
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,到目前为止,我实现了点击下一个按钮图片被附加,但是在第二次和第三次按下下一个按钮时 - 它不会附加图片但只会幻灯片。我不明白为什么。奇怪的是:
中的 alert() 函数$('.bx-next').click(function(e){
仅在第一次触发。所以第二次和以后的点击处理函数不会被触发。任何关于正在发生的原因的想法?如果它第一次触发但之后没有触发,则必须更改某些内容。但是什么?
我现在尝试实现的是在每次单击下一个 btn 时附加 4 张图片并向前滑动 - 以便显示它们。
提前致谢。
这一行:
$('.bx-next').click(function(e){
仅在第一次有效,因为该元素是在您调用 "slider.reloadSlider" 时动态生成的。所以,如果你需要这个事件,你必须委托它:
$(document).on('click', '.bx-next', function(e){
无论如何,我建议您使用 bxSlider 事件:onSlidePrev 和 onSlideNext。
片段:
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);
});
<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>