jquery导航实现图片滚动并放大效果

jquery导航目录实现图片左右滚动并放大效果

使用方法:

1.引入jQuery类库和相关css

2.定义内容

3.使用jQuery方法:

var $slider &＃61; $(&＃39;.slider ul&＃39;);
var $slider_child_l &＃61; $(&＃39;.slider ul li&＃39;).length;
var $slider_width &＃61; $(&＃39;.slider ul li&＃39;).width();
$slider.width($slider_child_l * $slider_width);var slider_count &＃61; 0;if ($slider_child_l <6) {$(&＃39;#btn-right&＃39;).css({cursor: &＃39;auto&＃39;});$(&＃39;#btn-right&＃39;).removeClass("dasabled");
}$(&＃39;#btn-right&＃39;).click(function() {if ($slider_child_l <6 || slider_count >&＃61; $slider_child_l - 6) {return false;}slider_count&＃43;&＃43;;$slider.animate({left: &＃39;-&＃61;&＃39; &＃43; $slider_width &＃43; &＃39;px&＃39;}, &＃39;slow&＃39;);slider_pic();
});$(&＃39;#btn-left&＃39;).click(function() {if (slider_count <&＃61; 0) {return false;}slider_count--;$slider.animate({left: &＃39;&＃43;&＃61;&＃39; &＃43; $slider_width &＃43; &＃39;px&＃39;}, &＃39;slow&＃39;);slider_pic();
});function slider_pic() {if (slider_count >&＃61; $slider_child_l - 6) {$(&＃39;#btn-right&＃39;).css({cursor: &＃39;auto&＃39;});$(&＃39;#btn-right&＃39;).addClass("dasabled");}else if (slider_count > 0 && slider_count <&＃61; $slider_child_l - 6) {$(&＃39;#btn-left&＃39;).css({cursor: &＃39;pointer&＃39;});$(&＃39;#btn-left&＃39;).removeClass("dasabled");$(&＃39;#btn-right&＃39;).css({cursor: &＃39;pointer&＃39;});$(&＃39;#btn-right&＃39;).removeClass("dasabled");}else if (slider_count <&＃61; 0) {$(&＃39;#btn-left&＃39;).css({cursor: &＃39;auto&＃39;});$(&＃39;#btn-left&＃39;).addClass("dasabled");}
}$(&＃39;.slider a&＃39;).hover(function() {if ($(this).find(&＃39;img:animated&＃39;).length) return;$(this).animate({marginTop: &＃39;0px&＃39;}, 300);$(this).find(&＃39;img&＃39;).animate({width: &＃39;150px&＃39;}, 300);
}, function() {$(this).animate({marginTop: &＃39;24px&＃39;}, 200);$(this).find(&＃39;img&＃39;).animate({width: &＃39;90px&＃39;}, 200);
});


原文转自:jquery导航实现图片滚动并放大效果