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.3762.me-新浪爱彩大乐透开奖| www.822528.com-3d家彩网开机号是| www.858797.com-福彩生肖6十1开奖| www.569744.com-凤凰彩票十分快三| www.699239.cc-老彩票主页-| www.845836.com-足彩竞猜模拟| www.984216.com-3d图库新彩吧| www.gp94.com-最放心的彩票app| www.462872.com-环球彩app-| www.940764.com-360彩票杀号定胆| www.sj3.com-分分彩日赚一千技巧| www.a31.cc-7乐彩票开奖结果| www.0428.wang-彩缘同志-| www.605551.com-彩晶膜和壁纸哪个好| www.622205.com-五福彩正规吗| www.710059.com-彩票黄历预测号码| www.791893.com-网上买时时彩犯法吗| www.868328.com-海南彩梦册-| www.935965.com-彩神吧双胆预测| 890彩票www.890c.com| www.270.org-湖南彩票论坛| www.1178.top-体彩店开业素材| www.7320.vip-彩虹电量-| www.404146.com-彩陶王酒价格及图片| www.51779.cc-牛彩平台新登录地址| www.2430.cc-五分彩是哪里的彩票| www.10489.com-风彩网-| www.86892.cc-拉萨快三查询| www.085010.com-时时彩赢彩王app| www.176909.com-幸运快三是什么彩票| www.253976.com-昨天快三走势图85| www.328901.com-牛彩网彩摘网吧论| www.403677.com-七彩乐开奖结男| www.63hk.com-润金店彩金能回收吗| www.1278.cc-乐彩网站诈骗| www.91ds.cc-辉煌娱乐彩票骗局| www.556999.cc-28彩官网-| www.555585.com-万彩吧火爆四肖| www.328005.com-福彩三天计划必出来| www.514138.cc-泰国时时彩合法吗| www.639744.com-体彩竞彩申请条件| www.736753.com-上海体育彩票官网| www.826708.com-信达国际彩票| www.916981.com-信阳合买彩票中| 500彩票www.50051q.com| www.954497.com-博竟彩票平台| www.604606.com-新粤彩每期报纸彩图| www.q14.com-3d彩票-| www.87871.com-两分彩是不是骗局| www.103641.com-贵宾中彩网-| www.174234.com-湖北快三是骗局揭秘| www.339226.com-福彩快三江苏三不同| www.39151.cc-福彩官方购彩app| www.002908.com-七星彩开奖结果查| www.066021.com-1516彩票网| www.147055.com-彩富网资料大全| www.223565.com-500彩票资讯| www.871561.com-彩票排名靠前的软件| www.983551.com-福利彩票四等奖兑奖| www.m47.cc-福彩快乐十分的玩法| www.333506.cc-吃饭送彩票违法吗| www.615626.com-体彩19055期| www.757536.com-睛彩山西百姓春晚| www.845816.com-彩票是事业单位吗| www.873413.com-彩票有限额吗| www.019911.com-67彩票首页-| www.947035.com-1分彩官方下载| www.29969.cc-彩票平台套利风控| www.354044.com-彩票一亿-| www.271903.com-易网彩票开奖查询| www.361503.com-海口七星彩大师预测| www.538690.com-威尼斯国际时时彩| www.623770.com-彩票分析家安卓版| www.692515.com-幸运28购彩平台| www.777810.com-京彩app是真的吗| www.879040.com-彩票5app下载| www.957724.com-福彩三d速查表| 大玩家彩票www.84499t.com| www.065533.com-108彩票-| www.131075.com-太康13万彩礼| www.199646.com-江西彩票十一选五| www.ha38.com-v湖北快三结果| www.lj38.com-中彩彩票注册| www.596944.com-体育彩票105| www.25521.cc-体彩安徽领奖地址| www.26119.cc-彩虹羽泉mp3| www.92829.cc-福彩3千喜开机号| www.068401.com-赢彩王破解免费版| www.139982.com-体育彩票查询结果| www.796341.com-盈彩吧登陆地址| www.201393.com-网易购彩大厅| www.305780.com-也买彩是正规彩票吗| www.22571.cc-万人彩票站-| www.78581.cc-苏州南站到新昌双彩| www.24go.com-558彩票网平台| www.n09.cn-吉林快三派奖网| www.760490.com-彩票平台怎么刷分红| www.tb87.com-中国大量彩票店倒闭| www.45ci.com-意式彩虹冰淇淋机| www.43673.com-河北快三号码推崇| www.21oj.com-彩票竞彩-| www.978124.com-彩钢网围挡-| www.34086.com-排列三乐彩吧论坛| www.490728.com-淘宝的福利彩票| www.333104.com-究竟怎样才能中彩票| www.355789.com-手机投够彩票| 彩霸王www.cbw222.com| www.9473.loan-信游彩票平台黑钱| www.012757.com-南国七星彩开奖号码| www.908006.com-七乐彩怎么看| www.5220.vip-福彩八卦库图| www.29002.com-手机买彩票的网站| www.394896.com-星期五买什么彩票| www.509571.com-盈彩宝下载安装| www.587699.com-体育彩票哪个网站买| www.660451.com-七星彩南国走势图| www.727062.com-大爆奖彩票官方网站| www.793899.com-c699彩票com| www.862605.com-快三有东北快三嘛| www.918609.com-官方彩票手机软件| www.971353.com-手机澳客彩票网| 福利彩票www.99677a.com| www.25133.com-福彩网是什么样子的| www.99599.cc-华人彩登录官方网站| www.072698.com-大乐彩首页-| www.146559.com-老版本易彩彩票软件| www.010481.com-熊猫竞彩app官网| www.330386.com-松原吉林快三微信群| www.964489.com-足彩新浪必发指数网| www.cp0101.com-1分钟彩票app| www.898112.com-手机福利彩票中奖图| www.280618.com-新时时彩是哪的| www.0329.cn-釉中彩餐具怎么样| www.445060.com-下彩彩-| www.8320.top-2018彩票输了| www.61238.cc-彩票105安卓版| www.59xu.com-竟彩500比分直播| www.097752.com-鑫彩网彩票客户端| www.160935.com-七星彩海口彩票网| www.740479.com-梦见的彩票号| www.968666.cc-重庆微信时时彩群| www.94577.com-真金彩票-| www.133634.com-福彩网安全靠谱吗| www.595690.com-异地彩票中奖| www.861301.com-安徵快三夸度走势| www.224237.com-百盈快三选号技巧| www.875404.com-每分钟开一次的彩票| 福彩网www.60007i.com| www.782.mobi-幼儿彩虹画图片大全| www.938140.com-好彩网3d预测| 大玩家彩票www.84499i.com| www.hv60.com-北京快三详情| www.c10.shop-爱彩乐软件下载| www.362938.com-高频彩平台排行| www.290466.com-七星彩兑奖结果查询| www.6931.cn-七彩云南要门票吗| www.463122.com-东方亮彩工资怎么样| www.110030.com-广东体育彩票一定牛| www.948930.com-体育彩票购彩app| www.142498.com-8彩平台安全吗| www.250040.com-河北燕赵福彩网首页| www.345343.com-山东福利彩票网址| www.460760.com-天津体彩打票员招聘| www.561728.com-快三豹子单注多少钱|