php网页banner滚动源码,Jquery效果 首页banner轮播（2） 滚动轮播

上午写了一个很小的banner效果后，发现现在都不流行淡入淡出的轮播效果了，呵呵，下午花了点时间写了个滚动的轮播，感觉代码不整洁，所以不怎么专业，也是一个很小的东西，先放着这里接受点评吧，以后来优化。

注意导入Jquery文件，注意替换合适大小的图片。

滑动轮播动画

.clear{overflow:hidden; clear:both; width:0px; height:0px; }

.imgbox{width:640px;margin:0 auto; text-align:center; }

.banner_Box{width:640px; height:220px;overflow:hidden;}

ul{padding:0px; margin:0px;width:4500px;}

ul li{float:left; list-style:none;}

ul li.select{display:block;}

.imgnum span{border-radius:10px; font:normal normal bold 12px/15px 微软雅黑; color:#FFF; margin-left:5px; padding:3px 6px 3px 6px; background-color:#F90; cursor:pointer;}

.imgnum span.onselect{background-color:#F00;}

.imgnum{text-align:center; float:right; margin:-25px 30px; position:relative;}

• 
• 
• 
• 
• 

1

2

3

4

5

var time = "";

var index = 0;

$(function () {

showimg(index);

//鼠标移入移出

$(".imgnum span").hover(function () {

clearTimeout(time); //清除递归调用

var icon=$(this).text();

$(".imgnum span").removeClass("onselect").eq(icon-1).addClass("onselect");

$("#banner_img li").stop(true,true).css("margin-left","0px");//停止之前的动画。

if(icon>1){

$("#banner_img li").slice(0,icon-1).animate({'marginLeft':'-=640px'},600);

}

}, function () {

index=$(this).text()> 4 ? 0 :parseInt($(this).text());

time = setTimeout("showimg(" + index + ")", 3000);

});

});

function showimg(num) {

index = num;

$(".imgnum span").removeClass("onselect").eq(index).addClass("onselect");

if(index>0){

$("#banner_img li").eq(index-1).animate({'marginLeft':'-=640px'},1100);

}else if($("#banner_img li").eq(0).css("margin-left")=="-640px"){

for(var i=3;i>=0;i--){

$("#banner_img li").eq(i).animate({'marginLeft':'+=640px'},600);

}

}

index = index + 1 > 4 ? 0 : index + 1;

time = setTimeout("showimg(" + index + ")", 3000);

}