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.019966.com-1216813彩票| www.8928.bid-彩票包赢技术| www.393596.com-凤彩网杀号定胆| www.587234.com-宜昌快三查询| www.733989.com-杭州竞彩快三开奖| www.871684.com-利彩彩票版下载安装| 澳客网www.okw8.com| www.vi59.com-贵州快三软件下载| www.66kh.com-七星彩网上投注代理| www.949332.com-易彩娱乐手机版| www.998746.com-时时彩黑客入侵改单| www.js81.cc-五分彩万预测公式| www.552818.com-1号彩票官方下注| www.095910.com-竞猜型彩票有哪些| www.73bp.com-扑克彩票机的漏洞| www.579424.com-彩字谜语-| www.580255.com-彩吧三版-| www.cp483.cc-河北快三走势图昨天| www.mk90.com-时时彩预测专家| www.826327.com-银川体彩店转让| www.235910.com-竞彩足球购买| 吉利彩票www.66376h.com| www.677620.com-足彩加苹果版| www.790774.com-彩票开奖模拟器| www.880380.com-快三遗漏数据一定牛| www.951903.com-k彩登客服-| 大玩家彩票www.dwj0066.com| www.1382.net-福利彩票40万个税| www.05yc.com-水溶性彩铅怎么用| www.382.in-神圣彩票官网| www.96aj.com-java彩票源码| www.600641.com-那种彩票买的人多| www.798253.com-浙江体彩手机投注| www.879567.com-福彩都有哪几种玩法| www.979623.com-足球竞彩平台| www.ua73.com-快享平台新快三| www.033952.com-陆金彩票厉害吗| www.77072.com-彩票霸-| www.756777.com-全民竞彩官方下载| www.363007.com-福彩万能四码| www.460072.com-360体育彩票| www.550593.com-彩服丹冠似凤凰| www.620519.com-福彩3d开奖返奖率| www.184702.com-福彩快3走势图上海| www.3479.cc-网上博彩的网址| www.135727.com-彩票站招聘-| www.084848.com-彩盈自主彩票| www.ad62.com-彩票123手机版本| www.188514.com-爱彩乐官网-| www.156017.com-好彩客官网下载苹果| www.26391.com-福彩3d组6走势图| www.814170.com-网上彩票投注| www.861502.com-赢彩排列三开机号| www.259640.cc-广西福彩开奖助手| www.369423.com-体育彩票造假事件| www.265620.com-江苏快三走势图定牛| www.365235.com-甘肃省快三形态一| www.498995.com-玩彩平投如何赚钱| www.588363.com-球彩sam-| www.681986.com-中国有几种彩票合法| www.782715.com-双色球彩票开奖查| www.875743.com-实时彩开奖号码| www.963109.com-澳洲时时彩计划公式| www.cp934.com-福建福彩网-| www.ry35.com-手机买彩票安全吗| www.25xt.com-手机上买彩票靠谱吗| www.299.space-精准推单骗局足彩| www.31ol.com-彩虹下面赵雷歌词| www.807.in-彩虹鲨鱼t恤| www.5115.cc-海南七星彩免费头尾| www.09099.cc-金利彩票怎么老是黑| www.4554.cc-易彩测速网址| www.29763.cc-福彩赵公明专家预测| www.89055.com-手机查询彩票的软件| www.094998.com-买彩票不亏法| www.104723.com-时时彩缩水手机工具| www.622111.cc-五福彩票提现没到账| 易彩网www.686vv.com| www.42fd.com-看体彩排列三开奖| www.949467.com-抢红包彩票网| 福彩网www.5522a.cc| www.998598.com-香港快三查询结果| www.hx57.com-体彩e球彩中奖规则| www.028675.com-五行数字与彩票3d| www.94cs.com-海南马彩概念股| www.4694.biz-美即彩宝官网| www.948578.com-一买彩票就中奖| www.224170.com-辽宁体彩11远5| www.324613.com-澳门彩球游戏| www.419178.com-宁波竞彩网点| www.9710.org-类似彩宝彩票的软件| www.4hz.cc-加拿大28彩票官网| www.59qw.com-国家体育总局体彩网| www.6764.cc-搜索幸运彩票安卓| www.318972.cc-三分时时彩有官网吗| www.5328.wang-132彩票官方网| www.485886.com-足彩任九场开奖时间| www.573553.com-网上可以购彩票吗| www.663869.com-7星彩历史开奖号码| www.802282.com-快三三同号通选| www.900468.com-深圳十一选五爱彩乐| www.cp116.com-快三彩票大全| www.14om.com-竞彩足球违法吗| www.093699.com-一分彩技巧想输都难| www.07wn.com-彩涂合金铝卷生产| www.2379.vip-七彩山鸡苗批发| www.853866.com-365彩票怎样| www.919778.cc-彩票ps软件手机版| www.980587.com-彩票77苹果版| www.ze4.com-福彩快3怎么玩的| www.qn29.com-七星彩开奖号码查询| www.865527.com-甘肃体彩排列五| www.948548.cc-谁有北京快三群吧| TT彩票www.526013.com| www.092.mobi-彩票500网走势| www.09474.com-彩29网站下载| www.7yd.com-买彩票中奖50万| www.1064.net-中国体育彩票平台| www.7786.com-新彩课程小结| www.234594.com-湖北彩民倍投守号| www.278661.com-快三三码必中| www.995069.com-惠彩网站下载| www.wg1.cc-最新七星彩专家预测| www.qy04.com-大发时时彩中奖说明| www.9624.xyz-二分彩开奖结果查询| www.815263.com-秒秒彩坑人-| www.881252.com-快三免费计划app| www.946732.com-问题彩民怎样调整| www.984809.com-买彩为什么会连输| www.cai7433.com甘肃快三推荐号| www.ji81.com-安徽快三追号技巧| www.44101.com-白银市福彩中心地址| www.311019.com-五福彩票安卓app| www.51635.com-山西福彩中心| www.344318.com-时时彩亏损打法| www.246930.cc-吉祥彩票官方版| www.058849.com-彩99安卓下载安装| www.0550.bid-福彩最准男人独胆| www.d00.in-南国特区七星彩票| www.230334.com-彩八彩票害人不浅| www.305071.com-体彩足彩-| www.538262.com-竞彩混合计算器| www.eu81.com-江苏快三单双计划| www.339338.cc-买彩票的可靠软件| www.020925.com-大同彩票合买app| www.092289.com-福建体彩站有多少个| www.165956.com-手机验证18彩金| www.266031.com-彩票快三一定牛| www.079077.com-七乐彩胆拖选号器| www.335901.com-河北快三未出号码| 盛彩网www.41518s.com| www.996420.com-天猫彩票包场| www.gf26.com-彩客网手机版| www.e44.xyz-新浪机选彩票| www.5172.net-韩国彩票有几种| www.08on.com-登录大众彩票| www.364754.com-今日双彩求开奖结果| www.705277.com-足球彩票中奖高不高| www.wm07.com-爱彩乐怎么登陆| www.987615.com-汇彩网官网下载安装| www.427956.com-足球彩票过滤| www.557365.cc-手绘水彩花卉图片| www.655676.com-彩票中奖了整蛊短信| www.762663.com-博王时时彩下载|