jQuery实现点击左右按钮两行列表滚动效果

最新推荐文章于 2023-09-22 12:46:27 发布

no_waw

最新推荐文章于 2023-09-22 12:46:27 发布

阅读量833

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.youkuaiyun.com/no_waw/article/details/125069970

版权

该博客介绍如何利用jQuery实现一个功能，当点击左右按钮时，两行列表可以同步滚动。内容包括必要的代码示例，需要引入jQuery库，并提供了CSS样式代码。

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

列表两行列表一起滚动

效果如下：

代码如下：

需要引入jquery文件

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实现点击左右按钮两行列表滚动效果</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
</head>

<body>
<!-- 左右滚动部分 begin -->
	<div class="scroll">
	<div class="picbox">
		<ul class="piclist mainlist">
			 <li class="goodlist">
                    	<a href="#" target="_blank" style="overflow:hidden; display:block; float:left;"><img src="images/pic.jpg" class="pics" /></a>
                        <dl>
                        	<dt>
                            	<a href="#" target="_blank" class="title">巴维兰麦芽奶油利口酒巴维兰麦芽奶油利口酒巴维兰麦芽奶油利口酒</a>
                                <span class="en">Bvland Malt Cream</span>
                                <p>换购价：<span class="change-price">￥100</span><span class="max-price">￥366</span></p>
                                <p><a href="javascript:;" class="exchange">换购</a></p>
                            </dt>
                        </dl>
                    </li>
                    
                     <li class="goodlist">
                    	<a href="#" target="_blank" style="overflow:hidden; display:block; float:left;"><img src="images/pic.jpg" class="pics" /></a>
                        <dl>
                        	<dt>
                            	<a href="#" target="_blank" class="title">巴维兰麦芽奶油利口酒巴维兰麦芽奶油利口酒巴维兰麦芽奶油利口酒</a>
                                <span class="en">Bvland Malt Cream</span>
                                <p>换购价：<span class="change-price">￥100</span><span class="max-price">￥366</span></p>
                                <p><a href="javascript:;" class="exchange">换购</a></p>
                            </dt>
                        </dl>
                    </li>