QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 图片代码 > swiper软件产品列表左右滚动代码

原创商用 swiper软件产品列表左右滚动代码

jQuery基于swiper.js制作响应式的主机商城软件产品项目列表布局,通过左右按钮控制产品列表滚动。默认支持自动滚动效果代码。
分享到微信朋友圈
X
[声明]该素材是本站付费买断的作品代码,享受著作权?;?,未经允许请勿转载,否则追究相应的法律责任。

使用方法:

1、head引入css文件

<!--swiper框架样式-->
<link rel="stylesheet" type="text/css" href="statics/css/swiper-3.4.2.min.css" />

<!--主要样式-->
<link rel="stylesheet" type="text/css" href="statics/css/style.css" />

2、head引入js文件

<!--jquery框架-->
<script src="statics/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>

3、body引入HTML代码

<div class="pc-bg-container">
	<div class="home-market-section">
		<li class="section-title">
			<a href="#">主机商城</a>
		</li>
		<div class="section-inner">
			<div class="swiper-container swiper-container-horizontal">
				<div class="swiper-wrapper">
					<!--下文中的data-swiper-parallax属性是swiper的视差效果,如果觉得污染代码,可以删除-->
					<div class="swiper-slide">
						<a href="#" data-swiper-parallax="-100" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
							<div class="inner-content">
								<img src="statics/images/20180921020340_20340.png" width="75">
								<h3>企业云盘</h3>
								<p>企业文件存储管理与协作云平台</p>
								<div class="time"><span>¥1155</span>/年</div>
							</div>
						</a>
						<a href="#" data-swiper-parallax="-400" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
							<div class="inner-content">
								<img src="statics/images/20181207091159_89245.png" width="75">
								<h3>泰克双创实践云平台</h3>
								<p>基于云主机建设的多功能实训平台</p>
								<div class="time"><span>¥1550000</span>/年</div>
							</div>
						</a>
						<a href="#" data-swiper-parallax="-700" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
							<div class="inner-content">
								<img src="statics/images/20180921020451_45996.png" width="75">
								<h3>视频云服务套餐</h3>
								<p>快速开启直播,引燃商业价值</p>
								<div class="time"><span>¥3600</span>/年</div>
							</div>
						</a>
						<a href="#" data-swiper-parallax="-1000" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
							<div class="inner-content">
								<img src="statics/images/20180921020526_82811.png" width="75">
								<h3>迅响响应式定制建站</h3>
								<p>开年大吉,建站立减2000</p>
								<div class="time"><span>¥800</span>/年</div>
							</div>
						</a>
					</div>
					<div class="swiper-slide">
						<a href="#" data-swiper-parallax="-100" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
							<div class="inner-content">
								<img src="statics/images/20180921020703_68805.png" width="75">
								<h3>智迅云客服</h3>
								<p>新一代的云客服解决方案</p>
								<div class="time"><span>¥180</span>/月</div>
							</div>
						</a>
						<a href="#" data-swiper-parallax="-400" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
							<div class="inner-content">
								<img src="statics/images/20190117112043_63875.png" width="75">
								<h3>云匣子</h3>
								<p>多终端运维的云堡垒机</p>
								<div class="time"><span>¥360</span>/月</div>
							</div>
						</a>
						<a href="#" data-swiper-parallax="-700" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
							<div class="inner-content">
								<img src="statics/images/20190117112001_88334.png" width="75">
								<h3>交管局满分学习系统</h3>
								<p>文件上传、在线转码、存储管理</p>
								<div class="time"><span>¥200000</span>/年</div>
							</div>
						</a>
						<a href="#" data-swiper-parallax="-1000" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
							<div class="inner-content">
								<img src="statics/images/20190117111422_72284.png" width="75">
								<h3>金华威云视频会议</h3>
								<p>新一代云视频会议解决方案</p>
								<div class="time"><span>¥800</span>/年</div>
							</div>
						</a>
					</div>
					<div class="swiper-slide">
						<a href="#" data-swiper-parallax="-100" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
							<div class="inner-content">
								<img src="statics/images/20190117111315_56863.png" width="75">
								<h3>虚拟化下一代防火墙</h3>
								<p>All in One设计的虚拟防火墙</p>
								<div class="time"><span>¥1600</span>/年</div>
							</div>
						</a>
						<a href="#" data-swiper-parallax="-400" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
							<div class="inner-content">
								<img src="statics/images/20190117111227_50389.png" width="75">
								<h3>云图管家</h3>
								<p>简单高效地保障企业文件资料安全</p>
								<div class="time"><span>¥5000</span>/次</div>
							</div>
						</a>
						<a href="#" data-swiper-parallax="-700" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
							<div class="inner-content">
								<img src="statics/images/20190223102649_33013.png" width="75">
								<h3>永洪敏捷BI</h3>
								<p>云上的数据展示分析工具</p>
								<div class="time"><span>¥200</span>/月</div>
							</div>
						</a>
						<a href="#" data-swiper-parallax="-1000" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
							<div class="inner-content">
								<img src="statics/images/20190117110258_76566.png" width="75">
								<h3>网银混合云咨询实施服务</h3>
								<p>提供咨询、规划、设计和实施服务</p>
								<div class="time"><span>¥1050000</span>/次</div>
							</div>
						</a>
					</div>
				</div>
				<div class="swiper-pagination"></div>
			</div>
			<div class="swiper-button-prev"></div>
			<div class="swiper-button-next"></div>
		</div>
	</div>
</div>

<script src="statics/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
$(function() {

	new Swiper(".pc-bg-container .home-market-section .swiper-container", {
		loop: !0,
		speed: 500,
		autoplay: {
			delay: 3e3,
			disableOnInteraction: false
		},
		slidesOffsetBefore: 0,
		parallax: !0,
		pagination: {
			el: ".pc-bg-container .swiper-pagination",
			clickable: true
		},
		navigation: {
			nextEl: ".swiper-button-next",
			prevEl: ".swiper-button-prev"
		}
	})

});
</script>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
金山彩票 乐彩www.cp7768.com| www.hx34.com-福彩3d图谜总汇| www.76146.com-澳门福乐彩开奖结果| www.168268.cc-被快三玩死了| www.362299.com-用彩虹写一段话| www.603661.com-梦见自己买彩票| www.780857.com-彩票开奖查询软软件| www.947568.com-彩票诈骗案-| www.29.cx-福利彩票快3怎么打| www.38830.com-下载红彩会-| www.ap21.com-福彩助手绑定站点| www.15915.cc-老彩票主页-| www.673367.com-快三彩票中奖神器| www.808755.com-福彩吧app-| www.901927.com-黑彩当庄怎么赚钱| www.976894.com-九江瑞昌彩礼| www.wc0.com-搜索3d新彩吧| www.06463.com-富贵彩票内部| www.lk25.com-520彩票平台| www.381963.com-点击精彩进入| www.085306.com-苹果app彩票软件| www.7190.biz-七彩印象16支香烟| www.78816.com-福彩领袖吧-| www.fp40.com-e球彩走势图进球数| www.150002.com-国民彩票手机版下载| www.247919.com-江苏快三是不是有假| www.72vd.com-私人黑彩票的猫腻| www.163110.com-福彩排列五游戏规则| www.306781.com-南昌福彩开奖| www.82224.com-福客来彩票登录官网| www.71yk.com-彩票1516下载| www.e29.shop-易彩网彩票走势图| www.vr2.com-华人彩票—app| www.232975.com-五百万彩票网电脑版| www.63zg.com-君耀优彩软件怎么样| www.872080.com-3d福利彩票可信吗| 大赢家彩票平台www.110832.com| www.d20.me-彩票開獎-| www.3407.xyz-彩报正版大花虎预测| www.527639.com-彩合网app-| www.tq32.com-五亿彩官方-| www.239566.com-快3体彩-| www.99go.com-今日竟彩结果| www.5184.biz-三d新彩吧图谜| www.944365.com-体彩论坛网-| 易彩网www.99638n.com| www.80px.com-彩盛彩票网站| www.da06.com-大发彩神邀请码| www.k35.top-3d彩吧图二版| www.338976.com-体彩排三藏机图汇总| www.472005.com-3d彩涂谜字谜| www.881432.com-一定牛竞彩篮球| www.ni27.com-极速快三开奖时间| www.759195.com-微彩吧是做什么的| www.891675.com-兴盛彩票app下载| www.991470.com-海南七星彩预测图规| www.64cm.com-足彩交流微信群| www.tg6.com-青海快三走势图案| www.yd85.com-韩国金山快三计划| www.24289.com-手绘彩铅动漫樱花树| www.76kv.com-a23彩票网app| www.12743.com-福彩3d之家论坛| www.311847.com-甘肃福利彩票网| www.420654.com-彩票兑奖多久到账| www.278532.com-快三秒奶茶消失了| www.451050.com-时时彩拉菲登陆| www.561966.com-4scc彩票图库| www.175040.com-快三投注平台哪个好| www.110403.com-九万彩票app下载| www.666138.cc-航天彩虹是国企吗| www.771066.com-杭州彩虹冰淇淋机| www.849260.com-足球彩票合买吧| www.906052.com-彩票沉迷破产| www.962817.com-银河彩票是正版网吗| www.cp2011.com-河北福彩快三一定牛| www.300069.cc-快三数据分析| www.386233.com-彩票代玩一单一结| www.773215.com-报纸彩票指南| www.7352.live-竟彩现场比分彩客网| www.0205.org-彩票歡樂赛车| www.20lq.com-宝彩票-| www.867786.cc-福彩彩神通今日快报| www.950441.com-乐彩客苹果版怎么下| 网易彩票www.07163o.com| www.312925.com-福彩快三αpp| www.381992.com-体彩书图片-| www.592676.com-彩虹电影台-| www.694500.com-竞彩足球彩票吧| www.799447.com-世界杯彩票怎么看| www.877954.com-体彩往期中奖号码| www.956269.com-买彩票上瘾的后果| www.wo53.com-贵卅快三基本走势图| www.2265.vip-北京福彩公告| www.004145.com-重庆寸时彩-| www.548704.com-福彩门户免全| www.ar24.com-湖北快三走势图和值| www.699569.com-哪种彩票最容易中奖| www.1051.net-婚恋网时时彩诈骗| www.9506.cm-大数定律彩票| www.966649.com-江苏快三模拟器| www.907917.com-七星彩中5个多少钱| www.978764.com-500万彩票网投注| www.126755.com-彩票api平台| www.4245.xyz-体彩19023-| www.637590.com-归纳色彩图片| www.811345.com-彩蛋是什么意思| www.az65.com-3d牛彩网图迷总汇| www.817317.com-8号彩票是马云的吗| www.338688.com-武汉市彩票兑奖中心| www.603337.com-卓易彩票官网地址| www.853776.com-彩票倍投方案低成本| www.lm61.com-中彩网官方网址| www.0791.cx-在线购买足彩| www.8682.com-七星彩机选购买投注| www.58911.cc-赌博游戏彩票机| www.262498.com-五分彩技巧-| www.759643.com-彩票快餐怎么玩| www.302222.com-大乐透走势图彩经网| www.44901.com-福利彩票微信群有吗| www.806765.com-手机体育彩票软件| www.ha53.com-充2万元728彩票| www.839070.com-体育路体彩中心地址| www.57028.com-彩播合集-| www.239720.com-红旗彩票快三| www.773309.com-晶彩靓颜祛斑霜| www.377802.com-男结婚给女方彩礼方| www.560020.com-体彩排列五南方双彩| www.660045.com-3d彩票ai预测| www.729773.com-愚人节中奖彩票制作| www.225357.com-河南福彩快三开奖查| www.511270.com-时时彩是不是正规的| www.773163.com-体彩五d今天推荐| www.q79.club-双阳区快三赌博案| www.3589.com-白宝彩票山东群英会| www.48019.com-搜索体育彩票七星彩| www.4314.vip-足彩靠谱分析| www.3587.com-澳门银河彩金| www.380092.com-七乐彩中奖2个号| www.yp71.com-万州体育彩票中心| www.95637.com-桃子足彩新浪博客| www.384711.com-中国福利彩票扶老| www.az36.com-牛彩网图谜总汇大全| www.wd74.com-东北快三查询| www.50zr.com-天彩控股36o相机| www.69647.com-彩票平台源码免费| www.174244.com-可以玩快三的app| www.026797.com-佰万彩票刷流水| www.151756.com-彩15-| www.543278.com-牛彩网一句定三码| www.14if.com-福彩三d各种字谜| www.2618.top-中福彩票在线| www.8678.space-七星体彩开奖结今天| www.32186.cc-做单易彩彩票| www.68723.cc-9购十分彩合法吗| www.039057.com-爱投彩票是正规的| www.642620.com-金山彩票官方客户端| www.198541.com-快三时时计划表| www.284555.com-中国福彩彩种介绍| www.365722.cc-彩铅森林主题画| www.jw63.com-彩虹周杰伦| www.2mb.cc-87彩店二维码| www.617166.com-体彩中心在哪里| www.684988.com-福彩3d天吉论坛| www.757645.cc-彩票跟买-|