Question

大家好，谢谢你的时间。我用2张图片制作了一个菜单。每当有人点击2＆＃34;菜单图像中的1个时，我希望Bxslider更改并显示不同的图像。所以我的想法就是隐藏2个bxsliders中的1个并在我点击菜单时交换任何想法我该怎么做？

这是我到目前为止所做的事情

这是2张图片菜单：

    <div class="Menu1">
    <div class="Menu1_1"> <a href="a"class="reload-slider1" ><img src="images/menu2/Landing_Campaign_Smartwatch_menu2_2_1.jpg" width="593" height="100" onClick="changeImage4()"  id="toChange4" ></a>
    </div>
  <div class="Menu1_1" >
  <img src="images/menu2/Landing_Campaign_Smartwatch_menu2_1_2.jpg" width="596" height="100" onClick="changeImage5()" id="toChange5">
    </div>

以下是Bxslider的脚本：

<---BxSlider----->




       <script>
var slider = $('.bxslider1').bxSlider({
  mode: 'horizontal'
});


$(document).ready(function(){
   $('.bxslider2').bxSlider({
  infiniteLoop: false,
  hideControlOnEnd: true
    });
});

$(document).ready(function(){
   $('.bxslider3').bxSlider({
  infiniteLoop: false,
  hideControlOnEnd: true
    });
});
</script>
<script>
    $('.reload-slider1').click(function(e){
  e.preventDefault();
 $('.bxslider1').append('<li><img src="images/slider/Landing_Campaign_Smartwatch_v1_1.jpg"></li>');
  $('.bxslider1').append('<li><img src="images/slider/Landing_Campaign_Smartwatch_v1_2.jpg"></li>');

    slider.reloadSlider();
});



    $('.reload-slider2').click(function(e){
  e.preventDefault();
  $('.bxslider2').append('<li><img src="images/slider/Landing_Campaign_Smartwatch_v2_1.jpg"></li>');
  $('.bxslider2').append('<li><img src="images/slider/Landing_Campaign_Smartwatch_v2_2.jpg"></li>');
   $('.bxslider2').prepend('<li><img src="images/slider/Landing_Campaign_Smartwatch_v1_1.jpg"></li>');
    $('.bxslider2').prepend('<li><img src="images/slider/Landing_Campaign_Smartwatch_v1_2.jpg"></li>');
  slider.reloadSlider();
});


</script>

Answer 1

您的HTML似乎无效：

<div class="Menu1">
    <div class="Menu1_1">
        <img src="images/menu2/Landing_Campaign_Smartwatch_menu2_2_1.jpg" width="593" height="100" onClick="changeImage4()" id="toChange4 ; reload-slider">
    </div>
    <div class="Menu1_1">
        <img src="images/menu2/Landing_Campaign_Smartwatch_menu2_1_2.jpg" width="596" height="100" onClick="changeImage5()" id="toChange5 ; reload-slider2">
    </div>

它包含无效ID，这可能就是document.getElementById()不适合您的原因。更改img标记的ID：

    <div class="Menu1">
    <div class="Menu1_1">
        <img src="images/menu2/Landing_Campaign_Smartwatch_menu2_2_1.jpg" width="593" height="100" onClick="changeImage4()" id="toChange4">
    </div>
    <div class="Menu1_1">
        <img src="images/menu2/Landing_Campaign_Smartwatch_menu2_1_2.jpg" width="596" height="100" onClick="changeImage5()" id="toChange5">
    </div>

设置Bxslider加载不同的图像？

1 个答案: