帶有BootStrap的jQuery Carousel，將輪播圖像鏈接到其他html頁面。

Question

我想將我的jQuery Carousel圖像鏈接到它們各自的'product'html頁面。但是當我在jQuery腳本中添加一個函數來使圖像打開另一個頁面而不是一個更大的圖像。它打破了左側和右側可點擊的控制。

    <div id="carousel"> 
         <div id="left_button" class="col-xs-2"><img src="images/left.jpg" alt=""></div> 
         <div class="col-xs-8" id="display_panel"> 
          <ul id="image_list"> 
           <li><a href="products/desk_fan.html"target=_self><img class="img-thumbnail" src="images/small/deskcara.png" alt="Desk Fan 1"></a></li> 
           <li><a href="products/desk_fan.html"target=_self><img class="img-thumbnail" src="images/small/deskcara1.png" alt="Desk Fan 2"></a></li> 
           <li><a href="products/window_fan.html"target=_self><img class="img-thumbnail" src="images/small/windowCara.png" alt="Window Fan 1"></a></li> 
           <li><a href="products/ceiling_fan.html"target=_self><img class="img-thumbnail" src="images/ceilingCara.png" alt="Ceiling Fan"></a></li> 
           <li><a href="products/floor_fan.html"target=_self><img class="img-thumbnail" src="images/floorCara1.png" alt="Floor Fan 1"></a></li> 
           <li><a href="products/personal_fan.html"target=_self><img class="img-thumbnail" src="images/personalCara1.png" alt="Personal Fan"></a></li> 
           <li><a href="products/tower_fan.html"target=_self><img class="img-thumbnail" src="images/towerCara.png" alt="Tower Fan 1"></a></li> 
           <li><a href="products/tower_fan.html"target=_self><img class="img-thumbnail" src="images/towerCara2.png" alt="Tower Fan 2"></a></li> 
          </ul> 
         </div> 
         <div id="right_button" class="col-xs-2"><img src="images/right.jpg" alt=""></div> 
        </div> 

---

jQuery的

$(document).ready(function() { 

var slider = $("#image_list");      // slider = ul element 
var leftProperty, newleftProperty; 

// the click event handler for the right button      
$("#right_button").click(function() { 
    // get value of current left property 
    leftProperty = parseInt(slider.css("left")); 
    // determine new value of left property 
    if (leftProperty - 300 <= -900) { 
     newLeftProperty = 0; } 
    else { 
     newLeftProperty = leftProperty - 300; } 
    // use the animate function to change the left property 
    slider.animate({left: newLeftProperty}, 1000); 
}); // end click 

// the click event handler for the left button 
$("#left_button").click(function() { 
    // get value of current right property 
    leftProperty = parseInt(slider.css("left")); 

    // determine new value of left property 
    if (leftProperty < 0) { 
     newLeftProperty = leftProperty + 300; 
    } 
    else { 
     newLeftProperty = 0; 
    } 

    // use the animate function to change the left property 
    slider.animate({left: newLeftProperty}, 1000);    
}); // end click 

// display an enlarged image when a carousel image is clicked 
$("#image_list a").click(function(evt) { 
    var imageURL = $(this).attr("href"); 
    $("#image").animate(
     { opacity: 0, marginLeft: "-=205" }, 
     1000, 
     function() { 
      $("#image").attr("src", imageURL);    
      $("#image").animate(
       { opacity: 1, marginLeft: "+=205" }, 
       1000 
      ); 
     } 
    ); 

    evt.preventDefault(); 
}); 

}); // end ready 

Answer 1

我aplogize不應對這一越快。詢問後不久就解決了問題。問題是jquery插件的最後一部分。

這一部分：

$("#image_list a").click(function(evt) { 
var imageURL = $(this).attr("href"); 
$("#image").animate(
    { opacity: 0, marginLeft: "-=205" }, 
    1000, 
    function() { 
     $("#image").attr("src", imageURL);    
     $("#image").animate(
      { opacity: 1, marginLeft: "+=205" }, 
      1000 
     ); 
    } 
); 

evt.preventDefault(); 
}); 

通過刪除所有圖像是送你到他們想要的產品頁面可點擊的鏈接。謝謝Atula試圖幫助我。