Question

所以我试图让我的网站的一部分有一张图片，我的两边都有箭头，可以改变中心的照片。

<div id="main_photo">
            <div id="main_photo_1">
            <img id="main_photo_img" src="images/main_photo2.jpg" alt="photo" />
            </div>
        </div>
        <div id="left_arrow"><a href=""><img id="left_arrow_image" src="images/arrow_left.jpg" alt="Navigate images left" /></a></div>
        <div id="right_arrow"><a href=""><img id="right_arrow_image" src="images/arrow_right.jpg" alt="Navigate images right" /></a></div>

它会改变图像但只有半秒钟然后原始图像会回来。作为一个附带问题，我如何才能使它以增量方式更改img src。比如main_photo _（＃to increment）.jpg

$('#left_arrow').click(function() {
        $('#main_photo_img').attr('src', "images/main_photo3.jpg");
    });

Answer 1

原始图像会返回，因为您没有停止链接重新加载页面。所以jQuery改变了图像，但是#left_arrow链接到它的href（“”），这是同一页面。

你必须像这样停止点击事件：

$('#left_arrow').click(function(ev) {
    $('#main_photo_img').attr('src', "images/main_photo3.jpg");
    ev.preventDefault();
});

如果您想在每次点击时增加图像：

var counter = 0;
var imageCount = 4;
$('#left_arrow').click(function(ev) {
    if(++counter>imageCount) counter = 1;
    $('#main_photo_img').attr('src', "images/main_photo"+counter+".jpg");
    ev.preventDefault();
});

这应该将计数器递增到图像计数，然后从1

开始

jquery图片浏览器

1 个答案: