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.359333.com-微博彩票平台| www.mb46.com-足球彩票外围| www.0755.live-海口七星彩画规软件| www.90af.com-蓝月亮彩漂的成分| www.448699.com-互彩宝怎么登录彩票| www.g15.org-下载彩计划软件| www.75nj.com-今天3d家彩开机号| www.948564.com-福彩3d属相-| www.jn1.com-上海快三是国家的吗| www.d14.in-福彩3d彩票开奖| www.4553.biz-乐彩客软件下载| www.26559.cc-七星彩360胆码| www.9128.vip-体彩即刮彩票中奖率| www.cp9928.com-湖北快三今天走势| www.pb2.com-去实体店买彩票流程| www.9889.ren-中央彩票发行新规| www.ka35.com-数学破解彩票| www.65js.com-满堂彩平台-| www.885171.com-众彩网大乐透预测| www.969352.com-福利彩票中心收入| www.0723.wang-彩票安徽15选5| www.044518.com-快三网上赚钱| www.063334.com-乐发彩票骗局| www.865661.com-御彩轩计划时时软件| www.894249.com-779彩票平台网址| www.987864.com-福彩29选7-| www.wj45.com-大发时时彩专家计划| www.262597.com-宝马彩票平台网址| www.385219.com-酷彩中国专柜价格| www.492839.com-彩票3d专家免费| www.131.hk-正规体育彩票app| www.4901.cm-注册3a彩票-| www.qw30.com-福彩快3奖金是多少| www.0404.online球队买彩票-| www.796430.com-快三注册代码是什么| www.23196.com-福彩山地字谜| www.374600.com-手机体彩在线即开| www.523987.com-v博彩票平台| www.634200.com-湖南七彩集团招聘| www.839605.com-福彩中奖查看| www.952011.com-k彩联系客服登录| www.qz6.cc-体彩e球彩开奖结果| www.380128.com-彩鸾归令的意思| www.3322.cc-彩色复印多少钱一张| www.32088.com-网址导航足彩| www.43218.com-i福彩3d开号| www.xy30.com-澳发彩票官网| www.095078.com-福彩双彩图-| www.205997.com-辉煌彩票是骗局吗| www.327722.com-七星彩走势图带联线| www.920015.com-彩名堂官网ios| www.544.hk-易购娱乐时时彩贴吧| www.947217.com-美国加州彩票| www.cp0028.com-福彩快3助手免费版| www.34866.cc-三d彩报金老鼠| www.554015.com-冠亚彩票网-| www.661833.com-竞彩难中奖-| www.747743.com-环彩网ios下载| www.813330.com-有玩彩票的群吗| www.880679.com-福彩双色球投注方| www.954997.com-即开快彩-| 凤凰彩票www.89798.com| www.53575.com-时时彩1期计划表| 万彩网www.wcp777888.com| www.6510.shop-开心网彩票-| www.33376.com-凤彩网预测网址| www.69tb.com-彩票意外中奖故事| www.7241.top-彩虹机怎么用| www.80114.cc-高频彩公告-| www.009784.com-华彩在线网址| www.299933.com-彩票2元走势图大全| www.066854.com-买外围网站彩票| www.148682.com-皇都彩票怎么玩法| www.6928.cc-七彩孔雀-| www.086259.com-凤凰彩票lll| www.28yv.com-用水溶性彩铅画星空| www.351230.com-买彩票需要什么| www.27454.com-福彩500万走势图| www.73688.cc-杨毅竞彩猫收费太贵| www.520262.com-福彩3d家彩网独胆| www.629521.com-福彩双色球奖池| www.712716.com-彩票店几点停售| www.i23.pw-百度彩票开奖查询结| www.919.red-银丰彩票平台骗局| www.659844.com-远途国际彩票app| www.305973.com-七星彩预测海报| www.383368.com-祥瑞彩云app| 爱彩乐www.www.ac3177.com| www.748490.com-快彩注册邀请码| www.860562.com-彩民村-| www.00dz.com-彩乐透是什么意思| www.87nk.com-天猫国际彩票| www.61982.com-七星彩预测最准软件| www.77829.com-七乐彩五拖四多少钱| www.359261.com-微博彩票在哪| www.14lo.com-彩虹六号刘醒介绍| www.4959.vip-澳发彩票是骗局吗| www.22bm.com-腾讯有什么彩票| www.554425.com-彩票开业广告语| www.336047.com-惠泽了优彩社区| www.24fn.com-987彩票真的假的| www.96ei.com-博雅彩票平台| www.3019.org-6彩世家-| www.8543.vip-福彩大厅游戏机| www.71650.com-银海彩票工作室3d| www.036983.com-彩票01官方-| www.033620.com-做彩票帮投是真的吗| www.586318.com-中国福利彩票民政网| www.4296.biz-k彩平台手机版登录| www.098338.com-彩票内部计划聊天室| www.cp0155.com-快三破解器手机版| www.lm25.com-手机彩经网-| www.d53.loan-用人工智能预测彩票| www.509233.com-七星彩一个号有奖吗| www.633198.com-体育彩票竞彩篮球| www.700378.com-59彩票app下载| www.936321.com-福彩双色球客服电话| www.985332.com-竞彩足球足彩| www.ea6.cc-pc快三开奖结果| www.pd98.com-上海市福彩排列七| www.54114.com-阳光彩民乐图| www.017265.com-中博彩票诈骗| 中彩网www.91233d.com| www.637161.com-彩虹六号单机| www.226821.com-快三什么游戏| www.tq63.com-足彩能网上买吗| www.544757.com-3d彩易-| www.87718.com-南方彩票彩网app| www.99353.com-结婚什么时候谈彩礼| www.513162.com-百乐宫彩票-| www.33003.com-南京市体彩中心地址| www.638666.com-欢迎光临国民彩票| www.323548.com-中国福彩网3d开奖| www.544477.com-彩票挂机软-| www.144744.com-竞彩足球14场规则| www.hg59.com-甘肃快三开奖计划| www.093585.com-乐选3中奖规则体彩| www.5222.online福彩八卦图哪个最好| www.73ed.com-懂彩帝和懂球帝| www.612565.com-彩牛美缝剂代理| www.16np.com-富彩彩票骗局| www.033263.com-中国体彩自动售票机| www.550479.com-全发彩票怎么样| www.ep21.com-体彩独胆双胆| www.286224.com-精英彩票资料| 凤凰彩票www.88266f.com| www.231925.com-一分快三计划手机版| www.2978.in-中国风彩彩票| www.005154.com-彩芽的天真好奇心3| www.696090.com-彩票软件刷流量| www.387078.com-35期彩票开奖了吗| www.68zx.com-手机彩票怎么兑奖| www.779899.com-开彩票站的最佳地址| www.621287.com-湖北快三开奖查洵| www.137345.com-竞彩表格制作| www.947114.com-福彩中奖结果查询| www.0739.org-体彩e彩-| www.195350.com-江西福利彩票| www.188008.com-快乐时时彩开奖号码| www.59882.cc-微彩平台骗局揭秘| www.965340.com-中彩彩票登录| www.10990.com-烟台福彩中心照片| www.690540.com-鹰彩注册-| www.04878.com-福彩3d图纸第二版|