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.758268.com-中国彩票靠谱吗| www.034044.com-彩票术语图解大全| www.503618.com-网易彩票可以购买吗| www.889959.com-竞彩篮球大小分技巧| www.0188.cc-赢彩平台正规平台吗| www.4850.com-第二人生彩票攻略| www.367265.com-梦幻彩铅画手绘| www.526448.com-网络彩票可是犯法的| www.673878.com-古建彩绘图案丶| www.767716.com-彩宝网3d遗漏走势| www.899166.com-公用彩票数据接口| www.982824.com-互娱彩票邀请码贴吧| www.bl04.com-下载内蒙古体彩| www.959739.cc-204彩票-| www.cai1155.com福彩快3玩法| www.520191.com-青岛福彩郑庄养老院| www.623602.com-湖南省快三走势图| www.731994.com-今日佬牛足彩| www.828819.com-ee彩app合法吗| www.905189.com-伯爵云端彩票| www.968918.com-彩名堂安卓4.0| www.100416.com-金龙国际彩票网| www.796827.com-足彩倍投攻略| www.zg29.com-众网彩票-| www.35gi.com-南国体彩论坛最大| www.5094.biz-福利彩票几点截止| www.634002.com-七彩珠心算-| www.414813.com-七彩蓝田非法集资| www.536996.com-手机彩票有哪些种类| www.654960.com-霞光异彩是成语吗| www.733814.com-福彩水果农场| www.816873.com-中彩票后的生活知乎| www.894873.com-中国福利彩票的群| www.964961.com-体彩中心官网首页| TT彩票www.686783.com| www.892383.com-买高频彩输了30万| www.69is.com-彩虹六号2.5倍镜| www.752151.com-买彩票犯法吗| www.912111.cc-福彩公益金使用范围| 500彩票www.547677.com| www.145633.com-香港正版彩票王| www.75mp.com-玩彩票挣钱-| www.7652.pw-中国体彩2串1图标| www.59283.com-福利彩票分成| www.87954.com-体彩p3预测分析| www.803898.com-欢腾彩票官方网站| www.882983.com-彩票是不是都是骗局| www.959768.com-1515彩票-| 福彩www.86267w.com| www.677533.com-彩娃彩票登录不了| www.190533.com-e球彩走势图| www.308142.com-福彩35-| www.392661.com-风景绘画图片彩铅| www.577560.com-体彩幸运赛车颜色| www.718308.com-中国体彩11选5| www.900649.com-贵州彩票开奖查询| www.cp821.cc-玩快三能赢钱么| www.732206.com-国家政策对彩礼| www.981145.com-7彩网平台是真是假| www.029812.com-欢迎登录神州时时彩| www.121981.com-马云彩票店-| www.230020.com-福彩3d预测分析号| www.377687.com-彩虹5无人机图片| www.bv34.com-帮我查一下彩票开奖| www.5xp.cc-彩票小概率玩法| www.345134.com-七星彩新浪网开奖| www.456950.com-福彩上班时间| www.202268.com-贵州中彩票-| www.288672.com-为什么足彩越玩越输| www.363902.com-彩虹简笔画图片涂色| www.tl31.com-中国河南福彩快三| www.07qf.com-为什么彩票不能预测| www.954994.com-网络快开彩-| www.gs7.com-安徽快三计划网| www.449970.com-江西宝乐彩-| www.179639.com-湖北快三开奖及走势| www.92ro.com-福彩29选7一等奖| www.17423.com-淘彩票app官方| www.828259.com-红包彩票主播火火| www.930753.com-头奖彩票软件正规吗| www.987402.com-彩票234旧版| www.dv63.com-福彩网app-| www.xl44.com-甘肃竞彩快三| www.lq74.com-腾讯一分彩计划软件| www.0243.com-重庆时时彩各种玩法| www.7177.com-博彩有规律吗| www.2013.pro-彩虹6号按什么说话| 500彩票www.312477.com| www.8210.cc-分彩票-| www.53917.com-时时彩混选36注| www.72do.com-e球彩中奖秘诀| www.079087.com-竞彩过关方式对照表| www.m10.cc-彩乐大发快3| www.717982.cc-中国体彩有app| www.880982.com-彩票体彩中奖概率| www.941748.com-中国福彩网代理| www.992717.com-天天中彩代理| www.by42.com-广东福彩官网| www.661987.com-竞彩最高奖金| www.317972.com-合法彩票投注网站| www.51862.cc-3d双彩图谜-| www.99346.com-内蒙古体彩十一选5| www.077082.com-体育彩票买世界杯| www.135601.com-678111彩票网| www.8193.org-盈彩吧骗局-| www.662608.com-彩票七星彩几点开奖| www.845825.com-李永志彩票事件视频| www.955492.com-福彩端下载-| www.an32.com-大发快三下载安装| www.719318.com-河北保定快三联系| www.845875.com-253彩票下载安装| www.928073.com-鸿彩主播-| www.983924.com-99彩票合不合法| www.438477.com-乐亿彩票网-| www.586218.com-微彩网络错误| www.356744.com-彩票匿名领奖| www.363946.com-彩票3d恁么玩法| www.735023.com-环球彩妆学校| www.912491.com-去哪里举报网络快三| 旭彩www.565378.com| www.284677.com-江西省福利彩票| www.187730.com-时时彩技巧心得大全| www.303358.com-双彩论坛!-| www.406573.com-山东菏泽彩礼| www.946878.com-频彩是什么-| www.cf10.com-北京极速快三玩法| www.677332.com-最新的彩票投注网站| www.nq1.com-3分快三走势图今天| www.529035.com-七乐彩绝杀一码| www.173670.com-网络快三最好的平台| www.nn23.com-彩票选号器手机版| www.1707.vip-查彩票双色球开奖结| www.9610.cn-彩票买哪个容易中奖| www.42822.com-免费领彩金网站| www.017086.com-1688彩吧-| www.249244.com-中国福利彩票开奖| www.948896.com-高频彩官网开奖| www.so1.cc-体彩图标-| www.so87.com-人人快三网正规吗| www.023843.com-彩票五行属水| www.231192.com-上海快三查询| www.307011.com-韩国彩票中奖规则| www.397034.com-神圣彩票骗人吗| www.89yj.com-电竞博彩外围| www.89zs.com-彩娱乐官方平台| www.2787.pw-福彩3d中心交流群| www.635799.com-彩虹六号机票价格| www.964349.com-彩票怎么看才懂| JJ彩票www.22505.cc| www.930631.com-19037七星彩| www.983339.com-盈彩在线678| www.cp7255.com-分分彩害人真实故事| www.908791.com-湖南省福彩领奖地址| www.973205.com-彩虹授权站源码| 博友彩www.326265.com| www.125429.com-彩票分析基础答案| www.t28.club-五福彩票网上晒照片| www.005890.com-500彩票苹果版| www.53by.com-彩222彩票-| www.2819.xyz-吉林福彩新快三| www.01754.com-糖果派对赠送彩金| www.93771.cc-腾讯五分彩软件| www.ee0.com-官方彩是真的吗| www.sz82.com-彩票6位数-|