jquery图像滚轮不切换到下一个图像

我有一个图像卷轴，我试图实现。图像滚动工作，但它是垂直移动而不是水平移动。以下是我走到这一步：jquery图像滚轮不切换到下一个图像

<a href = "#" id = "btnNext">Next Image</a> 

$('#btnNext').click(function() { 
    //Calls new image with value true, meaning next image 
    newImage(true); 
    return false; 
}); 

function newImage(direction) { 
    //Get the current selected item (with selected class), if none was found, get the first item 
    current_image = $('#imageGallery li.selected').length ? $('#imageGallery li.selected') : $('#imageGallery li:first'); 

    //If determines slideshow direction 
    if (direction) { //Next image 
     //Get next sibling 
     next_image = (current_image.next().length) ? current_image.next() : $('#imageGallery li:first'); 
    } else { //Previous image 
     //Get previous sibling 
     next_image = (current_image.prev().length) ? current_image.prev() : $('#imageGallery li:last'); 
    } 

    //Clear selected class 
    $('#imageGallery li').removeClass('selected'); 

    //Reassign selected class to current image 
    next_image.addClass('selected'); 

    //Scroll images 
    $('#images').scrollTo(next_image, 800); 
}

更新：这里是我的quesions： 1）如何修改本作水平移动？ 2）有没有办法让这样的图像滚动不使用.scrollTo（）？

来源

2011-03-11 Stanley Cup Phil

我假设你想让画廊水平移动，而不是垂直移动。（你在问题中都提到了这一点。）这只是一个CSS问题：将列表更改为水平显示（例如，display: inline-block或float: left），而scrollTo插件应该为您执行此操作。

没有scrollTo插件就可以做到这一点。该插件使用jQuery animate函数在页面中移动，如果你愿意，你可以做同样的事情。 :)这是一个使用动画在图库中移动图片的快速jsFiddle。显然它需要相当多的工作（不会回到最后一张照片的开头，只有一种方式，不计算图片宽度等），但它应该有希望让你知道它是如何实现的做完了。

http://jsfiddle.net/meloncholy/KzBzT/

来源

2011-03-11 17:16:49 meloncholy

感谢您的帮助。这得益于我的大部分工作。你知道我将如何编辑代码，以便它可以循环回到第一个选择？ – 2011-03-11 18:31:34

对不起，我错过了这个。一种方法是跟踪您当前显示的图片，然后在您到达结尾时再回头看看。 http://jsfiddle.net/meloncholy/KzBzT/20/ – meloncholy 2011-03-15 12:33:08

显然这可能不是理想的。在我的示例中，您希望从最后停止画廊向左移动3张图片（具体取决于您的浏览器大小）。如果您的图库是固定宽度，那么您可以对此进行硬编码，或者使用outerWidth（）+任何边距来计算要离开的图片数量。 – meloncholy 2011-03-15 12:37:24

jquery图像滚轮不切换到下一个图像

回答

相关问题