jquery图片浏览器

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。 （＃增加）.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开始