js 简单的滑动1
作者：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>
浙公网安备 33010602011771号