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(‘<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日更新
把内容改为函数对象的方式来做。并且支持向左向右滚动的代码支持。

代码如下

复制代码

$("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;}

时间： 2024-08-30 04:47:13

jQuery图片文字上下左右滚动代码

jQuery图片文字上下左右滚动代码的相关文章

js 图片文字向上滚动代码

三款文字无缝滚动代码（上下左右）

简单javascript文字向上滚动代码

jQuery的上下无缝滚动代码（单行多行）

jquery 图片文本自动滚动插件

jquery 图片加载效果代码

jquery图片轮播特效代码分享_jquery

三款文字向上滚动代码

js文字向上滚动代码