jquery图片文字上下左右滚动代码怎么写|jQuery图片文字上下左右滚动代码

【www.bbyears.com--jquery】

需求描述

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

需求最终截图

核心代码
$(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(‘’+i+’’);}
for(var j=0; j var title = $(“.sliderbox li:eq(“+j+”) img”).attr(“alt”);
var url = $(“.sliderbox li:eq(“+j+”) a”).attr(“href”);
$(“.slidertext”).append(‘’+title+’’);
}

$(“.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代码：

《/ul>




2013年5月15日更新
把内容改为函数对象的方式来做。并且支持向左向右滚动的代码支持。

 

 代码如下

 

<script type="text/javascript">
//首页图片滚动jQuery代码
//code by 酷剑
//2013.1.27
//contact me at cbaojian@gmail.com
function 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(""+i+"");}
for(var j=0; j var title = $("li:eq("+j+") img",sliderBox).attr("alt");
var url = $("li:eq("+j+") a",sliderBox).attr("href");
sliderText.append(""+title+"");
}

$("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可以查看示例

面向对象函数版-使用渐隐渐现的幻灯片示例3
2013.6.14更新

图片循环向上滚动代码
js代码如下：

 代码如下  $(function(){
  var $this = $("#scrollTop");
  var scrollTimer;
  $this.hover(function(){
     clearInterval(scrollTimer);
   },function(){
     scrollTimer = setInterval(function(){
       // scrollNews( $this );
       scrollNews($this);
       //new scrollNews(".scrollNews");
     }, 3000 );
  }).trigger("mouseleave");
})
function scrollNews(obj){
   var $self = obj.find("ul:first");
   // var Liwidth = $self.find("li:first").width(); //获取宽度，向上滚动则需要获取高度.height()
   // $self.animate({ "marginLeft" : -Liwidth +"px" }, 600 , function(){ //向左滚动，向上滚动则需要改为marginTop,其他方向类似，下同
   //       $self.css({marginLeft:0}).find("li:first").appendTo($self); //appendTo能直接移动元素
   // })
var liHeight = $self.find("li:first").height();
$self.animate({
  "marginTop":-liHeight+"px"},600,function(){
      $self.css({marginTop:0}).find("li:first").appendTo($self);
  })
}

css代码如下：

 代码如下

 *{margin:0; padding:0;}
li{list-style:none;}
 .scrollNews{
 width:490px;
 height:170px;
 overflow:hidden;
 background:#eee;
 margin:10px auto;
}
.scrollNews ul{width:1800px;}
 .scrollNews li{
 height:170px;
/* float:left;
 display:inline;*/
}
.left li{float:left; display:inline;}

本文来源：http://www.bbyears.com/wangyezhizuo/46228.html