js 简单的滑动教程（三）
作者：Lellansin 转载请标明出处，谢谢
在前面的基础上（js 简单的滑动教程（二）），我们可以再添加一些功能使程序的可用性更高。
比如自动为图片的LI赋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简单的滑动教程（三） - Lellansin</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:160px; position:absolute; overflow:hidden } #center_window ul li{ height:200px; width:160px; float:left; position:absolute; } #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 id="list"> <li><img src="img/1.jpg" /></li> <li><img src="img/2.jpg" /></li> <li><img src="img/3.jpg" /></li> <li><img src="img/1.jpg" /></li> <li><img src="img/2.jpg" /></li> <li><img src="img/3.jpg" /></li> </ul> </div> <div id="right_arrow" onclick="sliderRight()"></div> </div> <script> // 图片总数 var total; // 计数器 var count; window.onload = function ini(){ // id名称计数器 nameCount = 0; // 最后一个计数 var last; // 获取列表的对象 var temp = document.getElementById("list").childNodes; // 为列表内的LI赋上id的值 for(var i=0;i<temp.length;i++){ // 不是文本节点 且 是LI节点则执行 if(temp[i].nodeName != "#text" && temp[i].nodeName == "LI"){ // li的id赋值 temp[i].id = "list_" + nameCount; // 将其隐藏 temp[i].style.display = "none"; // 已经找到的li计数 nameCount++; // 最后一计数 last = i; } } // 图片总数为已经找到的LI的总数 total = nameCount; // 当前图片为最后一个图片 count = total-1; // 当前图片设为显示 temp[last].style.display = ""; // 调用自动播放方法 AutoPlay(); } function sliderLeft(){ // 拼出当前以及左右图片的id var left = "list_"+((count+total*100-1)%total); var center = "list_"+((count+total*100)%total); var right = "list_"+((count+total*100+1)%total); // 获取对象 var pic_left = document.getElementById(left); var pic_center = document.getElementById(center); var pic_right = document.getElementById(right); // 向左滑，设置左边的图片显示 pic_left.style.display = ""; // 设置坐标 pic_left.style.left = -160 + "px"; pic_center.style.left = 0 + "px"; pic_right.style.left = 160 + "px"; var i=0; var timer = setInterval(function(){ if(i<=160){ //滑动 pic_left.style.left = i-160 + "px"; pic_center.style.left = i + "px"; pic_right.style.left = i+160 + "px"; i+=40; }else{ clearInterval(timer); } },80); // 计数 count--; } function sliderRight(){ // 拼出id var left = "list_"+((count+total*100-1)%total); var center = "list_"+((count+total*100)%total); var right = "list_"+((count+total*100+1)%total); // 获取对象 var pic_left = document.getElementById(left); var pic_center = document.getElementById(center); var pic_right = document.getElementById(right); // 向右滑，设置右边的图片显示 pic_right.style.display = ""; //设置坐标 pic_left.style.left = -160 + "px"; pic_center.style.left = 0 + "px"; pic_right.style.left = 160 + "px"; var i=160; var timer = setInterval(function(){ if(i>=0){ // 滑动 pic_left.style.left = i - 320 + "px"; pic_center.style.left = i - 160 + "px"; pic_right.style.left = i + "px"; i-=40; }else{ clearInterval(timer); } },80); // 计数 count++; } // 自动播放的计时器 var autoplayTimer; function AutoPlay(){ // 鼠标悬停时停止自动播放 document.getElementById("list").onmouseover = function(){ clearInterval(autoplayTimer); }; // 鼠标移开后继续自动播放 document.getElementById("list").onmouseout = function(){ AutoPlay(); }; autoplayTimer = setInterval(function(){ sliderRight(); },2000);// 每隔两秒调用一次sliderRight()方法，使其自动向右播放 } </script> </body> </html>
效果演示（IE6+）：
下一篇：
