js 简单的滑动教程（一）
作者：Lellansin 转载请标明出处，谢谢
首先我们要实现一个简单的滑动，三张图、点击左边向左滑动，点右向右滑，碰到临界值的时候就不能滑动。
这个简单滑动的原理是，通过改变边距来达到移动图片的效果，比如向右滑动的时候，让左边li的左边距不断减小来移动图片，而右边的li（向左浮动）会自动靠过来，等到图片移出center_window之后，再设置左边li的display为none使其隐藏。在时间恰当好的情况下，看起来就好像是当前的图片向左滑动，而右边的图片滑了过来。
要实现这一功能并不难，我们首先需要把静态页面准备好。
<div id="window"> <div id="left_arrow"></div> <div id="center_window"> <ul> <li id="list_0"><img src="img/1.jpg" /></li> <li id="list_1"><img src="img/2.jpg" /></li> <li id="list_2"><img src="img/3.jpg" /></li> </ul> </div> <div id="right_arrow"></div> </div>
整体一个window，里面包含三个部分，分别是向左和向右的箭头，以及中间的显示列表。
<style type="text/css"> *{ margin:0; padding:0; } li{ list-style: none; } #window{ height:200px; width:230px;margin:0 auto; overflow:hidden; } #center_window{ height:200px; width:160px; float:left; } #center_window ul{ height:200px; width:600px; } #center_window ul li{ height:200px; width:160px; float:left; } #center_window img{ display:block; margin:5px auto; } #left_arrow{ height:200px; width:35px; float:left; background:url("left.png") no-repeat scroll 5px 75px #fff; } #left_arrow:hover{ cursor: pointer; } #right_arrow{ height:200px; width: 35px; float:right; background:url("right.png") no-repeat scroll 0px 75px #fff; } #right_arrow:hover{ cursor: pointer; } </style>
以上是css部分，我们将显示的图片宽高需在160px和200px以内。
<script>
//全局计数器
var count = 0;
function sliderLeft(){
if(count>0){
count--;
}
//获取当前要操作的li
var pic = document.getElementById("list_"+count);
//若上一个li已经被隐藏，表示已经到了第一个li
if(!(pic.style.display == "none")){
return;
}
//显示li
pic.style.display = "";
var i=250;
var timer = setInterval(function(){
if(i<251){
//通过改变边距来滑动
pic.style.margin = "0 0 0 -"+ i +"px";
i-=50;
}else{
// 清楚计时器
clearInterval(timer);
}
},80);
//80为每80微秒执行一次,通过这个执行间隔与上方每次减少的像素来控制滑动的速度
}
function sliderRight(){
if(count<2){
count++;
}
/** count-1 是为了让计数器计到当前的li,
/* 否则计数器未计到当前的li,会导致向左滑动时向左多减一个
**/
var pic = document.getElementById("list_"+(count-1));
var i=0;
var timer1 = setInterval(function(){
if(i<251){
pic.style.margin = "0 0 0 -"+ i +"px";
i+=50;
}else{
// 滑出边界后使其隐藏
pic.style.display = "none";
clearInterval(timer1);
}
},80);
}
</script>
简单的js已经出现，具体已经有注释，注意getElementById的时候里面的id要跟li的id相对应。
整体代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js滑动</title> <style type="text/css"> *{ margin:0; padding:0; } li{ list-style: none; } #window{ height:200px; width:230px; margin:0 auto; overflow:hidden; } #center_window{ height:200px; width:160px; float:left; } #center_window ul{ height:200px; width:600px; } #center_window ul li{ height:200px; width:160px; float:left; } #center_window img{ display:block; margin:5px auto; } #left_arrow{ height:200px; width:35px; float:left; background:url("left.png") no-repeat scroll 5px 75px #fff; } #left_arrow:hover{ cursor: pointer; } #right_arrow{ height:200px; width: 35px; float:right; background:url("right.png") no-repeat scroll 0px 75px #fff; } #right_arrow:hover{ cursor: pointer; } </style> </head> <body> <div id="window"> <div id="left_arrow" onclick="sliderLeft()"></div> <div id="center_window"> <ul> <li id="list_0"><img src="img/1.jpg" /></li> <li id="list_1"><img src="img/2.jpg" /></li> <li id="list_2"><img src="img/3.jpg" /></li> </ul> </div> <div id="right_arrow" onclick="sliderRight()"></div> </div> <script> var count = 0; function sliderLeft(){ if(count>0){ count--; } var pic = document.getElementById("list_"+count); if(!(pic.style.display == "none")){ return; } pic.style.display = ""; var i=250; var timer = setInterval(function(){ if(i<251){ pic.style.margin = "0 0 0 -"+ i +"px"; i-=50; }else{ clearInterval(timer); } },80); } function sliderRight(){ if(count<2){ count++; } var pic = document.getElementById("list_"+(count-1)); var i=0; var timer1 = setInterval(function(){ if(i<251){ pic.style.margin = "0 0 0 -"+ i +"px"; i+=50; }else{ pic.style.display = "none"; clearInterval(timer1); } },80); } </script> </body> </html>
效果演示（本代码不支持IE6）：
下一篇：
