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.29178b.com| www.6566.me-深圳鑫彩晨-| www.531471.com-快三第一个人门户| www.288545.com-成都体彩竞彩大奖| www.003892.com-三彩家租房靠谱吗| www.132969.com-360快三安全购彩| www.363311.com-上海福彩4d选四| www.862.red-查看彩票开奖结杲| www.773923.com-九宫图预测彩票| www.61109.com-非法平台玩彩票| www.2129.xyz-大发快三专家计划| www.3069.pw-进球彩app客服| www.771297.com-彩虹无人机概念股| www.83507.com-阳光彩票登录网址| www.16014.com-七乐彩开奖三等奖| www.uu.com-中国体彩网首页| www.734813.com-新浪网足彩彩票频道| www.717950.com-彩票平台刷水| www.865726.com-彩票分析预测下期| www.963107.com-彩钢瓦规格-| www.cp069.com-分分快三危害极大| www.110509.com-七星彩万字表图| www.355841.com-买足彩看什么最准确| www.805000.com-久久彩票网官方端口| www.892935.com-下载全民240彩票| www.966213.com-人群对发彩网的评论| www.cp0998.com-快三彩票网-| www.qd21.com-新浪彩票开奖信息| www.378096.com-汇彩国际彩票注册| www.578018.com-腾讯分分彩龙虎计划| www.318650.com-江苏快三官方| www.121618.com-怎么看是不是彩票托| www.984434.com-彩八彩票合法吗| www.380060.com-名人堂彩票软件| www.351467.com-好彩客彩票最新| www.524345.com-有没有福彩三分彩| www.781211.com-儿童彩虹画图片| www.365378.com-彩库宝典四不相图| www.576941.com-彩票真假辨别图片| www.709998.cc-彩神论坛超准15码| www.818551.com-快乐彩有人赚钱吗| www.916532.com-双赢彩-| www.990688.cc-竞彩看盘在哪看| www.y03.top-奥客彩票开奖| 如意彩票www.167686.com| www.py55.com-518彩票9218| www.843377.cc-福彩与慈善的心得| www.246670.com-上海彩票网站| www.369024.com-网络彩票分析师骗局| www.856358.com-辽宁福彩12选五| www.179013.com-彩票托聊天套路| www.279260.com-福彩网快3合法吗| www.9140.net-北京彩票店转让| www.593390.com-七彩国际会所怎么样| www.678314.com-旺彩走势图下载安装| www.763685.com-能下单的足彩app| www.837666.cc-竞彩足球滚球app| www.918002.com-手机私彩诈骗案| www.984304.com-3d走势图彩吧| www.tf2.cc-福彩开奖直播| www.ru76.com-新快三分析软件| www.9kt.com-体育彩票是几个好| www.11hp.com-彩色水磨石效果图| www.86ts.com-彩运网登录网址| www.1713.cn-今天彩票3d推荐号| www.9441.loan-粤彩宝典-| www.626322.com-ig彩票官网-| www.699790.com-彩神平台不给提现| www.772321.com-福彩双色球下载安装| www.869088.com-湖南体彩彩民论坛| www.942927.com-杭州体彩兑奖中心| www.999878.com-中国福利彩票燕赵| www.gm32.com-江苏快三开奖有假吗| 乐彩网www.566897.com| www.71vs.com-海南四星彩网站| www.98rp.com-足球彩计算器胜负| www.12183.com-网络彩票有规律吗| www.279929.com-竞彩500比分直播| www.772620.com-618彩票官网| www.350435.com-彩色笔水彩笔| www.04361.com-大乐透扫码送彩票| www.674507.com-爰彩人彩票网| www.771614.com-时时彩预测app| www.131332.com-彩礼官司需要的证据| www.262842.com-七星彩玩法开奖日期| www.151708.com-4个数字的彩票| www.310575.com-酷彩网app下载| www.020055.com-大发快三规则| www.kq42.com-六开彩白小姐中特网| www.7664.cc-3d福彩标志-| www.799705.com-皇冠彩票送彩金| www.902510.com-pk彩吧下载-| www.967359.com-福彩预测号码推荐| 大赢家彩票平台www.137165.com| www.407841.com-七星彩中奖地方查询| www.hw22.cc-北京快三购买平台| www.176523.com-街机快三游戏| www.869783.com-唯彩会官网-| www.997125.com-福利彩票快3预测| www.kn16.com-重庆竞彩快三| www.529362.com-旧版彩库宝典下载| www.178607.com-北京快三最大遗漏号| www.73he.com-彩票5星是什么意思| www.7704.vip-幸福彩票平台怎么样| www.000477.com-极速时时彩怎样玩| www.178616.com-辽宁体彩-| www.058796.com-小小鱼彩吧图库| www.732002.com-关小刀新浪足彩预测| www.874056.com-快开彩票怎么玩| www.939543.com-福利彩票网站靠谱吗| 118彩票www.62118g.com| www.156011.com-好彩客所有版本| www.185327.com-北京快三和值规律| www.07qd.com-下载火箭彩票网| www.092208.com-3535彩票网-| www.66yy.com-中彩在线贺文是谁| www.550564.com-xy515幸运彩票| www.24616.com-彩铅画河水-| www.719152.com-520快三首页| www.823598.com-彩涂钢板840| www.885860.com-福彩3d彩吧图谜一| 500彩票www.50052t.com| www.fd87.com-红牛彩票快3| www.zp83.com-我要查体育彩票开奖| www.24ke.com-手机背板彩膜| www.89qj.com-福利彩票开奖19期| www.587218.com-买篮彩的网站| www.667712.com-乐透啦彩票官网登录| www.723631.com-镇江体育彩票| www.680.site-重庆市彩开奖时间| www.6609.xyz-万彩和彩票-| www.307378.com-足彩亚洲杯-| www.501232.com-879彩票官网| www.mb89.com-华宇彩票注册| www.q79.com-双阳黑彩-| www.326725.com-中彩网开奖公告号码| www.436455.com-云南福彩开奖结果| www.556990.com-网络私彩举报| www.670577.com-彩票开奖通知| www.751617.com-明天晚上开什么彩票| www.828259.com-红包彩票主播火火| www.900596.com-500彩票是真的么| www.958005.com-富彩官网-| 500万彩票www.39500e.com| www.310901.com-快三怎么抓豹子| www.404968.com-七星彩的技巧口诀| www.550793.com-华夏彩票贴吧| www.787225.com-彩经网时时彩走势图| www.868801.com-七星彩第七位杀号| www.927910.com-乐彩网首页彩票| www.976934.com-娘家说帮存彩礼钱| www.cai1119.com河北快三助手下载| www.051801.com-安徽快三3不同计划| www.95qq.com-竞彩怎么设胆| www.665544.cc-彩虹岛app-| www.301295.com-精彩十分推荐| www.440190.com-随机彩票怎么买| www.555179.com-大发云彩神神争霸| www.837693.com-重庆时时彩的套路| www.16055.cc-天天彩选3开奖号码| www.131496.com-河南彩票弃奖| www.798526.com-鼎盛五分彩-| www.878692.cc-7星彩怎么兑奖| www.956131.com-彩影怎么制作|