使用ul li 实现图片的左右滚动

最近项目中使用到了一个效果，即图片的左右滚动效果。

以前也写过，但是没有整理，这次顺手整理一下吧。

实现的思路很简单。

图片列表使用li 实现，在ul 的最外层包裹上div ，将这个div的overflow设置为隐藏，并且将ul的宽度设置到最够大。这样，里面的图片会水平排列，同时也会被隐藏住。

点击按钮的时候，改变外层div的scrollLeft属性，即相当于拖动它的滚动条。

代码如下：

<!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>无标题文档</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宽度足够大！

附件：http://download.csdn.net/detail/lxl631/8417651

使用ul li 实现图片的左右滚动相关推荐

css ul li 图标图片位置定位背景定位
css ul li 图标图片位置定位背景定位这是网站页面只有一张背景图片的时代众多大型网站都是背景图片只用一整张这种模式背景图片的定位应用广泛 .cases li{ lineheight:2 ...
html li内文字垂直居中,ul li 下图片文字垂直居中
html代码如下: 首页 cqm8@163.com +86 898 234566 对应的css代码如下: .contact ul li { float: left; display: inline; ...
html5图片列表纵向,div css图片列表实例布局案例ul li布局
DIV CSS布局图文列表布局案例 ul li图文列表使用div css ul li布局图文列表小局部案例,学习图文列表布局实际案例. div+css图文布局案例图本案例在DIVCSS5模板基础上 ...
html li 圆点大小,ul li 定制圆点，list-style-image调整图片圆点大小与文字和图片排版...
今天我们要介绍两种前端要用到的布局:第一种是ul li定制化圆点的样式,然后使其与文字居中排列,另外一种是文字与图片混排并居中排版. 我们在使用ul li中通常会定制化圆点,使用如下代码就可以使圆点为 ...
html图片排列布局下面字_div+css（ul li）实现图片上文字下列表布局
css样式表代码: html布局代码: 效果图: html布局部分,可根据自己需要添加对应的div即可. 1.CSS关键样式单词解释 1).ul.imglist{ margin:0 auto; wid ...
ul、li显示图片标记
ul {list-style-type: none;padding: 0px;margin: 0px; } ul li {background-image: url(sqpurple.gif);bac ...
产品图片无缝水平滚动效果代码
产品图片无缝水平滚动效果代码: 在众多的网站都有这样的效果,那就是产品图片可以不间断的无缝滚动,效果挺美观的,也给静态的页面增加了几分动感,也便利了浏览者查看产品,算是比较好的效果吧,下面就介绍一下如 ...
JQuery图片无限循环滚动源码
平常项目中经常用到图片循环滚动,所以就写些必要的CSS定位,JS基本算法,最后就封装成JQuery图片无限循环滚动插件类,其实本质上是li块无限循环滚动,li块里面不管是图片还是其它内容,都OK的. ...
JavaScript之图片的无缝滚动
图片无缝滚动就是图片一直不停的滚动,好像没有无穷无尽似的,实际上就是几张图片不停的循环,但是看不出有从最后面切换到最前面的效果,这就是无缝滚动,文字和图片都可以无缝滚动,这里介绍的是图片,文字是同样的 ...

使用ul li 实现图片的左右滚动

使用ul li 实现图片的左右滚动相关推荐

最新文章

热门文章