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天

知道了
1分快三 www.883831.com-彩报开机号板| www.38889.com-600w彩票网软件| www.294152.com-福彩三地开奖之家| www.34571.com-彩迷网欠钱-| www.254697.com-湖北快三今天未出号| www.494600.com-快乐彩票是什么意思| www.om78.com-体彩排五开奖号查| www.325571.com-体彩排列三和值表| www.002104.com-福建体彩31选| www.272361.com-快三号全部号码| www.cp415.cc-湖北快三每天必出号| www.107272.com-开彩彩票-| www.355784.com-体彩亿元大奖排名| www.640351.com-两分彩开奖号码| www.8302.org-天天彩票提现审核中| www.100716.com-竞彩外围有哪些| 大赢家彩票平台www.377653.com| www.131578.com-近期彩票无人领| www.505664.com-黑彩能破解吗| www.883445.com-彩票软件计划群| www.5188.live-赛车湖南体彩| www.686831.com-中彩那天课文大意| www.3813.cn-竞彩足球看赔率分析| www.039070.com-正规网投彩票网站| www.010192.com-彩票中大奖不告诉| www.o78.com-送彩票的寓意| www.86068.cc-三彩女装加盟| www.961328.com-a·93彩票-| www.206935.com-青岛彩票网-| www.32244.com-昆明彩色压印地坪| www.36259.com-496cc彩票官网| www.480467.com-888123彩票网| 500万彩票www.98528f.com| www.708558.com-江西时时彩彩票| www.38hc.com-胆拖投注七星彩| www.675487.com-网上彩票app靠谱| www.313803.com-赢钱彩app版本| www.848968.com-38彩票领导者| www.0io.cc-福利彩票数字彩| www.576836.com-网络彩票怎么解绑卡| www.4833.vip-韩国德国2比0彩票| www.297696.com-大发快三稳赚| www.0890.cn-掘金好球彩票app| www.195187.com-重庆时彩官方网开奖| www.5876.com-延吉彩票站-| www.2110.vip-广东东莞福彩网| www.wd18.cc-冀彩宝投注大厅| www.738685.com-天津福彩机器申请| www.88fk.cc-新富贵彩票-| www.238980.com-手机刷彩是什么| www.df12.com-俄罗斯6位数彩票| www.251271.com-今日中彩有什么奥妙| www.706699.com-玩私彩属于赌博吗| www.697004.com-彩票大小规律性| www.418907.com-彩金风暴50p| www.715338.com-认可的彩票app| www.js40.cc-彩票大小单双打法| www.57267.cc-锋彩直播苹果版本| www.iv.com-足彩竞猜-| www.65977.cc-广州彩烟-| www.616014.com-一百万彩票-| www.8968.bid-众彩网首页登录入口| www.467983.com-龙江福利彩票| www.28dc.com-手机投注七星彩| www.242632.com-中彩彩票用户登录| www.433326.com-旭彩网下载-| www.135737.com-彩票cp12com| www.477111.com-六福彩票官方网址| www.041481.com-彩票最长的龙有多长| www.wu30.com-福彩湖北快3app| www.120803.com-重庆时彩胆拖玩法| www.ib28.com-安徽省福彩兑奖中心| www.5336.vip-华东福彩15选5| www.217797.com-彩福彩票下载| www.351244.com-体彩世界杯在哪里买| www.677716.com-什么是微彩-| www.44ds.com-足彩十四任选九预测| www.0642.org-微信国际彩票投资| www.653089.com-澳彩相同初赔| www.817724.com-绵阳福彩249号站| www.998941.com-头条彩票频道| www.84um.com-福利彩票是什么行业| www.6381.org-胜负彩软件-| www.929375.com-福彩群英会开奖| www.878788.cc-体彩竞彩5808万| www.383085.com-中国体育彩票竞| www.977302.com-南召彩礼-| www.22115.com-国内足彩狙击团队| www.3543.xyz-彩票二等奖能中吗| www.7051.cn-七彩直播app| www.790797.com-红快三和快三| www.2097.pw-竞彩篮球赛程| www.329191.com-彩票白菜免费送彩金| www.589848.com-7星彩开奖走势图| www.770327.com-港版绿好彩在哪里买| www.153556.com-时时彩后三600注| www.337553.com-湖北快三最牛网| www.215015.com-大家赢彩票-| www.501038.com-彩色生活微信图片| www.cp9776.com-竞彩app哪个正规| www.393.in-中彩网与你免费资料| www.22916.cc-福彩3d作假吗| www.091597.cc-春秋彩票登录网页| www.316269.cc-怎样开竞彩店| www.633851.com-腾讯五分彩开奖结果| www.875674.com-时时彩牛牛-| www.dp20.com-快彩王软件下载| www.03ut.com-如何办理体彩销售点| www.1464.xyz-彩铅画古风美人| www.35783.cc-福利彩票兼职赚钱吗| www.87348.com-98彩票app下载| www.116234.com-胜负彩19038期| www.262981.com-体彩大乐透奖金查询| www.370278.com-十分彩是什么平台| www.385167.com-海口七星彩早版区| www.328287.com-彩名堂官网软件下载| www.690111.cc-足彩机选中奖案例| www.977012.com-惠安街道彩礼标准| www.362162.cc-天空出现彩虹写句子| www.723009.com-7168彩票香港| www.852676.com-最近的体育彩票站| www.912389.com-彩票违法-| www.991843.com-7乐彩开奖查询| www.hb23.com-老猫看彩3d-| www.22bf.cc-龙江彩神-| www.1600.in-体彩三d开奖助手| www.8580.vip-澳客体彩开奖结果| www.57466.com-分分彩必赚方法| www.99510.com-时时彩个位计算方法| www.088233.com-足球彩票14场| www.144343.com-快乐彩太假-| www.57192.cc-彩八万软件下载| www.892383.com-买高频彩输了30万| www.150339.com-中国体彩中心| www.969608.com-足彩足球竞彩比赛| www.186680.com-杭州快乐彩开奖结果| www.381844.com-七天官方彩票网| www.50th.com-网站买彩票可靠吗| www.36376.cc-福利彩票有多少号码| www.009279.com-1233彩票版本| www.191612.com-我要搜索彩票走势图| www.41xw.com-811彩票打法| www.zt81.com-博彩篮球加时算吗| www.42qy.com-随洲福彩快三论坛| www.200.cm-昆虫类彩铅画| www.4562.vip-海南福彩中心| www.013.cm-河南亿彩快三| www.3862.com-七星彩大奖图片大全| www.fl46.com-支付宝如何买彩票| www.35830.com-77彩票ios-| www.008912.com-福彩双色球往期开奖| www.101385.com-菲律宾彩中彩| www.169149.com-福彩湖北快三开奖| www.239227.com-福彩3d专家推荐| www.va06.com-钢炮福彩-| www.127763.com-彩虹岛手游| www.219644.com-新彩吧论坛首页| www.626776.com-属猪买彩票幸运数字| www.700009.com-足球竞彩奖金计算器| www.765405.com-七星彩解诗网| www.911937.com-高频彩票随机数| www.965770.com-8号彩票论坛马会| 吉利彩票www.80065d.com| www.033.tv-3d云刚说彩推荐|