QQ客服
當前位置 : 中国福彩快乐十分开奖分布图 > 代碼 > 網頁特效 > 圖片代碼 > jQuery響應式單排圖片滾動代碼

台湾大乐透分布图: VIP商用 jQuery響應式單排圖片滾動代碼

jQuery基于Swiper制作響應式的圖片列表左右滾動,懸停圖片遮罩文字切換效果。適用于項目解決方案產品列表響應式布局代碼。
分享到微信朋友圈
X
[聲明]該素材是本站付費買斷的作品代碼,享受著作權?;?,未經允許請勿轉載,否則追究相應的法律責任。

使用方法:

1、head引入css文件

<link rel="stylesheet" type="text/css" href="statics/css/style.css"/>

2、head引入js文件

<script src="statics/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="statics/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>

3、body引入HTML代碼

<div class="service-title">
  <h2>解決方案</h2>
  <p>面向各種領域:教育、裝修、安防、旅游、企業、集團公司等網站建設、營銷網建設解決方案、品牌網站設計等建站服務。</p>
</div>
<div class="solution-box">
  <div class="solution-cut">
	<button class="fa fa-back"></button>
	<button class="fa fa-more"></button>
	<div class="solution-swiper">
	  <ul class="solution-wrapper">

		<li class="solution-slide">
		  <span>
			<i class="fa fa-wxbgongju"></i>
			<hr>
			<h3>企業網站建設解決方案</h3>
			<p>好推建站全面提升品牌、提高技術、完善服務。推動中國互聯網共同成長。</p>
			<a href="#">查看詳情</a>
		  </span>
		  <img src='statics/images/1.jpg'>
		</li>

		<li class="solution-slide">
		  <span>
			<i class="fa fa-wxbgongju"></i>
			<hr>
			<h3>營銷型網站解決方案</h3>
			<p>好推建站-互聯網思維,營銷技巧,SEO推廣方式幫助企業獲得客戶流。</p>
			<a href="#">查看詳情</a>
		  </span>
		  <img src='statics/images/2.jpg'>
		</li>

		<li class="solution-slide">
		  <span>
			<i class="fa fa-wxbgongju"></i>
			<hr>
			<h3>HTML5響應式網站解決方案</h3>
			<p>好推建站,針對移動互聯網時代,好推提供企業HTML5響應式網站建設解決方案。</p>
			<a href="#">查看詳情</a>
		  </span>
		  <img src='statics/images/3.jpg'>
		</li>

		<li class="solution-slide">
		  <span>
			<i class="fa fa-all"></i>
			<hr>
			<h3>集團網站建設解決方案</h3>
			<p>好推建站-專注于集團網站建設、設計開發、集團群站整體解決方案。</p>
			<a href="#">查看詳情</a>
		  </span>
		  <img src='statics/images/4.jpg'>
		</li>

		<li class="solution-slide">
		  <span>
			<i class="fa fa-security"></i>
			<hr>
			<h3>品牌網站定制解決方案</h3>
			<p>好推建站-網站定制服務主要針對品牌需求,專業定制屬于自己的品牌網站。</p>
			<a href="#">查看詳情</a>
		  </span>
		  <img src='statics/images/5.jpg'>
		</li>

		<li class="solution-slide">
		  <span>
			<i class="fa fa-huanhuobz"></i>
			<hr>
			<h3>外貿網站建設解決方案</h3>
			<p>好推建站-幫助企業開拓海外市場業務,外貿網站建設解決方案。</p>
			<a href="#">查看詳情</a>
		  </span>
		  <img src='statics/images/6.jpg'>
		</li>

		<li class="solution-slide">
		  <span>
			<i class="fa fa-aniukefu2"></i>
			<hr>
			<h3>裝修行業網站建設解決方案</h3>
			<p>好推建站為裝修企業提供全方位數據分析,地區用戶需求分析,網站建設整體解決方案。</p>
			<a href="#">查看詳情</a>
		  </span>
		  <img src='statics/images/7.jpg'>
		</li>

		<li class="solution-slide">
		  <span>
			<i class="fa fa-set1"></i>
			<hr>
			<h3>機械行業網站建設解決方案</h3>
			<p>好推建站針對機械行業,通過對客戶需求,用戶數據分析,做出網站建設整體解決方案。</p>
			<a href="#">查看詳情</a>
		  </span>
		  <img src='statics/images/8.jpg'>
		</li>

		<li class="solution-slide">
		  <span>
			<i class="fa fa-wxbgongju"></i>
			<hr>
			<h3>LED行業網站建設解決方案</h3>
			<p>好推建站-為LED行業提供網站建設解決方案,充分體現LED產品的品牌優勢,重點塑造品牌個性化形象。</p>
			<a href="#">查看詳情</a>
		  </span>
		  <img src='statics/images/9.jpg'>
		</li>

		<li class="solution-slide">
		  <span>
			<i class="fa fa-naozhong"></i>
			<hr>
			<h3>IT軟件系統網站建設整體解決方案</h3>
			<p>好推建站為IT軟件系統企業,提供網站建設整體的解決方案和應對措施。</p>
			<a href="#">查看詳情</a>
		  </span>
		  <img src='statics/images/10.jpg'>
		</li>

		<li class="solution-slide">
		  <span>
			<i class="fa fa-suo"></i>
			<hr>
			<h3>行業門戶網站建設解決方案</h3>
			<p>好推建站,專業為企業、政府、不同領域提供高品質的大型門戶網站建設解決方案。</p>
			<a href="#">查看詳情</a>
		  </span>
		  <img src='statics/images/11.jpg'>
		</li>

		<li class="solution-slide">
		  <span>
			<i class="fa fa-wxbgongju"></i>
			<hr>
			<h3>生態農業網站建設解決方案</h3>
			<p>好推建站助力-生態農業,新農業發展,新農業健康食品發展網站建設解決方案。</p>
			<a href="#">查看詳情</a>
		  </span>
		  <img src='statics/images/12.jpg'>
		</li>

		<li class="solution-slide">
		  <span>
			<i class="fa fa-wxbgongju"></i>
			<hr>
			<h3>環保節能網站建設解決方案</h3>
			<p>好推建站專業的設計師根據節能環保公司的需求,采用最新表現技術全面設計,充分體現公司的企業形象</p>
			<a href="#">查看詳情</a>
		  </span>
		  <img src='statics/images/13.jpg'>
		</li>

		<li class="solution-slide">
		  <span>
			<i class="fa fa-wxbgongju"></i>
			<hr>
			<h3>房地產網站建設解決方案</h3>
			<p>好推建站提供房地產網站建設方案,采用先進的HTML5技術,完整的布局給企業帶來的經濟效益立竿見影。</p>
			<a href="#">查看詳情</a>
		  </span>
		  <img src='statics/images/14.jpg'>
		</li>

		<li class="solution-slide">
		  <span>
			<i class="fa fa-wxbgongju"></i>
			<hr>
			<h3>教育培訓網站建設解決方案</h3>
			<p>在互聯網高速發展的今天,好推建站為教育培訓企業提供網站建設整體解決方案。</p>
			<a href="#">查看詳情</a>
		  </span>
		  <img src='statics/images/15.jpg'>
		</li>

	  </ul>
	</div>
  </div>
</div>

<script type="text/javascript">
	$(document).ready(function(e) {
		new Swiper('.solution-swiper',{
			wrapperClass: 'solution-wrapper',
			slideClass: 'solution-slide',
			slidesPerView: 'auto',
			loop: true,
			observer:true,
			observeParents: true,
			centeredSlides: true,
			prevButton: '.solution-cut .fa-back',
			nextButton: '.solution-cut .fa-more'
		});
	});			
</script>
[聲明]本站素材來自用戶分享,僅限學習交流請勿用于商業用途。如損害你的權益請聯系客服QQ:2447402004給予處理。
舉報×
舉報原因:

相關代碼

二維碼
意見反饋
×
×

注冊

QQ注冊 立即下載 中国福彩快乐十分开奖分布图

簽到成功!

已連續簽到1天,簽到3天將獲得積分VIP1天

知道了