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

最新推荐文章于 2025-05-11 16:52:33 发布

乘桴游海

最新推荐文章于 2025-05-11 16:52:33 发布

阅读量1.3w

点赞数 4

CC 4.0 BY-SA版权

分类专栏： jquery效果文章标签： jquery

本文链接：https://blog.youkuaiyun.com/lxl631/article/details/43412525

jquery效果专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何使用HTML、CSS和JavaScript实现图片的左右滚动效果。通过将图片列表包裹在隐藏滚动条的div中，并通过改变外层div的scrollLeft属性来模拟滚动效果，实现流畅的图片展示体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

实现的思路很简单。

图片列表使用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" onclick="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" onclick="moveright()">>></div>

</div>
</body>
</html>

关键在于，要将外层的div的overflow设置为隐藏，同时内部的ul宽度足够大！

附件：http://download.youkuaiyun.com/detail/lxl631/8417651