这是一个使用jQuery的示例代码,主要展示了如何使用jQuery和CSS动画(scroolX)来实现图片的滚动效果。

(function(){  
jQuery("#temp1").Slide({ effect: "scroolX", speed: "normal", timer: 3000 });  
jQuery("#temp2").Slide({ effect: "scroolX", speed: "normal", timer: 3000 });  
jQuery("#temp3").Slide({ effect: "scroolX", speed: "normal", timer: 3000 });  
})(jQuery);  
  
jQuery(document).ready(function () {  
jQuery('.navigation li').hover(  
function () {  
jQuery('ul', this).fadeIn();  
},  
function () {  
jQuery('ul', this).fadeOut();  
}  
);  
});  
  
// 在页面加载完成后调用一个函数来启动图片滚动效果  
jQuery.fn.im = function (speed, amount, dir) {  
var $images = this.each(function () {  
var $this = $(this);  
var images = $this.children("img");  
var index = 0;  
var direction = (dir === "up") ? 1 : -1;  
var step = amount / (images.length * 2);  
  
function stepDown() {  
$this.stop().animate({ left: index + direction * step }, speed, stepDown);  
}  
  
function stepUp() {  
$this.stop().animate({ left: (index + speed * direction) }, speed, stepUp);  
}  
  
if (direction === "up") {  
stepUp();  
} else {  
stepDown();  
}  
  
function completeMove() {  
index += direction;  
$this.css("left", index + "px");  
}  
  
setInterval(completeMove, 0);  
});  
return this;  
};  

这个代码中包含了两个主要的JavaScript函数:jQuery('.navigation li').hover(...)jQuery.fn.im = ...jQuery('.navigation li').hover(...) 是在点击导航链接时执行的函数,它将鼠标悬停在链接上时使相应的下拉菜单显示出来,鼠标移开链接时则将其隐藏。jQuery.fn.im = ... 是一个jQuery方法,用于启动图片滚动效果并设置速度、步长和方向。当页面加载完成后,此代码会自动运行,从而开始图片滚动效果。