jQuery产品列表滑动轮播循环单行展示

最新推荐文章于 2024-04-14 02:07:49 发布

no_waw

最新推荐文章于 2024-04-14 02:07:49 发布

阅读量527

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/no_waw/article/details/125068313

版权

本文展示了如何使用低版本jQuery和一个组件创建产品列表的滑动轮播效果。作者提到高版本的jQuery可能不适用，并邀请对jquery文件和组件感兴趣的人私聊获取资源。

摘要由CSDN通过智能技术生成

效果图展示：

jquery版本应使用低版本（我发现高版本不适用），这里还用到一个组件，使用起来更方便！！

jquery文件和组件想要的伙伴可以私聊我！

下面放代码

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="statics/css/style.css" />
</head>

<body>
	<div class="lc">
		<h2 class="title">jQuery产品列表滑动轮播循环展示</h2>
		<div class="items">
			<!-- 循环01 -->
			<div class="scroll_box">
				<div class="Scroll-leftone">
					<div class="hdone"> 
						<a class="next"><</a> 
						<a class="prev">></a> 
					</div>
					<div class="bdone">
						<ul class="picList">
							<li class="shop_li">
								  <a href="#">
								  	<div class="shop_list_itemup">
								  		<img src="../assets/images/eg2_choosen.png">
								  	</div>
								  	<div class="shop_list_itemdown">
								  		<p>1 港风绿色帽子女夏季韩版时尚百搭棒球帽男情侣休闲出游鸭舌百搭好看时髦</p>
								  		<div class="shop_score_box">
								  			<p id="p_score">1800积分</p>
								  			<p id="p_num">￥759.8</p>
								  		</div>
								  	</div>
								  </a>
							</li>
							<li class="shop_li">
								  <a href="#">
								  	<div class="shop_list_itemup">
								  		<img src="../assets/images/eg2_choosen.png">
								  	</div>
								  	<div class="shop_list_itemdown">
								  		<p>2 港风绿色帽子女夏季韩版时尚百搭棒球帽男情侣休闲出游鸭舌百搭好看时髦</p>
								  		<div class="shop_score_box">
								  			<p id="p_score">1800积分</p>
								  			<p id="p_num">￥759.8</p>
								  		</div>
								  	</div>
								  </a>
							</li>
							<li class="shop_l