(2013-11-9更新)你知道吗？我写了一个jQuery图片滚动插件了，该插件实现了以下功能：

欢迎使用我的万能图片滚动插件。

需求描述

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

需求最终截图

核心代码

$(function(){//首页图片滚动jQuery代码//code by 酷剑//2013.1.27//contact me at cbaojian@gmail.comvar 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();}})

.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()，定义 这个函数，使得他不断循环，从而形成动画，当然这个比不上那些插件好看，比如图片滚动过渡的时候可以加一些模糊的效果切换的时候可以更自然点。

此处内容需要登录才可见

2013.2.25更新

添加代码修改为左右滚动

修改里面的jQuery代码中的：

var sliderHeight = $(“.slider”).height();
$(“.sliderbox”).stop(true,false).animate({“top”:-sliderHeight*index});

为：

var sliderWidth = $(".slider").width();

$(".sliderbox").stop(true,false).animate({"left":-sliderWidth*index});

修改里面的css代码

.sliderbox li{width:980px; height:300px;}为：.sliderbox li{width:980px; height:300px; float:left;}另外补上html代码：<div class="slider"><ul class="sliderbox"><li><a href=""><img src=""></a></li><li><a href=""><img src=""></a></li></ul><ul class="slidernav">《/ul><ul class="slidertext"></ul></div>

2013年5月15日更新

把内容改为函数对象的方式来做。并且支持向左向右滚动的代码支持。

 

<script type="text/javascript">//首页图片滚动jQuery代码//code by 酷剑//2013.1.27//contact me at cbaojian@gmail.comfunction slider(obj){var _this = $(this);var index = 0;_this.obj = obj;var sliderBox = $(".sliderbox",_this.obj); //滚动盒子var len = $("li",sliderBox).length; //数字长度var sliderNav = $(".slidernav",_this.obj); //数字导航var sliderText = $(".slidertext",_this.obj); //显示文字var _prev = $(".prev",_this.obj); //向左var _next = $(".next",_this.obj); //向右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 = $("li:eq("+j+") img",sliderBox).attr("alt");var url = $("li:eq("+j+") a",sliderBox).attr("href");sliderText.append('<li><a href="'+url+'">'+title+'</a></li>');}$("li",sliderNav).mouseover(function(){index = $("li",sliderNav).index(this);showImg(index);$(this).children("a").click(function(){return false;});}).eq(0).mouseover();if(len<=1){_prev.hide();_next.hide();}//prev_prev.click(function(){index -= 1;if(index == -1){index = len -1};showImg(index);});//next_next.click(function(){index += 1;if(index == len){index = 0};showImg(index);});$(_this.obj).hover(function(){clearInterval(sliderTimer);},function(){sliderTimer = setInterval(function(){showImg(index);index++;if(index == len){index=0;}},2000);}).trigger("mouseleave");function showImg(index){var sliderHeight = $(_this.obj).height();// sliderBox.stop(true,false).animate({"top":-sliderHeight*index},"slow");$("li",sliderBox).hide().eq(index).show();$("li",sliderNav).removeClass("current").eq(index).addClass("current");$("li",sliderText).hide().eq(index).show();}}</script>

更多代码与css可以查看示例

此处内容需要登录才可见

2013.6.14更新

图片循环向上滚动代码

JS代码如下：