jquery实现滑动js
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<style>
#container{width:480px;height:115px;padding:0px;overflow:hidden;position:relative;margin:100px00240px;}
#slider{height:115px;position:absolute;padding:0px;margin:0px;left:0px;}
#sliderli{float:left;width:60px;height:115px;}
#left_arrow{left:205px;top:50px;width:45px;height:58px;background-color:red;position:absolute;}
#right_arrow{left:728px;top:50px;width:45px;height:58px;background-color:red;position:absolute;}
</style>
<scripttype="text/javascript"src="jquery.js"></script>
<scriptlanguage="javascript">
varpic_num=20;//一共有几张图片
varcurrent=0;//开始显示第几张图片
varstep=4;//每次移动几张图片
varpage_show_number=8;//页面上一共有几张图片
varunlock=true;//是否正在动画中
vardistance=60;//每张图片的宽度
varcolors=newArray("012","123","234","345","456","567","678","789","89A","9AB","ABC","BCD","CDE","DEF");
$(document).ready(function(){
$("#slider").css({"width":pic_num*distance});
varli="";
for(vari=0;i<pic_num;i++){
li+="<listyle=background-color:"+colors[i%14]+"></li>";
}
$("#slider").html(li);
$("#right_arrow").click(function(){
if(current>=pic_num-page_show_number)return;
if(unlock){
unlock=false;
varstart=parseFloat($("#slider").css("left"),10);
varmovement=start-step*distance;
$("#slider").animate({"left":movement},function(){current+=step;unlock=true;});
}
});
$("#left_arrow").click(function(){
if(current<=0)return;
if(unlock){
unlock=false;
varstart=parseFloat($("#slider").css("left"),10);
varmovement=start+step*distance;
$("#slider").animate({"left":movement},function(){current-=step;unlock=true;});
}
});
});
</script>
</head>
<body>
<divid="left_arrow"></div><divid="right_arrow"></div>
<divid="container">
<ulid="slider">
</ul>
<div>
</body>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>js带按钮上下滚动效果</title>
<styletype="text/css">
ul{
margin:0;
padding:0;
list-style:none;
height:100000px;
}
li{
margin:0;
padding:0;
width:100px;
height:100px;
display:block;
float:top;
margin-bottom:5px;
background:#009900;
}
#img_bag{
width:110px;
height:600px;
background:#F2F2F2;
margin:0auto;
text-align:center;
}
#img_bag#img{
width:100px;
height:525px;
background:#969696;
overflow:hidden;
margin:auto;
}
</style>
</head>
<body>
<divid="img_bag">
<ahref="javascript:void(0)"onmousedown="moveTop()"><imgsrc="upp.jpg"border="0"/></a>
<divid="img">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
</div>
<ahref="javascript:void(0)"onmousedown="moveBottom()"><imgsrc="down.jpg"border="0"/></a>
</div>
<scripttype="text/javascript">
function$(obj){//获取指定对象
returndocument.getElementById(obj);
}
varmaxHeight=$("img").getElementsByTagName("ul")[0].getElementsByTagName("li").length*105;//滚动图片的最大高度
vartargety=211;//一次滚动距离
vardx;
vara=null;
functionmoveTop(){
varle=parseInt($("img").scrollTop);
if(le>211){
targety=parseInt($("img").scrollTop)-211;
}else{
targety=parseInt($("img").scrollTop)-le-1;
}
scTop();
}
functionscTop(){
dx=parseInt($("img").scrollTop)-targety;
$("img").scrollTop-=dx*.3;
clearScroll=setTimeout(scTop,50);
if(dx*.3<1){
clearTimeout(clearScroll);
}
}
functionmoveBottom(){
varle=parseInt($("img").scrollTop)+211;
varmaxL=maxHeight-600;
if(le<maxL){
targety=parseInt($("img").scrollTop)+211;
}else{
targety=maxL
}
scBottom();
}
functionscBottom(){
dx=targety-parseInt($("img").scrollTop);
$("img").scrollTop+=dx*.3;
a=setTimeout(scBottom,50);
if(dx*.3<1){
clearTimeout(a)
}
}
</script>
</body>
</html>
<SCRIPTlanguage=JavaScripttype=text/javascript>
functionMarqueeScroll_left(){
content.scrollLeft+=40;//层往左移
}
functionMarqueeScroll_right(){
content.scrollLeft-=40;//层往左移
}
//如果需要做成向上\向下的话,将上面的scrollLeft改为scrollTop即可
//向上：scrollTop++;
//向下：scrollTop--;
</SCRIPT>
<DIVid=contentstyle="OVERFLOW:hidden;WIDTH:200px;HEIGHT:30px">
<tablewidth="400"height="30"border="0"cellpadding="0"cellspacing="0">
<trbgcolor="#9933CC">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>0</td>
</tr>
</table>
</DIV>
<inputtype="button"name="Submit"value="左移"onclick="MarqueeScroll_left()">
<inputtype="button"name="Submit"value="右移"onclick="MarqueeScroll_right()">