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.169860.com-体彩19035期| www.562794.com-正彩素颜霜有假货吗| www.258977.com-竟彩足球计算器| www.113364.com-王凯各种釉彩大瓶| www.186996.com-湖北湖北快三走势图| www.564311.com-彩福快三是官方的吗| www.657302.com-ok精彩杂志-| www.zv30.com-彩96娱乐-| www.509657.com-2118官方彩票| www.907601.com-嘉定中奖彩民| www.jp96.com-qq快三群-| www.6687.com-华夏赢彩票官网下载| www.588475.com-购彩xv计划-| www.677969.com-今晚足彩比分直播| www.754217.com-抢红包彩票-| www.898841.com-福彩门户网址书签| www.967624.com-彩票托赚什么| www.cp216.com-福彩快三稳赚技巧| www.69676.cc-彩61平台登录| www.2255.cc-彩票中奖有预感吗| www.7858.top-足彩小窍门-| www.68210.com-彩票巫师-| www.113106.com-掌上彩49887| www.357239.com-中彩票是意外吗| www.751802.com-壹号彩票官方网站| www.6715.top-好彩又一鲜酒家| www.57368.com-澳客彩票是否靠谱| www.00zk.com-雨后彩虹的形成原理| www.80299.com-吃彩票排列三| www.739485.com-体彩任选九-| www.867256.com-福利彩票网点| www.971388.com-足球彩票竞彩合法吗| www.dz22.cc-上海福彩选四| www.44tv.com-uc注册彩票安全吗| www.51188.com-国丰彩票app| www.921.in-临沂福彩中心电话| www.7927.org-博彩管理课程| www.077979.com-彩票有弄虚作假的吗| www.23fd.com-132彩升级-| www.0128.cm-彩色是颜色吗| www.513555.com-惠州市福利彩票兑奖| www.631275.com-彩票代购平台的优质| www.122.live-体彩单关-| www.69oq.com-网络彩票真假问题| www.030129.com-合买彩票月赚上万| www.381646.com-体彩中了三个亿| www.zw40.com-上海体彩网点申请| www.178512.com-五分彩在线计划| www.67288.cc-盐城市福彩中心地址| www.6518.xyz-9手机彩票-| www.456824.com-重庆时时彩牛牛走势| www.18828.com-买3d彩票怎么看号| www.005767.com-时时彩完整源码程序| www.109815.com-七星彩开奖30期| www.190928.com-内蒙快三新规则| www.615276.com-福彩三d位积和走势| www.501137.com-官网购彩软件| www.597018.com-甘肃体彩任三推荐号| www.687720.com-福彩3d模拟器| www.779297.com-梦迷接图梦册七星彩| www.869787.com-唯彩会预测-| www.948110.com-四川体彩兑奖地址| 中彩网www.2408e.com| www.900724.com-要赢钱就上赢钱彩| www.871462.com-福彩青蛙过河中奖率| www.92.biz-彩世界论坛下载| www.96676.com-944c彩票-| www.pn36.com-3d彩乐乐专家预测| www.286761.com-彩票开挂是什么意思| www.698415.com-k彩是骗局揭秘| www.788532.com-快三几点开始考试| www.868835.com-七星彩前四位3d| www.983488.com-彩票777www| www.gy21.com-彩八彩票害人不浅| www.da56.com-快三跨度怎么看才准| www.282223.com-彩票开奖是直播吗| www.496992.com-福彩双色球中一个| www.82856.com-彩乐汇是干嘛的| www.75529.com-江苏体彩前三直选| www.ue30.com-五分彩万位全天计划| www.071699.com-彩钢瓦围挡图片| www.672051.com-彩票行业合法| www.757337.com-体彩店刷佣金违规吗| www.835023.com-缅甸忠告好彩| www.898014.com-福彩宣传语公益| www.955745.com-彩票谜语3a-| 福彩网www.055aa.cc| www.873593.com-真福彩早早报| www.008379.com-新浪大乐透数字彩票| www.400379.cc-彩票查询七星彩图规| www.578511.com-重庆时时彩所有图片| www.71765.cc-上海快三查询表| www.623311.com-热拉骗玩彩票| www.977192.com-河南各地彩礼钱| www.42476.com-购彩之家真的吗| www.69mh.com-梦见老公中彩票| www.ol78.com-中彩网七乐彩走势图| www.83xq.com-博盈彩票骗人| www.250159.com-爱彩彩票安卓| www.373118.com-天齐福彩字画迷| www.67058.com-绵阳福彩管理中心| www.427273.com-足彩进球开奖查询| www.831131.com-3d彩票走势-| www.983339.com-盈彩在线678| www.51rq.com-彩虹伞的玩法户外| www.621209.com-福彩夺宝奇兵| www.940663.com-内蒙快三害死人| www.62753.cc-快速查体彩开奖| www.66586.com-福利彩票选4| www.uk39.com-好彩客是合法的吗| www.yz90.com-快三精准人工计划| www.315410.com-网上时时彩合法吗| www.353994.com-彩宝贝老谢彩票| www.181611.com-好彩网快三是真的吗| www.82587.com-彩票窝案-| www.6594.cm-买彩票随机还是自选| www.929303.com-七星彩中三个号| www.980025.com-中国体育彩票装修| www.cai968.com-快三大小单双口诀| www.jb08.cc-幸运快三计划总站| www.xv47.com-d9彩票.cc-| www.14tj.com-大公鸡七星彩规律图| www.886668.com-丹东福彩双色球杀号| www.966549.com-k8彩票55kk| www.cp480.cc-福彩快三走势图福建| www.rg73.com-海南彩票开奖| www.455827.com-炒彩票平台能玩吗| www.571909.com-竞彩篮球最稳的买法| www.769203.com-好彩彩票下载安装| www.854002.com-今天6合宝典彩| www.920359.com-辽宁福彩快乐12| www.995702.com-买足彩主要看什么| www.25yc.com-彩友会公平公正公| www.237000.cc-彩票大赢家软件下载| www.09663.com-网上怎么买3d彩票| www.262793.com-重庆时彩是骗人的吗| www.369972.com-体育彩票内部骗奖| www.502037.com-有职业买彩票的吗| www.569167.com-给彩金的彩票| www.632852.com-茗彩彩票是不是骗局| www.707563.com-2彩票app-| www.799855.com-致富彩下载-| www.871946.com-彩票宿水专家| www.937389.com-3d全图彩吧第一版| www.985553.com-彩票虚拟投注| www.zl53.com-双彩论坛图迷专区| www.94ms.com-塔罗预测彩票中大奖| www.088303.com-58彩票苹果下载| www.hb02.com-518彩票-| www.273961.cc-幸运时时彩网址| 凤凰彩票www.77801r.com| www.685559.com-福彩3d三码和查表| www.730398.com-彩票大家乐怎么下载| www.836214.com-持区彩票论坛| www.936026.com-彩莲公主聊天室| www.985859.com-福彩3的最新杀码| www.885316.com-彩票行家收藏书签| www.957314.com-足彩加最新版| 新浪爱彩www.97775.cc| www.008850.com-美国28彩票官网| www.123383.com-乐彩3d17500| www.254691.com-腾讯时时彩官网开奖| www.335924.com-体育彩票几个号码| www.330823.com-彩神l有挂吗|