設置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加載不同的圖像？

回答

相關問題