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.53uf.com-体彩湖北-| www.67bu.com-幸运分分彩是哪里开| www.137710.com-七星彩电脑版| www.306822.com-天津彩票时时彩中奖| www.508949.com-北京快三共几期| www.639504.com-苏宁竞彩-| www.750465.com-豪彩vip网址| www.865941.com-延边快三开奖走势图| www.734510.com-北京福利快三| www.843385.com-彩票中心公积金| www.922712.com-投诉彩票店-| www.eo.cc-河北福彩快三彩票| www.22hk.cc-海南海口七星彩彩版| www.4651.biz-附近双色球彩票站点| www.377150.com-168腾讯时时彩| www.153599.com-时时彩百位如何定胆| www.307918.com-賽果及派彩-| www.477413.com-江苏快三手机版下载| www.572283.com-大乐透彩迷天地| www.656762.com-易彩易彩福地app| www.744669.com-旧板彩经网走势图| www.890950.com-至尊彩为什么没人管| www.990844.com-腾讯彩票挂机软件| www.et82.com-北京5分彩开奖记录| www.y69.xyz-本子福利吧全彩本子| www.240.la-海南私彩头尾资料| www.8654.loan-有没有微信彩票群号| www.86959.cc-云南快三查询| www.104658.com-港版绿好彩香烟代购| www.381960.com-哪里有彩票挂机软件| www.532276.com-网上跟着老师买彩票| www.0598.net-如意彩票坑人吗| www.993528.com-足彩保本玩法| www.195361.com-江西省快三走势图| www.77267.cc-各种彩票中奖率| www.053184.com-彩票网赚是真的假的| www.353368.com-体育彩票6十1开奖| www.488575.com-中国乐彩彩网| www.126375.com-王者平台彩票| www.327964.com-约彩彩票开奖大厅| www.470303.com-七星彩票开什么号码| www.604786.com-盛源彩票sy15| www.731964.com-进口彩妆加盟| www.867156.com-昨天的好彩票开奖| www.942948.com-买重庆时时彩app| 彩票驿站www.621361.com| www.wg42.com-彩计划全能版| www.947520.com-体彩公益图片| www.318694.com-ll彩票网站-| www.514284.com-彩票榜是真的吗| www.jy95.com-中彩网双色球预测| www.86uw.com-彩票核对提示语| www.877220.com-彩票预测网授渔看彩| www.cai1299.com今天快三开奖兰州| www.14os.com-体彩兑奖需要哪些| www.142520.com-彩运8能玩吗| www.id11.com-玩彩票的下场| www.d45.net-海南七星彩梦册查询| www.cq08.com-购买私彩是否违法| www.47ih.com-网络彩票鸿博股份| www.9932.cm-七乐彩好中奖吗| www.036794.com-彩500手机版本| www.153579.com-自助彩票机怎么兑奖| www.883071.com-彩678靠谱吗| www.951811.com-射龙门彩票计算法| 爱彩www.005ac.com| www.807636.com-什么人能中彩票| www.81314.cc-今天福彩独胆一人| www.103226.com-好彩一遗漏表| www.175186.com-易彩快三有什么规律| www.258440.com-胜负彩19052| www.435188.com-福彩3d012-| www.560218.com-福彩3d预测家彩网| www.664500.com-荷花儿彩铅素描图片| www.778205.com-快三客户端下载| www.870167.com-福彩高频彩是真是假| www.69634.com-山西十分彩-| www.523712.com-时时彩高手交流论坛| www.639275.com-福彩代售点-| www.733227.com-极速时时彩开奖器| www.811703.com-双彩论坛论坛首页| www.875674.com-时时彩牛牛-| 乐趣彩www.7116a.com| www.683291.com-腾讯分分彩怎么玩法| www.765924.com-淅江福彩6十1| www.838059.com-竞彩五大看盘技巧| www.903620.com-3d福彩字谜画迷| www.968534.com-福彩3d奖金参照表| 大赢家彩票平台www.810526.com| www.12242.com-福彩历史中奖查询| www.55022.cc-免费送彩金188| www.008131.com-周五哪些彩票开奖| www.745978.com-彩票app-| www.814992.com-广州体彩快中彩开奖| www.880288.com-和乐彩票-| www.940006.com-吉林快三有盘么| www.981865.com-分分彩平台注册| www.cp783.cc-大发快三赚钱| www.li81.com-全中彩票官网下載| www.539038.com-众乐彩票靠谱吗| www.209965.com-一分快三如何玩| www.752531.com-体彩作弊-| www.828507.com-盗窃彩票后中奖| www.914941.com-淘宝网买彩票可靠吗| www.978437.com-拉菲彩票平台可靠吗| www.cai8789.com吉林快三开将结果| www.788742.com-中国体育足彩竞彩网| www.70hp.com-购物送福利彩票| www.71ci.com-梯子游戏彩票官网| www.1678.bid-玩足彩票心得体会| www.92863.cc-致富彩重庆时时彩| www.758180.com-华夏快三-| www.845150.com-福彩历史场景| www.922434.com-彩妆店装修图片| www.990268.com-要那个彩票软件好用| www.hw12.com-快三稳定计划| www.n98.wang-豪彩-| www.93gz.com-英国皇家五分彩开奖| www.2980.net-圣地彩开奖139| www.pu66.com-彩16下载-| www.161163.com-福彩3d彩博士推荐| www.551380.com-唐龙今日说彩| www.970184.com-燕赵福彩首页| www.193045.com-快三怎样能一直赢钱| www.355969.com-玩快三如何止损| www.4545.hk-开七星彩号码| www.52573.cc-好彩扑鱼-| www.81801.cc-时时彩冷号遗漏| www.75qu.com-彩票综合预测| www.34383.com-菠萝彩时时彩手机版| www.43134.com-青岛福彩湛山养老院| www.90838.cc-双彩球开奖洁果| www.218302.com-彩神8注册-| www.rw60.com-国家开发彩票软件| www.7709.pw-168官方彩票网站| www.184448.com-精准北京快三计划| www.268276.com-彩民彩票官网| www.350962.com-彩票可以买一个数吗| www.413856.com-分分彩八码滚雪球| www.3244.vip-内蒙快3彩票| www.836988.com-竞彩篮球投注软件| www.30065.com-华夏彩票靠谱吗| www.g61.club-彩乐园1下载| www.25rl.com-华彩益理财-| www.889.mobi-彩九九iphone| www.52377.com-天猫快彩是不是真的| www.78772.cc-亮彩手机u盘| www.19530.com-这个竞彩网-| www.1111.red-竞彩比分中奖经验| www.27778.cc-吉林快三历史遗漏| www.73128.com-彩票计划群微信号| www.40ll.com-新浪爱彩比分直播网| www.1157.pw-彩票术语定胆| www.9838.cn-古建彩绘沥粉器| www.44482.com-彩票开奖查询l百度| www.889280.com-王者彩票下载| www.590279.com-顶呱刮彩票招财猫| www.733393.com-福彩牛彩网一| www.951663.com-彩天下是不是坑人的| www.rk37.com-北京快三跨度振幅| www.36rl.com-uk彩票官网-| www.2106.vip-彩虹七号游戏全名| www.1007.vip-星期一彩票开什么奖| www.20968.com-395959彩票网|