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.9714.loan-彩票店销量急剧下降| www.813244.com-重庆时寸彩开奖结果| www.893753.com-网彩平台注册就送| www.982040.com-彩票怎么能中奖率| www.df21.com-青海快三官网| www.1yd.com-彩色笔水彩笔| www.gt3.com-北京最新快三玩法| www.4481.cn-幻彩褪黑晚霜| www.859800.com-中国福彩利彩票保障| www.939615.com-福彩坊官方网站| 盛彩网www.41518e.com| www.19169.cc-双色球彩票签名区| www.672028.com-彩票销量新闻| www.827744.com-14彩票网-| www.895971.com-福彩数据统计| www.4520.biz-彩票手机qq开奖| www.8345.biz-局王七星彩图纸| www.tm2.com-江西省快三走势图| www.00ak.com-大富彩票不让提现| www.883403.com-彩王彩票网-| www.05fs.com-彩网上哪个可靠| www.98ey.com-头奖彩票官方网站| www.892055.com-体彩竞彩足球如何看| www.977284.com-南阳镇平彩礼| www.2np.com-彩神viii官方| www.25352.com-彩铅也能画名画| www.199775.com-河南快三遗漏走势图| www.288983.com-快三避龙-| www.194771.com-重庆彩票网官网| www.723755.com-广东体彩大奖| www.828501.com-世界彩票中奖纪录| www.903251.com-彩票大数据分析系统| www.967745.com-360彩票开奖大全| 博友彩www.739908.com| www.533613.com-体彩七位要不要顺序| www.670555.com-七星彩说奖-| www.133544.com-天天好彩的生肖| www.08008.com-买彩票的微信群| www.515613.com-举报体育彩票私庄| www.001.cx-彩神提现被退回| www.1107.in-足彩8串8什么意思| www.za92.com-彩票十选五-| www.587168.com-巨人彩票是诈骗吗| www.6012.vip-手机购彩票那家好| www.56312.com-福彩三地天罡八卦图| 快彩在线www.kc53.com| www.zh90.com-福彩快三αpp| www.85892.cc-体彩天下app江苏| www.055550.com-大奖彩票有几种类型| www.138752.com-鸿彩倍投-| www.00136.com-彩票奖金支票| www.021578.com-有游彩票平台| www.162739.com-湖北体彩前三直| www.298196.com-福彩快3速查表| www.407100.com-彩票代理合法吗| www.im68.com-310足彩走势图| www.59oh.com-竞彩限售99倍投| www.91ln.com-福彩社区专家预测| www.xw53.com-苹果怎么安装彩6| www.uk15.com-彩票大赢家推广码| www.004001.com-大庆彩票中奖| www.923600.com-广东好彩一最新开奖| www.855222.com-国家体彩主任| www.969412.com-福彩3d实战宝典书| www.195601.com-高频快彩时间调整| 博亿彩票www.679by.com| www.97yu.com-炫彩水晶泥游戏| www.947131.com-高频彩被骗经历| 500彩票www.3126i.com| www.4682.in-我去彩票站下载| www.776185.com-必赢彩票登录不了| www.970725.com-1分快三计划工式| www.cp6055.com-3d福彩-| www.667611.com-吉祥彩j05005| www.13237.cc-公益体彩乐善人生| www.278125.com-乐彩网苹果app| www.391492.com-天玺彩票在哪里买| www.fb84.com-01彩票app-| www.a56.cc-手机淘宝彩票在哪里| www.56ig.com-彩票5等奖-| www.707558.com-今日体彩足球竞彩| www.862244.com-澳客电脑版彩票网页| www.52014.com-旺彩推荐怎么样| www.966646.com-腾讯中国彩合法不| www.gl1.cc-快三属于什么彩票| www.pa24.com-极速虎彩票-| www.050472.com-河南幸运彩开奖当天| www.82895.cc-今晚体彩开奖直播了| www.gn19.com-山东各地彩礼价格表| www.873068.com-湖北快三杀号360| www.525172.com-特彩吧现在开奖结果| www.629183.com-万彩吧彩票3d| www.716136.com-彩神争霸所有邀请码| www.795221.com-今日彩票幸运号码| www.878567.com-财富彩票app下载| www.971684.com-今天七乐彩最新开奖| www.pp0.com-福彩快三3开奖规律| www.73cp.com-赵信炫彩皮肤| www.2598.vip-移动免费彩铃| 天天中彩www.060899.com| www.61xl.com-手机里怎么买彩票| www.90673.com-彩票二维码通用吗| www.964263.com-足彩胜平负预测| www.ns94.com-拍彩票查中奖| www.cp283.com-贵州福彩官方网站| www.125015.com-中国福彩中心主任| www.5418.org-投注福彩盈利| www.901933.com-黑彩先赢后输| 大赢家彩票网www.178795.com| www.954249.com-大红鹰彩票app| www.985847.com-福彩3d预测赵公明| www.pg49.com-快三输钱能赢回来吗| www.54qg.com-买彩票怎么选数字| www.075386.com-七乐彩除八数走势图| www.195984.com-赣快三走势图| www.284181.com-彩色的东西有哪些| www.235727.com-齐鲁风采福利彩票| www.9598.site-彩票昵称取什么名字| www.989823.com-人人中彩票登陆不上| www.477783.com-118彩票网骗子| www.75je.com-各种彩票规则| www.350938.com-福利彩票买截止时间| www.983420.com-时时彩万位必中规律| www.686800.cc-中彩那天短文阅读| www.940344.com-最准全天时时彩计划| www.cai5588.com上海爱彩乐-| www.951790.com-足彩每日推荐2串| www.jp74.com-王者彩票有风险吗| www.117642.com-官方福彩幸用快三| www.537244.com-家人沉迷买彩票| www.0172.cn-什么东西是七彩色| www.8760.org-名人彩票娱乐| www.cp332.com-快三老平台-| www.604358.com-668彩票怎么样| www.120730.com-彩票走努图首页| www.ib41.com-安徽福彩中心地址| www.123671.com-国彩登录平台| www.36545.com-澳门彩票网站大全| www.518056.com-彩票指南报凤彩网| www.41188.com-彩虹六号国服预约| www.000478.com-5分钟时时彩走势图| www.180856.com-河北快三遗漏数据| www.830007.com-澳门博彩足球比分| www.891552.com-彩票统计分析工具| www.953230.com-贵宾中彩网-| www.lq79.com-旺彩大乐透预测| www.144165.com-彩票实体店营销方案| www.lb15.com-购彩app哪个好| www.739642.com-福彩快乐十二软件| www.796184.com-各大彩票一等奖概率| www.855055.com-福利彩票号码几位数| www.909113.com-新加坡华乐彩票开奖| www.957864.com-福彩中心主任王素英| www.995048.com-kg彩票骗局大揭秘| www.sw9.cc-今日甘肃快三走势| www.735333.com-7星彩概率-| www.820685.com-彩钢板怎么安装视频| www.172503.com-福彩快三是不是骗局| www.192113.com-福彩3d和值跨度表| www.909226.com-宝马彩票网-| www.977309.com-河南南阳彩礼是多少| www.cai5566.com广西快三助手| www.566959.com-易彩票骗局揭秘| www.650556.com-中班彩虹伞教案|