一行多个轮播图

最新推荐文章于 2023-09-19 15:03:34 发布

持之以恒璃

最新推荐文章于 2023-09-19 15:03:34 发布

阅读量1.1k

点赞数 1

分类专栏： web 文章标签： javascript jquery css3 css html

本文链接：https://blog.csdn.net/weixin_44676551/article/details/107670635

版权

web 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!--//swiper 滚动图片插件-->

`在这里插入代码片`

	$(function () {
		//回调函数计数
		var callbackIndex = 0;
		$('.silder-box-2').mySilder({
			width: 295, //容器的宽度 必选参数!!!!!!
			height: 475, //容器的高度 必选参数!!!!!!
			auto: true, //是否自动滚动
			autoTime: 5, //自动滚动时，时间间隙，即多长滚动一次,单位(秒)
			direction: 'x', //滚动方向,默认X方向
			autoType: 'left', //滚动方向，auto为true时生效
			few: 1, //一次滚动几个，默认滚动1张
			showFew: 3, //显示几个,就不用调css了,默认显示一个
			clearance: 0, //容器之间的间隙，默认为 0
			silderMode: 'jswing', //滚动方式
			timeGap: 700, //动画间隙，完成一次动画需要多长时间，默认700ms
			// buttonPre:'.silder-button.btl',//上一个，按钮
			// buttonNext:'.silder-button.btr',//下一个，按钮
			jz: true, //点击时，是否等待动画完成
			runEnd: function () { //回调函数
				callbackIndex++;
				$('.cj em').text(callbackIndex);
			}
		});


		$('.silder-box-3').mySilder({
			width: 385, //容器的宽度 必选参数!!!!!!
			height: 480, //容器的高度 必选参数!!!!!!
			auto: true, //是否自动滚动 
			direction: 'y', //滚动方向,默认X方向
			few: 1, //一次滚动几个，默认滚动1张
			showFew: 1, //显示几个,就不用调css了,默认显示一个
			clearance: 40, //容器之间的间隙，默认为 0
			silderMode: 'jswing', //滚动方式
			timeGap: 300, //动画间隙，完成一次动画需要多长时间，默认700ms
			autoTime: 4, //自动滚动时，时间间隙，即多长滚动一次
			jz: true, //点击时，是否等待动画完成
			autoType: 'up', //滚动方向，auto为true时生效
		});






	});


<!-- 轮播图 -->
			<div class='silder-box silder-box-2'>
				<div class='silder' style="height: 478px;">
					<ul style="width:100%">
						<li style="width:295px;height:475px;">
							<div class="lidiv">
								<div class="lidivone">
									<p style="text-align: left;">
										<img src="views/images1/yonghupinglun.png" style="width:50px;height:50px;"
											alt="用户评论">
										<span class="iphone">137****5964</span><br>
										<!-- display: inline-block;position:absolute;top: 46px; -->
										<span style="display:inline-block;position:absolute;top:40px;left: 93px;">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
										</span>
									</p>
								</div>

								<div class="lidivtwo">
									很不错，打款很快，交易非常顺利
								</div>


								<div class="lidivthree">
									<p><img src="views/images1/dingwei.png" style="width:14px;height:16px;"
											alt="位置">
										<span style="color: #666666;">
											<span style="color: #666666;font-size: 12px;">通过邮寄方式回收了一台</span><span
												style="color:red;">iphone x</span>
										</span>
									</p>
								</div>
							</div>



							<div class="lidiv" style="border-bottom:none">
								<div class="lidivone">
									<p style="text-align: left;">
										<img src="views/images1/yonghupinglun.png" style="width:50px;height:50px;"
											alt="用户评论">
										<span class="iphone">156****5986</span><br>
										<!-- display: inline-block;position:absolute;top: 46px; -->
										<span style="display:inline-block;position:absolute;top:40px;left: 93px;">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
										</span>
									</p>
								</div>

								<div class="lidivtwo">
									跟预估的价钱一样，而且确认价格后很快就打款了，赞一个！！！
								</div>


								<div class="lidivthree">
									<p><img src="views/images1/dingwei.png" style="width:15px;height:17px;"
											alt="位置">
										<span style="color: #666666;">
											<span style="color: #666666;font-size: 12px;">通过邮寄方式回收了一台</span><span
												style="color:red;">iphone x</span>
										</span>
									</p>
								</div>
							</div>

						</li>



						<li style="width:295px;height:475px;">
							<div class="lidiv">
								<div class="lidivone">
									<p style="text-align: left;">
										<img src="views/images1/yonghupinglun.png" style="width:50px;height:50px;"
											alt="用户评论">
										<span class="iphone">188****5864</span><br>
										<!-- display: inline-block;position:absolute;top: 46px; -->
										<span style="display:inline-block;position:absolute;top:40px;left: 93px;">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
										</span>
									</p>
								</div>

								<div class="lidivtwo">
									一开始抱着试试的态度，没想到交易那么顺利，服务态度非常好，以后还会找你们
								</div>


								<div class="lidivthree">
									<p><img src="views/images1/dingwei.png" style="width:15px;height:17px;"
											alt="位置">
										<span style="color: #666666;">
											<span style="color: #666666;font-size: 12px;">通过邮寄方式回收了一台</span><span
												style="color:red;">iphone x</span>
										</span>
									</p>
								</div>
							</div>



							<div class="lidiv" style="border-bottom:none">
								<div class="lidivone">
									<p style="text-align: left;">
										<img src="views/images1/yonghupinglun.png" style="width:50px;height:50px;"
											alt="用户评论">
										<span class="iphone">134****0062</span><br>
										<!-- display: inline-block;position:absolute;top: 46px; -->
										<span style="display:inline-block;position:absolute;top:40px;left: 93px;">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
										</span>
									</p>
								</div>

								<div class="lidivtwo">
									非常感谢156号客服！！！提现以后
									一直收不到款项，客服一直在帮我电
									话解决，最后发现是我绑定错了账户，
									哈哈，非常感谢客服一个多小时的耐心
									帮助！！！
								</div>


								<div class="lidivthree">
									<p><img src="views/images1/dingwei.png" style="width:15px;height:17px;"
											alt="位置">
										<span style="color: #666666;">
											<span style="color: #666666;font-size: 12px;">通过邮寄方式回收了一台</span><span
												style="color:red;">iphone x</span>
										</span>
									</p>
								</div>
							</div>

						</li>



						<li style="width:295px;height:475px;">
							<div class="lidiv">
								<div class="lidivone">
									<p style="text-align: left;">
										<img src="views/images1/yonghupinglun.png" style="width:50px;height:50px;"
											alt="用户评论">
										<span class="iphone">137****5178</span><br>
										<!-- display: inline-block;position:absolute;top: 46px; -->
										<span style="display:inline-block;position:absolute;top:40px;left: 93px;">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
										</span>
									</p>
								</div>

								<div class="lidivtwo">
									一开始还担心他们收到机器后会像其他平台一样，各种理由压价，通过这次交易看来我的担心是多余的，不错
									通过邮寄回收方式成功回收一台
								</div>


								<div class="lidivthree">
									<p><img src="views/images1/dingwei.png" style="width:15px;height:17px;"
											alt="位置">
										<span style="color: #666666;">
											<span style="color: #666666;font-size: 12px;">通过邮寄方式回收了一台</span><span
												style="color:red;">iphone x</span>
										</span>
									</p>
								</div>
							</div>



							<div class="lidiv" style="border-bottom:none">
								<div class="lidivone">
									<p style="text-align: left;">
										<img src="views/images1/yonghupinglun.png" style="width:50px;height:50px;"
											alt="用户评论">
										<span class="iphone">188****5688</span><br>
										<!-- display: inline-block;position:absolute;top: 46px; -->
										<span style="display:inline-block;position:absolute;top:40px;left: 93px;">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
										</span>
									</p>
								</div>

								<div class="lidivtwo">
									非常棒的一次交易体验，确认收货后半小时完成质检，一个小时打款成功
								</div>


								<div class="lidivthree">
									<p><img src="views/images1/dingwei.png" style="width:15px;height:17px;"
											alt="位置">
										<span style="color: #666666;">
											<span style="color: #666666;font-size: 12px;">通过邮寄方式回收了一台</span><span
												style="color:red;">iphone x</span>
										</span>
									</p>
								</div>
							</div>

						</li>


						<li style="width:295px;height:475px;">
							<div class="lidiv">
								<div class="lidivone">
									<p style="text-align: left;">
										<img src="views/images1/yonghupinglun.png" style="width:50px;height:50px;"
											alt="用户评论">
										<span class="iphone">152****4752</span><br>
										<!-- display: inline-block;position:absolute;top: 46px; -->
										<span style="display:inline-block;position:absolute;top:40px;left: 93px;">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
										</span>
									</p>
								</div>

								<div class="lidivtwo">
									不错，对比了好几家，最终还是选择了数码回收网，确实不错
								</div>


								<div class="lidivthree">
									<p><img src="views/images1/dingwei.png" style="width:15px;height:17px;"
											alt="位置">
										<span style="color: #666666;">
											<span style="color: #666666;font-size: 12px;">通过邮寄方式回收了一台</span><span
												style="color:red;">iphone x</span>
										</span>
									</p>
								</div>
							</div>



							<div class="lidiv" style="border-bottom:none">
								<div class="lidivone">
									<p style="text-align: left;">
										<img src="views/images1/yonghupinglun.png" style="width:50px;height:50px;"
											alt="用户评论">
										<span class="iphone">181****0072</span><br>
										<!-- display: inline-block;position:absolute;top: 46px; -->
										<span style="display:inline-block;position:absolute;top:40px;left: 93px;">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
										</span>
									</p>
								</div>

								<div class="lidivtwo">
									朋友推荐的平台，确实很不错
								</div>


								<div class="lidivthree">
									<p><img src="views/images1/dingwei.png" style="width:15px;height:17px;"
											alt="位置">
										<span style="color: #666666;">
											<span style="color: #666666;font-size: 12px;">通过邮寄方式回收了一台</span><span
												style="color:red;">iphone x</span>
										</span>
									</p>
								</div>
							</div>

						</li>

						<li style="width:295px;height:475px;">
							<div class="lidiv">
								<div class="lidivone">
									<p style="text-align: left;">
										<img src="views/images1/yonghupinglun.png" style="width:50px;height:50px;"
											alt="用户评论">
										<span class="iphone">153****5698</span><br>
										<!-- display: inline-block;position:absolute;top: 46px; -->
										<span style="display:inline-block;position:absolute;top:40px;left: 93px;">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
										</span>
									</p>
								</div>

								<div class="lidivtwo">
									报价准确，不压价，打款快！
								</div>


								<div class="lidivthree">
									<p><img src="views/images1/dingwei.png" style="width:15px;height:17px;"
											alt="位置">
										<span style="color: #666666;">
											<span style="color: #666666;font-size: 12px;">通过邮寄方式回收了一台</span><span
												style="color:red;">oppo Reno</span>
										</span>
									</p>
								</div>
							</div>



							<div class="lidiv" style="border-bottom:none">
								<div class="lidivone">
									<p style="text-align: left;">
										<img src="views/images1/yonghupinglun.png" style="width:50px;height:50px;"
											alt="用户评论">
										<span class="iphone">188****6954</span><br>
										<!-- display: inline-block;position:absolute;top: 46px; -->
										<span style="display:inline-block;position:absolute;top:40px;left: 93px;">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
										</span>
									</p>
								</div>

								<div class="lidivtwo">
									担心实体店的那些套路，看了好几家，还是选择了数码回收网，价格合理，没那么多套路，还会合作
								</div>


								<div class="lidivthree">
									<p><img src="views/images1/dingwei.png" style="width:15px;height:17px;"
											alt="位置">
										<span style="color: #666666;">
											<span style="color: #666666;font-size: 12px;">通过邮寄方式回收了一台</span><span
												style="color:red;">vivo NEX双屏版</span>
										</span>
									</p>
								</div>
							</div>

						</li>

						<li style="width:295px;height:475px;">
							<div class="lidiv">
								<div class="lidivone">
									<p style="text-align: left;">
										<img src="views/images1/yonghupinglun.png" style="width:50px;height:50px;"
											alt="用户评论">
										<span class="iphone">137****0025</span><br>
										<!-- display: inline-block;position:absolute;top: 46px; -->
										<span style="display:inline-block;position:absolute;top:40px;left: 93px;">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
										</span>
									</p>
								</div>

								<div class="lidivtwo">
									很不错的一个手机回收平台
								</div>


								<div class="lidivthree">
									<p><img src="views/images1/dingwei.png" style="width:15px;height:17px;"
											alt="位置">
										<span style="color: #666666;">
											<span style="color: #666666;font-size: 12px;">通过邮寄方式回收了一台</span><span
												style="color:red;">华为mate 20pro</span>
										</span>
									</p>
								</div>
							</div>



							<div class="lidiv" style="border-bottom:none">
								<div class="lidivone">
									<p style="text-align: left;">
										<img src="views/images1/yonghupinglun.png" style="width:50px;height:50px;"
											alt="用户评论">
										<span class="iphone">138****6354</span><br>
										<!-- display: inline-block;position:absolute;top: 46px; -->
										<span style="display:inline-block;position:absolute;top:40px;left: 93px;">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
										</span>
									</p>
								</div>

								<div class="lidivtwo">
									第三次在数码回收网交易了，没有让我失望
								</div>


								<div class="lidivthree">
									<p><img src="views/images1/dingwei.png" style="width:15px;height:17px;"
											alt="位置">
										<span style="color: #666666;">
											<span style="color: #666666;font-size: 12px;">通过邮寄方式回收了一台</span><span
												style="color:red;">魅族X8</span>
										</span>
									</p>
								</div>
							</div>

						</li>

						<li style="width:295px;height:475px;">
							<div class="lidiv">
								<div class="lidivone">
									<p style="text-align: left;">
										<img src="views/images1/yonghupinglun.png" style="width:50px;height:50px;"
											alt="用户评论">
										<span class="iphone">189****6248</span><br>
										<!-- display: inline-block;position:absolute;top: 46px; -->
										<span style="display:inline-block;position:absolute;top:40px;left: 93px;">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
										</span>
									</p>
								</div>

								<div class="lidivtwo">
									和在官网上预估的价格一样，不会压价，有什么问题客服都会及时解决，非常棒！
								</div>


								<div class="lidivthree">
									<p><img src="views/images1/dingwei.png" style="width:15px;height:17px;"
											alt="位置">
										<span style="color: #666666;">
											<span style="color: #666666;font-size: 12px;">通过邮寄方式回收了一台</span><span
												style="color:red;">小米3C</span>
										</span>
									</p>
								</div>
							</div>



							<div class="lidiv" style="border-bottom:none">
								<div class="lidivone">
									<p style="text-align: left;">
										<img src="views/images1/yonghupinglun.png" style="width:50px;height:50px;"
											alt="用户评论">
										<span class="iphone">155****5664</span><br>
										<!-- display: inline-block;position:absolute;top: 46px; -->
										<span style="display:inline-block;position:absolute;top:40px;left: 93px;">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
										</span>
									</p>
								</div>

								<div class="lidivtwo">
									不压价，非常诚信
								</div>


								<div class="lidivthree">
									<p><img src="views/images1/dingwei.png" style="width:15px;height:17px;"
											alt="位置">
										<span style="color: #666666;">
											<span style="color: #666666;font-size: 12px;">通过邮寄方式回收了一台</span><span
												style="color:red;">HTC D10W</span>
										</span>
									</p>
								</div>
							</div>

						</li>

						<li style="width:295px;height:475px;">
							<div class="lidiv">
								<div class="lidivone">
									<p style="text-align: left;">
										<img src="views/images1/yonghupinglun.png" style="width:50px;height:50px;"
											alt="用户评论">
										<span class="iphone">188****5222</span><br>
										<!-- display: inline-block;position:absolute;top: 46px; -->
										<span style="display:inline-block;position:absolute;top:40px;left: 93px;">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
										</span>
									</p>
								</div>

								<div class="lidivtwo">
									不会完全清除数据，客服很耐心的教我完美清除，服务态度没的说
								</div>


								<div class="lidivthree">
									<p><img src="views/images1/dingwei.png" style="width:15px;height:17px;"
											alt="位置">
										<span style="color: #666666;">
											<span style="color: #666666;font-size: 12px;">通过邮寄方式回收了一台</span><span
												style="color:red;">oppo R9plus</span>
										</span>
									</p>
								</div>
							</div>



							<div class="lidiv" style="border-bottom:none">
								<div class="lidivone">
									<p style="text-align: left;">
										<img src="views/images1/yonghupinglun.png" style="width:50px;height:50px;"
											alt="用户评论">
										<span class="iphone">137****6653</span><br>
										<!-- display: inline-block;position:absolute;top: 46px; -->
										<span style="display:inline-block;position:absolute;top:40px;left: 93px;">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
											<img src="views/images1/xingxing.png" alt=""
												style="width:10px;height:10px">
										</span>
									</p>
								</div>

								<div class="lidivtwo">
									发现他们公司正好就在住处附近，就直接去他们公司质检了，报价合理，工作人员的服务态度也非常好，最主要的是老板请喝的普洱茶口感很不错，哈哈
								</div>


								<div class="lidivthree">
									<p><img src="views/images1/dingwei.png" style="width:15px;height:17px;"
											alt="位置">
										<span style="color: #666666;">
											<span style="color: #666666;font-size: 12px;">通过邮寄方式回收了一台</span><span
												style="color:red;">iPhone XS</span>
										</span>
									</p>
								</div>
							</div>
						</li>

					</ul>
				</div>
			</div>

							</ul>
						</div>
						<!-- <div class='silder-button btl'></div>
						<div class='silder-button btr'></div> -->
					</div>

持之以恒璃

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录