原创jQuery图片向上滚动代码

需求描述

我现在需要一个图片滚动的代码，我要求图片是整屏，然后是向上滚动的。要求要有文字和链接显示出来，同时要有翻页的功能

需求最终截图

完整代码

jquery代码<br/>
$(function(){
//首页图片滚动jQuery代码
//code by 酷剑
//2013.1.27
//contact me at cbaojian@gmail.com
var index = 0;
var len = $(“.sliderbox > li”).length;
var sliderTimer;
for(var i=1; i<=len; i++){$(“.slidernav”).append(‘<li><a href=”#”>’+i+'</a></li>’);}
for(var j=0; j<len; j++){
var title = $(“.sliderbox li:eq(“+j+”) img”).attr(“alt”);
var url = $(“.sliderbox li:eq(“+j+”) a”).attr(“href”);
$(“.slidertext”).append(‘<li><a href=”‘+url+'”>’+title+'</a></li>’);
}

$(“.slidernav li”).mouseover(function(){
index = $(“.slidernav li”).index(this);
showImg(index);
$(this).children(“a”).click(function(){return false;});
}).eq(0).mouseover();
$(“.slider”).hover(function(){
clearInterval(sliderTimer);
},function(){
sliderTimer = setInterval(function(){
showImg(index);
index++;
if(index == len){index=0;}
},3000);
}).trigger(“mouseleave”);
function showImg(index){
var sliderHeight = $(“.slider”).height();
$(“.sliderbox”).stop(true,false).animate({“top”:-sliderHeight*index});
$(“.slidernav li”).removeClass(“current”).eq(index).addClass(“current”);
$(“.slidertext li”).hide().eq(index).show();
}
})

css代码
.slider{height:300px; margin:10px auto; overflow:hidden; position:relative; width:980px;}
.sliderbox{position:absolute; top:0; left:0;}
.sliderbox li{width:980px; height:300px;}
.slidernav{position:absolute; right:10px; bottom:5px; z-index:1;}
.slidernav li{float:left; width:24px;}
.slidernav li a{width:16px; padding:2px 4px; height:12px; background:#fff; color:#000; text-align:center;}
.slidernav li.current a{background:#3B8DD1; color:#fff;}
.slidertext{background:#000; background:rgb(00,00,00); opacity:0.8; position:absolute; left:0; bottom:0; width:100%;}
.slidertext li{display:none;}
.slidertext li a{text-align:left; line-height: 30px; height: 30px; color: #fff;}

虽然是很简单的功能，但是还是从中学到了很多东西，其中最关键的地方是使用到函数的方式，从而使得过程简单了很多呢，不过我还是觉得这个可以扩展，可以把它做成一个插件的形式来调用内容。另外对于jQuery的动画方式也更加的清晰了。图片的滚动其实就是使用到一个setInterval()，定义这个函数，使得他不断循环，从而形成动画，当然这个比不上那些插件好看，比如图片滚动过渡的时候可以加一些模糊的效果切换的时候可以更自然点。