设置Bxslider加载不同的图像？

大家好，感谢您的时间。我做了2个图像的菜单。我希望Bxslider在每次有人点击2个“菜单图像”中的1个时更改并显示不同的图像。因此，我的想法是隐藏2个bxsliders中的1个，并在我单击菜单时交换任何想法，我可以如何做到这一点？设置Bxslider加载不同的图像？

这里是我设法让到目前为止

这里是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>

来源

2014-10-07 Ant Mar

你的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>

来源

2014-10-07 09:04:31

我需要2点独立的ID我怎么能做到这一点 – 2014-10-07 09:14:39

在你的img标签，你给了编号为“toChange4;重装滑块”和“toChange5;重装滑块”这是无效的。此外，ID并不适用于课程的工作方式。元素应该有唯一的唯一ID – 2014-10-07 09:17:47

changeImage4 with changeImage5不是不同的ID？所以我用JavaScript连接类？我想要做2件事情，当我点击图像来更改其他图像并重新加载滑块时，我可以做到这一点？ – 2014-10-07 09:58:29

设置Bxslider加载不同的图像？

回答

相关问题