jQuery基于swiper.js制作响应式的主机商城软件产品项目列表布局，通过左右按钮控制产品列表滚动。默认支持自动滚动效果代码。
使用方法
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>
