点击左右按钮实现左右滚动效果详解:
很多网站中都有这样的展示效果，就是点击两端的按钮可以实现图片左右滚动效果，下面就通过代码实例介绍一下如何实现此效果。
代码如下:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">ul{ list-style:none; margin:0px; padding:0px; text-align:center;}#main{ width:600px; height:98px; float:left; border:1px solid #777; overflow:hidden;}#gd{ list-style:none outside none; height:98px; display:block; background:yellow; position:relative; width:9999em;}#gd li{ width:90px; height:80px; display:block; float:left; margin:9px 15px;}#box{ width:702px; height:100px; background:#ccc; margin:0 auto}#toleft{ width:30px; height:30px; background:red; margin:35px 10px; float:left; cursor:pointer;}#toright{ width:30px; height:30px; background:red; margin:35px 10px; float:left; cursor:pointer;}</style><script type="text/javascript" src='/images/loading.gif' data-original="mytest/jQuery/jquery-1.8.3.js"></script><script type="text/javascript">$(function(){ var pic_length=$('#gd li').length; var n=0; $('#toleft').click(function(){ if(!$('#gd').is(':animated')&&n){ $('#gd').animate({left:'+=120px'},500); n--; } }); $('#toright').click(function(){ if (!$('#gd').is(':animated')&&pic_length>n+5){ $('#gd').animate({left:'-=120px'},500); n++; } })}) </script></head><body><div id="box"> <div id="toleft"></div> <div id="main"> <ul id="gd"> <li style="background:red"></li> <li style="background:orange"></li> <li style="background:green"></li> <li style="background:navy"></li> <li style="background:blue"></li> <li style="background:purple"></li> <li style="background:pink"></li> <li style="background:gray"></li> </ul> </div> <div id="toright"></div></div></body></html>
代码实现了我们的要求，点击左右按钮可以实现左右滚动效果，当然这里都是以背景色替代的，下面就介绍一下它的实现过程。
一.实现原理:
点击实现左右滚动其实是将设置的li元素的父元素的left属性值，这样就看起来像是里面的li元素在左右滚动了。
二.代码注释:
1.$(function(){})，文档结构完全加载完毕再去执行函数中的代码。
2.var pic_length=$('#gd li').length，计算出li元素的数量。
3.var n=0，声明一个变量n变初始化为0，它用作存放左侧被隐藏的li元素的数目。
4.$('#toleft').click(function(){})，为左侧按钮注册事件处理函数。
5.if(!$('#gd').is(':animated')&&n){}，如果元素没有处于动画状态，并且n的数目不等于0，也就是说左侧具有隐藏的li元素.
6.$('#gd').animate({left:'+=120px'},500)，以动画方式设置left属性值，left属性值加120px，一个li元素占据的宽度。
7.n--，n的值减一。
三.相关阅读:
1.click事件可以参阅jQuery的click事件一章节。
2.is()函数可以参阅jQuery的is()方法一章节。
3.:animated选择器可以参阅jQuery的:animated选择器一章节。
4.animate()函数可以参阅jQuery的animate()方法一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=13540
更多内容可以参阅:http://www.softwhy.com/jquery/
原标题：点击左右按钮实现左右滚动效果详解
关键词：
我知道了 