jQuery基于swiper.js制作響應(yīng)式的主機商城軟件產(chǎn)品項目列表布局，通過左右按鈕控制產(chǎn)品列表滾動。默認(rèn)支持自動滾動效果代碼。
使用方法：
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>企業(yè)云盤</h3>
<p>企業(yè)文件存儲管理與協(xié)作云平臺</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>泰克雙創(chuàng)實踐云平臺</h3>
<p>基于云主機建設(shè)的多功能實訓(xùn)平臺</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>視頻云服務(wù)套餐</h3>
<p>快速開啟直播，引燃商業(yè)價值</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>迅響響應(yīng)式定制建站</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>交管局滿分學(xué)習(xí)系統(tǒng)</h3>
<p>文件上傳、在線轉(zhuǎn)碼、存儲管理</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設(shè)計的虛擬防火墻</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>簡單高效地保障企業(yè)文件資料安全</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>云上的數(shù)據(jù)展示分析工具</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>網(wǎng)銀混合云咨詢實施服務(wù)</h3>
<p>提供咨詢、規(guī)劃、設(shè)計和實施服務(wù)</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>
swiper軟件產(chǎn)品列表左右滾動代碼 
