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.cp091.com-喜乐彩开奖结果查询| www.448066.com-彩中网开奖结果| www.114266.com-湖兆省快三开奖查询| www.205118.com-淘宝彩票app下载| www.365246.cc-购彩iv锦鲤-| www.455454.com-福彩3d直选走式图| www.543800.com-福彩3d预测老店主| www.705698.com-东莞体彩兑奖地址| www.791598.com-体彩金七乐怎么玩| www.872978.com-湖北快三奖金计算| www.08jb.com-体彩开机号码| www.104169.com-彩神ix5分快3| www.174417.com-湖北精彩十分开奖| www.602484.com-瑞典2分彩-| www.732612.com-无锡彩礼和嫁妆比例| www.812177.com-3d彩票吧-| www.057329.com-彩神怎么样-| www.984403.com-中彩网免费资料大全| www.xz25.com-快三控制住能赢钱吗| www.34mb.com-体育足球彩票对阵表| www.0513.in-3d福彩开奖| www.7508.cm-如何做好一家彩票店| www.38211.com-新时代彩票平台| www.526553.com-为什么买彩票不犯法| www.629716.com-7彩app下载-| www.136651.com-海南彩票解梦查码| www.244168.com-玩京东彩票幸运28| www.336699.cc-福彩3d丹东全图谜| www.417855.com-中博彩票系统| www.522164.com-彩友沙龙玩转双色球| www.610701.com-甘肃快三号码统计| www.684900.com-牛彩网字谜汇总大全| www.777485.com-彩乐园ll安卓下载| www.882529.com-正规高频时时彩| www.949753.com-中华彩票手机版| 亿龍彩票www.1368p.cc| www.46vx.com-彩票平台网址导航| www.2075.in-速赢彩票是不是真的| www.993719.com-竞彩单关查询| www.gz75.com-福利彩8手机版| www.t55.com-ss彩票-| www.23415.com-奇利五分彩走势图| www.536607.com-福彩3d讲座程| www.630609.com-彩票挑码软件| www.760492.com-时时彩宝典软件下载| www.975733.com-福彩快三专业版| www.ht35.com-龙江体彩-| www.a45.org-湖南省福彩兑奖中心| www.101503.com-19031体彩-| www.238560.com-彩票导师套路| www.50296.com-海南七星彩早版图库| www.043571.com-什么是七星彩票| www.145058.com-福彩3天中图库杀码| www.71le.com-彩票站风水-| www.1304.pw-体育博彩app推荐| www.003872.com-彩之源江苏快三首页| www.9528.bid-4个数字彩票| www.056615.com-合肥彩票店转让信息| www.964392.com-彩票网找不到网页| www.56819.com-时时彩四星万能大底| www.58866.com-福彩三地杀码技巧| www.5258.cm-派彩金额反水是负数| www.5253.pw-中国竟猜足彩计算器| www.10192.com-中彩网双擂台赛| www.60ld.com-福彩3d有哪些平台| www.567984.com-七彩野山鸡苗| www.645229.com-易经彩票预测方法| www.791018.com-好彩泰免多少钱| www.884044.com-黑彩赚钱-| www.967213.com-下载体彩481| 新盈彩www.xinyc8.com| www.od29.com-中国福体彩开奖| www.5724.cc-福彩3d新材巴| www.23926.com-福彩双色球颖彩| www.rw8.cc-河南跑马彩-| www.q89.cn-河北快三数据统计表| www.57uz.com-7o3彩票首页| www.0474.date-万彩吧彩票专家荐号| www.9820.vip-k彩福地app-| www.40628.com-微信上的中彩| www.898689.com-甘肃快三两码遗漏| www.967993.com-合买彩票的网站| www.2631.com-3d乐彩字谜图迷| www.8469.cc-k彩—彩民中奖福地| www.47103.com-男女结婚彩礼钱| www.8hc.cc-微迅彩票网-| www.68535.com-福彩3d综合版| www.273900.com-福彩快三计算公式| www.456422.com-tt彩票平台-| www.36504.com-卖彩票的工作好学吗| www.041503.com-福彩查询-| www.165431.com-快三开奖结果| www.551068.com-足彩合买跟单| www.xg97.com-9万彩票app下载| www.73db.com-体彩寒香宫主断组| www.60133.com-彩票店兼营-| www.010406.com-1068彩票下载| www.708151.com-六彩票53-| www.774320.com-3分彩分分彩开奖| www.1059.in-安卓版彩票计划软件| www.6520.org-彩票自动挂机平台| www.14390.com-时时彩代玩是真的吗| www.63199.cc-体彩福彩开奖| www.056377.com-七星彩中奖查询器| www.44wb.com-uc彩票app-| www.3534.com-七乐彩历史同期查询| www.8920.online竞彩结束多久开奖| www.57702.com-福彩3地和值走势图| www.cp7257.com-福彩快3彩票下载| www.400338.com-最新信博彩票官网| www.042066.com-多彩贵州网领导| www.176595.com-福彩快三兼职| www.3095.cn-一号彩dt-| www.853976.com-嘉兴体彩公开征招| www.914789.com-v98彩票官方| www.964898.com-揭秘网上彩票骗局| 500彩票www.9311c.com| www.143605.com-福利彩要双色球| www.113679.com-彩票预测大师苹果版| www.062276.com-国彩平台开户注册| www.823467.com-山东彩钢板制造| www.901167.com-皇都彩票是骗人的| www.962058.com-双色球福彩3d| 福彩www.26878r.com| www.45454.com-微彩站二维码| www.sn3.com-吉林福彩快3| www.g55.cc-彩经网排列三预测| www.011052.com-下载网彩-| www.ll3.cc-彩票知识大全| www.va89.com-彩票游戏代打专员| www.14hs.com-福建摇骰子彩票活动| www.885898.com-快三概率软件| 九五彩票www.878749.com| www.0168.vip-彩色宝石排行榜| www.e11.club-网易彩网下载| www.8228.vip-彩中堂报码-| www.688682.com-105彩票正规吗| www.822528.com-3d家彩网开机号是| www.926909.com-彩31选7-| 百姓彩票www.bxcp66.com| www.b51.net-重庆时时彩有官网| www.94rx.com-七星彩如何看走势| www.cai3466.com一分快三开奖结果| www.17bc.cc-足彩预测专家老牛| www.xh37.com-福利彩快三开奖结果| www.154438.com-玩彩票手机安卓版| www.596895.cc-彩票中奖倍数怎么算| www.682572.com-福彩3d图库迷总汇| www.764818.com-彩票网站制作哪里| www.818648.com-中国足球彩票对阵表| www.879759.com-体彩实体店何去何从| www.63.cc-六冠彩票官网| www.49mu.com-豹赢彩票最新版| www.331.cm-彩民李预测文章| www.11rj.com-彩色的翅膀主要内容| www.71ry.com-湖南体彩足球| www.2052.vip-彩虹和平鸽儿童画| www.93674.com-足彩推荐哪家好平台| www.096368.com-眉山福彩网-| www.6381.cc-好彩频道在哪里播| www.097889.com-中国福彩在线| www.223982.com-中国体彩网足球| www.305161.com-新手怎么买彩票选号| www.262896.com-彩票微信什么群|