日期:2014-05-16  浏览次数:20802 次

jquery图片滑动特效!
大家好,我看到了这个特效:

http://www.jsfoot.com/jquery/demo/2012-05-26/627.html 非常好

我现在想用到我的页面上,不过,他的是垂直方向的,我想用的是水平方向的,请问该如何修改呢?


------解决方案--------------------
$(function(){ 
//easySlider Init
easySlider();
//Project Detailed Page Slider
 $('.project .main-image-holder').each(function(){
        $(this).find('li:first').addClass('active');
        var maxHeight = 0;
        var maxWidth = 0;
        $(this).find('img').each(function(){            
            //if($(this).height() > maxHeight)maxHeight = $(this).height(); 
            if($(this).width() > maxWidth)maxWidth = $(this).width();            
                //maxWidth += $(this).width();
                maxHeight += $(this).height();
        }
        );
        $(this).find('ul').height(maxHeight).width(maxWidth);
        makeScrollable($(this).find("div.screenshots"));
    });     
});
function makeScrollable(wrapper){
//var wrapperHeight = wrapper.height();
var wrapperWidth = wrapper.width();    
    wrapper.mousemove(function(e){
        //var scrollableHeight = $('.project .main-image-holder li.active').height();
        var scrollableWidth = $('.project .main-image-holder li.active').width();        
        var wrapperOffset = wrapper.offset();     
        //var y = e.pageY - wrapperOffset.top;
        var x = e.pageX - wrapperOffset.left;     
        //var top =  (y * (scrollableHeight - wrapperHeight) / wrapperHeight) - 10;
        var left =  (x * (scrollableWidth - wrapperWidth) / wrapperWidth) - 10;
        //if (top < 0)top = 0;
        if(left<0)left=0;
        //wrapper.scrollTop(top);
        wrapper.scrollLeft(left);
    });
    //var interval = setInterval(function(){ }, 200);
}
这是关键代码更改。演示:http://down.scscms.com/javascript/jqpic/index.html已去广告