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.30165.com-599彩票网-| www.020813.com-彩票源码平台出租| www.138312.com-大中华彩票下载安装| www.330043.com-南洋彩往期开奖结果| www.89903.com-七彩视界ios| www.097998.com-福彩平台刷流水| www.217070.com-大发彩票计划| www.300010.com-贵卅快三和值走势图| www.381169.com-我所在的福彩店| www.be30.com-湖北省快三走试图| www.217275.com-快三怎么才能赢钱| www.yo54.com-福彩新3d-| www.512045.com-彩铅古风-| www.017160.com-三分彩计划-| www.19sf.cc-创名彩票可靠么| www.910865.com-篮彩比分差-| www.88391.cc-九九玩彩票首页| www.84eb.com-乐彩客苹果下载| www.11895.cc-乐乐彩票分析| www.893785.com-喜盈门平台彩票| www.kz90.com-什么是28彩票| www.355794.com-竞彩中奖需要交税吗| www.025496.com-网络彩票是不是假的| www.278522.com-彩票计划群24小时| www.790883.com-贵烟好彩多少钱| www.943162.com-福彩三胆计算方法| www.024426.com-手机国彩彩票下载| www.132906.com-彩色纸盒印刷| www.39yq.com-彩票平台包网服务| www.448658.com-时时彩五星百位走势| www.556389.com-彩乐汇的规律| www.630803.com-好彩1871欧盟| www.697779.com-七星彩生肖幸运选号| www.773008.com-福彩最佳阵容刮刮乐| www.1516.net-内蒙体彩电话号码| www.8799.com-168爱彩彩票| www.32270.com-彩钢板围挡多少钱| www.119014.com-福利彩票是什么| www.229363.com-网赌快三背后控制| www.092522.com-福利彩票东方6十1| www.924991.com-豹赢彩票ios| www.982573.com-同城彩票官方| www.ai36.com-昨日彩票号-| www.388049.com-华彩人生新版本官方| www.41kj.com-体彩票11选5| www.445617.com-彩票发行管理办法| www.112922.com-腾讯分分彩预测工具| www.200426.com-手机福彩-| www.1779.biz-快三共有多少个号| www.9450.com-彩票单双大小统计器| www.48324.com-大发时时彩大小计划| www.088262.com-多彩网彩票官网| www.065389.com-彩88彩票诈骗| www.bs33.cc-彩票手机过滤大师| www.388444.cc-猎人迷彩图片| www.215822.com-七星彩复式玩法规则| www.315855.com-彩虹e台6位分享码| www.368999.cc-9万彩票专业版| www.81600.com-海南私彩今日开什么| www.272171.com-博牛彩票合法么| www.411527.com-小花猫简笔画彩色| www.532379.com-彩票大乐透有规律吗| www.737389.com-永盛彩票网靠不靠谱| www.8924.com-彩乐乐网公告| www.77319.cc-贵州快三开奖结杲| www.105069.com-正规体育彩票软件| www.853.net-星际彩票聊天室| www.829249.com-微信卖彩票违法吗| www.184501.com-湖北快三结果查询| www.63691.cc-七星彩专家-| www.17hi.com-彩民商城-| www.27yv.com-九万彩票下载安卓版| www.579843.com-彩票账号-| www.338876.com-ss彩票-| www.114288.com-湖兆快三开奖结果| www.191700.com-幸运快三最全走势图| www.79mz.com-迪斯尼彩乐园app| www.w46.cn-全民汇彩票下裁| www.97iu.com-网站被彩票网线劫持| www.5852.biz-冠盈彩票-| www.973583.com-彩虹壁纸-| www.1563.vip-彩票榜邀请码哪里看| www.979618.com-天下彩每期文字资料| www.yn2.cc-黑彩票平台提现技巧| www.458658.com-今天足球竞彩| www.130038.com-111cc彩票公司| www.225751.com-福彩作弊事件视频| www.669630.com-彩钢板一吨有多少米| www.263907.com-彩票骗局-| www.wl63.cc-安徽快三的骗局| www.27yv.com-九万彩票下载安卓版| www.0359.win-七星彩几点不能买了| www.70wj.com-双彩网开奖中心| www.29im.com-彩票中奖兑换| www.2yh.cc-什么是基诺彩票| www.844.in-时时彩个位选号技巧| www.003407.com-恒大彩票84849| www.897987.com-竞彩广告语-| www.611309.com-彩虹六号本子百度云| www.93667.cc-微彩平台-| www.039369.com-华彩彩票是怎么事| www.751260.com-彩票网上兑奖| www.847006.com-足彩必发交易量盈亏| www.923652.com-盈利彩票-| www.977950.com-彩钢瓦墙板安装方法| 华彩网www.hcw332.com| www.206806.com-快三中奖图标| www.444316.com-天际彩票官方网址| www.549181.com-刷彩员-| www.444619.com-体彩5p开奖走势图| www.539160.com-快三和值是-| www.277037.com-福彩10分钟开奖的| www.736673.com-今天彩圣字谜| www.869109.com-带坐标走势图七星彩| www.971969.com-彩票兑奖截止时间| www.oe8.com-体彩11选5走势图| www.xb91.com-七星彩808长条| www.90zw.com-彩票二等奖交税吗| www.878222.com-福彩三地牛材网推荐| www.950387.com-105彩票网安全不| 七星彩票www.107186.com| www.571852.com-好彩双爆怎么样| www.cai76.cc-快三是什么-| www.980465.com-广西体彩官网七星彩| www.dm2.com-安徽省快三开奖| 凤凰彩票www.452809.com| www.zf57.com-7k彩票客户端| www.637162.com-彩虹六号安卓版| www.290771.com-内蒙古快三一二位| www.984.in-彩票开奖6号| www.553330.com-邯郸体彩中心地址| www.624557.com-满堂彩手机版| www.692627.com-移动积分换彩票短信| www.763293.com-体育彩票做庄微信群| www.829638.com-彩678软件下载| www.889607.com-凤凰彩世界信得过吗| www.949540.com-爱盈彩是真的吗| 天天彩票www.1035n.com| www.605977.com-吉林市体彩快三| www.230627.com-大发彩票下载| www.5200.me-彩友汇-| www.596978.com-最新彩票走势图大全| www.724926.com-cc彩票会员登录| www.83fq.com-浙江福彩彩票| www.73648.com-彩77是违法的吗| www.520362.com-买彩票的人都是穷人| www.vh74.com-江苏快三必中计划| www.98fw.com-彩票娱乐登录| www.6128.com-彩票稳赚方法| www.560826.com-8828彩票手机版| www.151124.com-瑞祥彩云彩票网页| www.26372.cc-团彩网-| www.297829.com-杭州市福彩中心在哪| www.456145.com-玩网络彩票输钱| www.555786.com-四川体彩金七乐直播| www.506600.com-狗咬是七星彩什么码| www.576271.com-湖北体彩兑奖点| www.627228.com-福利彩票几点钟开奖| www.678148.com-福彩3d定位走势图| www.735908.com-彩票培训师证书| www.797308.com-八马彩票app下载| www.855889.cc-福州彩票定位胆| www.929669.com-七星彩千位-| www.983472.com-天津时时彩走势|