admin 管理员组文章数量: 888526
使用ul li 实现图片的左右滚动
最近项目中使用到了一个效果，即图片的左右滚动效果。
以前也写过，但是没有整理，这次顺手整理一下吧。
实现的思路很简单。
图片列表使用li 实现，在ul 的最外层包裹上div ，将这个div的overflow设置为隐藏，并且将ul的宽度设置到最够大。这样，里面的图片会水平排列，同时也会被隐藏住。
点击按钮的时候，改变外层div的scrollLeft属性，即相当于拖动它的滚动条。
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title><script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" >function moveleft(){var scrleft = $("#maincontent").scrollLeft();if(scrleft>0) $("#maincontent").animate({scrollLeft:(scrleft-82)},500);}function moveright(){var licount = $("#ul1").children("li").size(); //li个数var perwidth = 20 + 62;//每个li的宽度和左控的和var liwidths = licount * perwidth; //所有li的总宽度var targetScrol = liwidths - 300;//li总宽度减去外层div的宽度。即得到滚动条需要滚动的长度var scrleft = $("#maincontent").scrollLeft();//目前滚动条的滚动长度if(!isNaN(targetScrol) && (scrleft < targetScrol)){$("#maincontent").animate({"scrollLeft":scrleft+perwidth},500); //若 目前的滚动条的长度小于 最终需要滚动的长度，则向左拉动滚动条，拉动的距离为 一个li的宽度和它的左外空的距离。}}
</script><style type="text/css">*{margin:0;padding:0; } #maincontent{width:300px;border:1px solid #0FC;height:100px;overflow:hidden;float:left;}#ul1{list-style-type:none; width:3000px;
}#ul1 li{float:left; margin-left:20px;}.imgdiv{background-image:url(img.png);background-position:top center;background-repeat:no-repeat;width:62px;height:62px; }.chardiv{text-align:center; }.leftmove{cursor:pointer;float:left; height:100px;line-height:100px;text-align:center;margin-right:10px;}.rightmove{cursor:pointer;float:left;height:100px; line-height:100px;text-align:center; margin-left:10px;}
</style></head><body><div style="position:absolute;left:200px;top:100px;"><div class="leftmove" οnclick="moveleft()"><<</div>
<div id="maincontent"><ul id="ul1"><li><div class='imgdiv'></div><div class='chardiv'>img1</div></li><li><div class='imgdiv'></div><div class='chardiv'>img2</div></li><li><div class='imgdiv'></div><div class='chardiv'>img3</div></li><li><div class='imgdiv'></div><div class='chardiv'>img4</div></li><li><div class='imgdiv'></div><div class='chardiv'>img5</div></li><li><div class='imgdiv'></div><div class='chardiv'>img6</div></li><li><div class='imgdiv'></div><div class='chardiv'>img7</div></li><li><div class='imgdiv'></div><div class='chardiv'>img8</div></li></ul>
</div>
<div class="rightmove" οnclick="moveright()">>></div></div>
</body>
</html>
关键在于，要将外层的div的overflow设置为隐藏，同时内部的ul宽度足够大！
附件：
本文标签： 使用ul li 实现图片的左右滚动
版权声明：本文标题：使用ul li 实现图片的左右滚动 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1688274227h200184.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论