效果图展示:
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