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.433256.com-8k彩票主页登录| www.035851.com-幸运时时彩计划下载| www.40qa.com-zgzcw彩网-| www.802414.com-体彩太湖钓翁三字诀| www.907585.com-体彩即时彩几点结束| www.975727.com-购彩网app真的吗| www.cm57.com-贵州快3彩经网| www.87847.com-华阳彩票是正规的吗| www.110263.com-富贵大发彩票乐点| www.187576.com-重庆时时彩助手| www.211480.com-职业玩福彩快3| www.214300.com-人人买彩票-| www.357977.com-彩票计算机技术| www.872124.com-q彩网站-| www.970011.com-彩之网绕胆图| www.j75.me-速赢彩apk-| www.9102.org-七星彩票规律图规| www.81611.com-今晚福彩3d试机号| www.64668.com-彩票榜手机版下载| www.852952.com-福利彩票预测158| www.624568.com-彩票都有几种玩法| www.902371.com-彩票天下报纸| www.939303.com-千万彩票下载安装| 网易彩票www.076wy.com| www.313571.com-彩票资讯网首页| www.532917.com-365天天彩票下载| www.670658.com-福彩水果农场怎么玩| www.761431.com-中彩票概率比死| www.939323.com-快三大小单双怎么压| www.234784.com-《中彩那天》课文| www.408935.com-福彩双色球彩票中心| www.266068.com-国彩网骗局-| www.411383.com-换外屏原彩显示没了| www.572682.com-怎么买竞彩-| www.760198.com-开福利彩票抽成多少| www.903367.com-高频彩规律-| 亚投彩票www.ya717.com| www.xh88.cc-七彩国际-| www.60402.com-大数据彩票-| www.59304.com-体彩5d推荐号| www.222644.com-玩快三是什么彩票| www.2284.vip-三d福彩黑圣手| www.70xd.com-美国彩票哪里买| www.841528.com-竞彩足球外围比分| www.lx68.com-好彩妹扮演者| www.0189.cc-赢彩官网-| www.8273.biz-时时彩五星直选技巧| www.xe10.com-今天的福彩3d图纸| www.261.com-澳洲彩票网-| www.677662.com-重生彩票大亨| www.3ny.com-七采彩开奖结果| www.81yu.com-银彩通官网建行| www.5150.com-韩国彩票奖金四等奖| www.327226.com-中国彩票开奖33期| www.423875.com-博彩账号被冻结找谁| www.855890.com-彩票站有定位胆的吗| www.253359.com-中国竞彩官方app| www.464.com-探探上全是彩票托| www.155956.com-竞彩足球单注上限| www.318938.com-抚州市体彩中心| www.084939.com-彩票外接显示| www.272521.com-河北快三今天走势图| www.324744.com-彩票统计软件| www.3ew.com-最大黑彩网站| www.726209.com-欧冠购彩万博d| www.016358.com-安薇快三开奖| www.218622.com-内蒙古快三技巧规律| www.m60.cn-福彩十选五官网| www.12sm.com-彩帝彩票正规吗| www.0334.top-玩彩网是合法网站吗| www.7148.cc-七彩假期官网| www.75xm.com-福彩魔鬼速查图表| www.627795.com-皇族彩票-| www.728860.com-大连体彩申请| www.05gc.com-彩铅上色黑笔勾边| www.5804.xyz-竞彩篮球3串3| www.56618.cc-河北体彩咨询电话| www.009565.com-尼彩手机-| www.081870.com-体彩七星彩中四个号| www.742006.com-好运彩网站-| www.898982.com-7星彩专家预测新浪| www.fr50.com-体彩开奖日期是周几| www.x68.cn-506彩票下载| www.75ql.com-算命测试彩票| www.3098.net-今天的彩票开奖日期| 天天乐彩票www.281380.com| www.hw39.com-快三精准计划软件| www.zm99.cc-好彩堂开奖网站| www.156019.com-体育彩票刮刮乐试刮| www.386162.com-港彩60876-| www.036290.com-k彩彩民登录| www.29781.com-有没有招彩票代玩的| www.388384.com-天天爱彩票竞彩| www.f23.shop-乐彩国际-| www.36933.com-官彩是真的吗| www.739276.com-百盈快三每期计划| www.812908.com-旬邑彩贴剪纸| www.883839.com-杏彩登录-| www.951614.com-一定牛彩票停售原因| 彩票大家乐www.21202u.com| www.ii42.com-福彩3d怎么玩| www.zz27.com-体彩开过电话号码吗| www.29nk.com-秋天风景画彩铅画| www.99je.com-乐彩网3d断组分解| www.3422.in-好彩酒楼江北店简介| www.9055.online新版时时彩平台源码| www.45453.com-微彩站申请-| www.961545.com-福彩3d两码太容易| www.vb50.com-彩票平台哪些赔率高| www.771159.com-时时彩押越大越不中| www.867681.com-奥网七星彩精准预测| www.948756.com-手机万彩吧下载安装| 九九集团www.99jta.com| www.308036.com-大发快三漏洞破解| www.556647.com-老版体育彩票app| www.660661.com-白袍法师乐彩网百度| www.752761.com-彩票赌博软件8na| www.292216.com-彩三-| www.042071.com-彩票代理怎么拉会员| www.509915.com-zc444众彩网| www.576271.com-湖北体彩兑奖点| www.632486.com-七星彩重奖规则| www.89263.com-9万彩票害了多少人| www.369475.com-福利彩票走向| www.wd40.cc-兰州体彩大乐透| www.669048.com-七星彩中了6位| www.554572.com-全民汇彩app| www.905552.com-开群买彩票-| www.034559.com-体彩可以买cba吗| www.671729.com-彩宝网大乐透预测| www.766118.com-神州乐彩重庆时时彩| www.852122.com-足彩任选九奖金预测| www.981741.com-大中华彩票登录| www.ei98.com-黑龙江福彩快乐十分| www.3458.net-极速快三在线计划| www.366970.com-qq买彩票怎么买| www.522506.com-腾讯分分彩龙虎口诀| www.590468.com-唯球看彩-| www.658285.com-一起发彩票-| www.908839.com-安徽体彩网官网| www.985402.com-关小刀足彩最新推荐| www.aa26.com-1分快三规律| www.09871.com-95彩票靠谱吗| www.98us.com-大乐透预测杀号彩吧| www.888763.com-下载最新网易彩票| www.vr35.com-即时开彩新版| www.765.pw-蜂鸟团队彩票计划| www.zn25.com-唯彩看球-| www.277014.com-七星彩中奖条件| www.490402.com-淘宝网可以买彩票吗| www.22136.cc-360足球竞彩| www.o28.net-玩彩是什么-| www.2662.bid-现在购彩软件哪个好| www.529831.com-彩票网有直播间么| www.159013.com-彩票开奖百度一下| www.976908.com-焦作孟州结婚彩礼| www.348021.com-彩虹的约定节目串词| www.661593.com-足彩8串一奖金最高| www.753703.com-qq彩色名字-| www.869261.com-七星彩怎么看懂规律| www.954601.com-掌上彩票pro官网| www.200448.com-体彩481几种玩法| www.258866.com-返点高的彩票平台| www.318029.com-凤凰娱乐黑彩可靠吗|