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.137516.com-易彩网主页-| www.999888.com-台湾彩虹旗-| www.004418.com-足彩跟单-| www.420087.com-360彩票幸运购| www.242896.com-盐城人彩票中两个亿| www.69ra.com-奥马彩票-| www.27694.com-东彩娱乐是坑人的| www.25516.cc-竞彩必发盈亏指数| www.17952.com-彩客竞猜-| www.273643.com-福彩王素英视频| www.375286.com-体彩任-| www.653755.com-体育彩票申请| www.765229.com-乐发彩票是不是正规| www.888919.cc-彩站宝业主版| www.61zi.com-彩票6加1开奖查询| www.257228.com-58代玩彩票兼职| www.388760.com-买彩票中奖图片| www.22jq.com-大豪客彩票平台| www.0098.cn-福彩网名大全| www.286747.com-福彩开店申请| www.718722.com-羽泉版彩虹翻唱| www.832260.com-怎么开彩票站| www.919028.com-红快三开奖结果直播| 网易彩票www.089wy.com| 幸运彩票www.550806.com| www.395660.com-彩虹六号皮肤能卖吗| www.315004.com-彩96平台与那个| www.433956.com-毕节彩民-| www.544334.com-手机我中啦彩票下载| www.622806.com-3d彩票几天一开奖| www.697411.com-七星彩概率-| www.779850.com-中彩易叫什么| www.855862.com-七乐彩买十个号中5| www.917765.com-彩虹玫瑰图片| www.975541.com-湖南福彩发行中心| www.nw5.com-快三怎么看和值| www.sq69.com-小鹿重庆时时彩| www.784677.com-福彩三地连线专业版| www.872779.com-8k彩票购彩大厅| www.938800.com-快频彩要害死多少人| www.988982.com-中福时时彩-| www.qv19.com-老河口快三玩法| www.99713.cc-河内五分彩开奖号码| www.819199.com-广西福彩投诉电话| www.890504.com-9998彩票平台| www.959240.com-中国彩票中奖排行榜| 中彩网www.61233l.com| www.476100.com-彩票2元h-| www.589159.com-吉林快三精准计划群| 大赢家彩票www.541811.com| www.467070.com-中国彩八三b| www.669023.com-海南私彩稳赢| www.56600.cc-邯郸体彩中心| www.034782.com-委托买彩票-| www.164068.com-时时彩走势教学视频| www.83135.com-绵阳市福彩中心地址| www.7366.loan-海南七星彩手机投注| www.yv54.com-云南省福彩中心| www.277453.com-快三彩票的网站| www.381018.com-彩票开奖查今天| www.495780.com-香港利记博彩| www.574116.com-老师可以买彩票吗| www.603344.com-北京pk拾赢彩专家| www.675521.com-彩票了刀开机号| www.764802.com-充值送彩金天天送| www.824588.com-百福彩票是什么意思| www.884130.com-8828彩票登录| www.944470.com-体育彩票杀号机选| www.984938.com-彩运网网上登录| www.cp6992.com-快三赚钱骗局揭秘| www.821760.com-山东福彩群英会遗漏| www.898663.com-足彩让球规则详解| www.962253.com-福彩购买软件下载| 中国福利彩票www.33588k.com| www.fx15.com-探探男带玩彩票| www.wf49.com-浙江体彩开奖公告| www.07kv.com-上上期彩票中奖号码| www.73lw.com-重庆彩票发行中心| www.0933.me-新浪彩票购彩大厅| www.98lf.com-彩票杀人案-| www.wj33.cc-彩票体彩-| www.2121.me-多彩贵州城门票| www.9336.online儿童游戏彩球| www.165228.com-安徽体彩大乐透中奖| www.268929.com-5分彩怎么看号码| www.357626.com-员工中奖彩票| www.567939.com-迅盈彩票是真的假的| www.332898.com-快乐投彩票-| www.463889.com-红雨七星彩-| 全民汇彩票www.52303b.com| www.365265.com-tt彩票平台可靠吗| www.562302.com-陶彩吧-| www.664521.com-查七乐彩跨度走势图| www.776552.com-唐龙说彩3d关注| www.887180.com-彩票真的有人中奖吗| www.973788.com-彩票代理赚流水| www.cp5377.com-安徽福彩网-| www.6ar.cc-腾讯分分彩挂机方案| www.88ji.com-彩票平台骗-| www.6097.cm-釉上彩过程-| www.189271.com-河南快三二码走势图| www.312151.com-福彩胆码条件| www.458055.com-梦见买了彩票但不中| www.599330.com-彩票店春节开门营业| www.446969.com-天空彩免费料资大全| www.144850.com-彩票下期预测号码| www.177084.com-福建快三开奖遗漏| www.843910.com-兴华彩票软件下载| www.88315.com-春天彩票能提现吗| www.008294.com-买私彩犯法吗| www.154451.com-微信彩票赚钱下载| www.596415.com-9cbcc彩票计划| www.680923.com-时时彩倍投法| www.137784.com-钟彩仪-| www.gh90.com-彩票系统破解版| www.422907.com-淼鑫彩票网页版| www.778746.com-9万彩票网站| www.810123.com-赢彩网可以玩吗| www.885463.com-2118彩票软件| www.7722.live-数学家算出彩票| www.33786.cc-武汉福彩中心| www.55iv.com-ct彩投网-| www.94jz.com-欧州彩票开奖号码| www.15185.cc-温州体彩中心主任| www.138500.com-爱乐透彩票最新版| www.q13.org-中彩网开奖结果| www.392181.com-福彩三地开奖号儿的| www.620096.com-釉上新彩-| www.720054.com-大吉彩票新3d| www.791068.com-体彩奖号app| www.849309.com-nba竞彩篮球吧| www.896283.com-下载瑞彩网-| www.949706.com-掌上助手app彩票| www.997163.com-彩吧图谜第二、版| www.ag65.cc-五星彩下载-| www.110620.com-江苏快三漏洞破解| www.dv7.com-华夏幸运快三| www.vx50.com-时时彩快三软件下载| www.41fa.com-七星彩能网上买吗| www.61we.com-小米日历加彩票开奖| www.450337.com-3k彩票是真的吗| www.805055.com-彩票361平台| www.901318.com-福彩今天开奖号码| www.974257.com-环球彩票app| www.1987.date-慧金彩商业彩票| www.21033.com-超级彩票是不是真的| www.694222.com-中国体彩app官方| www.288777.com-彩票拉人交流术语| www.873449.com-体彩机器退押金流程| www.974108.com-環球彩票-| 大赢家彩票平台www.715025.com| www.226909.com-内蒙古福彩快3下载| www.781249.com-微彩社交app| www.656110.com-彩票包赔内容| www.194163.com-河北省快三预测号| www.cq55.com-瑞彩祥云邀请码| www.629522.com-彩票097-| www.719672.com-南洋彩资料-| www.799770.com-致富彩官方下载| www.869132.com-数学几何在彩票| www.928036.com-彩色复印价格| www.969680.com-快三赢钱-| www.669921.com-中博在线彩票可信吗| www.739028.com-世界杯彩票app|