Question

我正在尝试将我的jQuery Carousel图像链接到各自的“产品”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

我很抱歉没有及早回应这个问题。在询问后不久就解决了这个问题。问题是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试图帮助我。

带有BootStrap的jQuery Carousel，将轮播图像链接到其他html页面。

1 个答案: