QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 图片代码 > jQuery响应式单排图片滚动代码

原创商用 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天

知道了
爱彩票 www.647963.com-斯蒂芬数学家彩票| 非凡彩票www.77210k.com| www.658339.com-中乐彩333-| www.983320.com-上海体彩兑奖地方| www.ka75.com-168娱乐3彩票| www.358366.com-2019年高频彩票| www.899248.com-快彩计划软件| www.cp6899.com-安徽省快三开奖结果| www.a97.me-福彩是那几天开奖| www.344656.com-武汉体彩中心| www.619099.com-山东福利彩票中奖| www.3654.biz-c8cn彩吧-| www.105660.com-新彊时时彩中奖助手| www.441182.com-体彩大乐透论坛预测| www.662296.com-重慶时时彩官网| www.828272.com-彩票系统带自动追号| www.969402.com-酷彩吧网站-| www.zt24.com-竞彩足球玩法说明| www.410050.com-世界杯竞彩分析推荐| www.695306.com-足球竞彩定律| www.836542.com-好彩1杀号方法| www.926721.com-春秋彩票没有客服| www.988012.com-01cc官方彩票网| www.cr53.com-彩客站-| www.231303.com-湖南福利彩票25选| www.338567.cc-彩尊手机版安装包| www.446602.com-乐吧彩网-| www.542466.com-体彩7位数昨天| www.646838.com-胜负彩任九吧| www.723059.com-开卖彩票店赚钱吗| www.99078.com-财神时时彩综合软件| www.130678.com-彩19彩票-| www.252922.com-时时彩开奖历史| www.348511.com-乐彩网官方平台| www.424123.com-足球彩票开奖号码| www.0573.in-玩彩的老头-| www.192810.com-快三怎么看和值| www.692797.com-有乐乐彩吗-| www.789460.com-中国竞彩网手机| www.931052.com-彩票88网官方端口| 福彩www.2109p.com| www.299086.com-凤凰彩票是真的吗| www.941357.com-体育彩票新游戏规则| www.if34.com-四川福彩快乐12| www.1698.me-财神彩票幸运大转盘| www.14232.com-彩票找平台-| www.77208.com-新体彩-| www.527611.com-时时彩跨度图| www.485585.cc-彩票代购软件排行榜| www.502505.com-彩票下海什么意思| www.664350.com-海南七星彩头尾图| www.774441.com-简单水彩画教程星空| 3668彩票www.3668z.com| www.78006.com-六爻测彩票心得| www.882184.com-韩国彩票都有什么| www.345432.com-大无限捷豹彩票| www.110748.com-ee彩软件-| www.cai8711.com彩票123app-| www.281455.com-时时彩后三和值算法| www.888034.com-七乐彩昨日中奖号码| www.399043.com-七星彩最常开的号码| www.gf89.com-最快彩票开奖结果| www.961492.com-体彩助手电脑版下载| www.ic19.com-支持微信提现的彩票| www.06fr.com-彩铅调肉色-| www.048470.com-爱彩彩票官方网站| www.167474.com-快三奖号-| www.092193.com-吉林快三97群| www.155621.com-派彩网福彩三d| www.68ef.com-体彩排列5预测号| www.222856.com-微信怎么买彩票| www.323305.com-七乐彩历史开奖| www.398857.com-大成彩票是什么网站| www.512862.com-谁有玩彩网的网址| www.xa5.com-快三助手软件| www.602095.com-500亿彩票平台| www.119773.com-北京极速快三app| www.888128.cc-香港赛马排位派彩| www.382.biz-anhui体育彩票| www.8390.top-官方彩传统彩平台| www.4150.biz-七彩阳光宾馆| www.236292.com-彩乐乐机选-| www.432305.com-注册彩票软件| www.90766.com-8亿彩票官网| www.dr5.com-今日快三走势图江苏| www.308203.com-新手怎么玩彩票| www.392653.com-lol电竞彩票| www.499491.com-彩票计划员招聘| www.131063.com-伊川的彩礼要多少| www.383291.com-陕西快三开奖时间| www.76io.com-七乐彩9中4个半| www.4174.biz-七位数体彩中奖分配| www.923332.com-人人中彩票官网福彩| 彩票大家乐www.21202q.com| www.339749.com-彩吧库图55125| www.d10.com-彩票开奖结果七乐彩| www.858920.com-上期的彩票中奖号码| www.586446.com-彩票预估-| www.271698.com-好彩1生肖走势图| www.392713.com-彩铅画真人鹿晗教程| www.15pv.com-彩票开奖体彩开奖| www.131217.com-彩礼68万违法吗| www.217672.com-五星彩票app| www.299336.com-彩票走势如何分析| www.837149.com-竞彩足球投资技巧| www.568873.com-幸运彩骗局-| www.088494.com-单场足球胜负彩| www.145104.com-玩彩票刷流水赚钱| www.362134.com-彩票少个角能兑奖吗| www.437726.com-彩票投注站宣传语| www.555543.com-彩尊客户端下载官网| www.362303.com-彩虹写一段话对妈妈| www.xk43.com-足彩讨论区虎扑| www.972955.com-彩库宝典怎么安装| www.0365.top-彩票杀号技巧与方法| www.962392.com-大发彩票手机登录| www.068414.com-福彩纽约三分彩| www.3132.win-七星彩中奖号| www.586067.com-分分时时彩网页计划| www.653580.com-北京pk彩票客服| www.737793.com-福彩3d开奖结果| www.4751.vip-欧美190的彩票| www.9609.loan-福利彩票造假事件| www.675013.com-苏州体彩在哪儿兑奖| www.04mx.com-彩天地是什么东西| www.707758.com-新浪胜负彩比分直播| www.9820.cm-江西快三11选5| www.199223.com-江苏快三推荐号码| www.895894.com-彩票跟单合买应用| www.304985.com-体彩十一选五软件| www.369465.com-福利彩票坏处英语| www.163101.com-巨彩彩票能提现吗| 博乐彩票www.665993.com| www.86ga.com-新彩网福彩3d预测| www.47927.com-好彩网团队-| www.043388.com-彩票充值假聊接单| www.89291.com-福彩查询app| www.138558.com-万达时时彩平台注册| www.76to.com-3d彩民乐彩报| www.ou92.com-快乐彩走势图总汇| www.45zz.com-盛世时时彩-| www.18617.com-265彩票软件下载| www.016323.com-福彩3d组选计算器| www.352843.com-京彩下载链接| www.580205.com-体彩办专管员| www.694550.com-竞彩篮球历史开奖| www.889616.com-c27彩票登陆| www.9141.cn-体育彩票金七乐开奖| www.675653.com-解福彩3b太湖字迷| www.305566.cc-彩票怎么才能中奖| www.529234.com-七乐彩免费预测网| www.689478.com-浙江省福彩兑奖地址| www.005640.com-河内时时彩计划全天| www.777813.com-汇彩网彩种-| www.852007.com-老杨说彩的文章成绩| www.086891.com-福星彩彩票是骗局吗| www.279446.com-申利娱乐时时彩申请| www.698622.com-中国6加1彩票玩法| www.07522.com-建设银行中彩啦| www.6699.hk-彩票应用大汇集| www.491786.com-体彩可以买足球吗| www.325935.com-彩店宝彩票下载| www.261891.com-大众彩票注册送体验| www.358415.com-浙江福利彩票站点|