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天

知道了
彩01彩票 www.48pw.com-三国杀曹植和张星彩| www.562828.com-重庆时时彩玩法规律| www.625519.com-开心彩票正规嘛| www.587148.com-微彩排列五图规| www.730569.com-哪个彩票软件靠谱| www.894218.com-万彩吧彩票开奖结果| www.cai4567.cc-快三一定牛-| www.00792.com-南方双彩网遗漏统计| www.795903.cc-9购十分彩合法吗| www.760331.com-时时彩号码统计软件| www.854447.com-时时彩怎么避免倍投| www.945611.com-体彩36选七-| 乐彩网www.3416s.com| www.im03.com-广西快三到几点结束| www.i20.com-代玩彩票骗局| www.936281.com-乐山快三开奖结果| www.ns34.com-彩票数字之间的奥秘| www.2935.cc-福彩快三倍投计划表| www.846155.com-彩票神人王成周采访| www.974546.com-易购众彩app| www.hv52.com-体彩快中彩开奖| www.118419.com-微彩票agg-| www.72235.cc-摇骰子彩票江苏快3| www.057322.com-足球彩票玩法说明| www.224360.com-快三中奖概率怎么算| www.323958.com-福彩快三怎样选号| www.452226.com-太原市体育彩票| www.739123.com-保时捷彩票靠谱吗| www.853380.com-天天免费彩票大全| www.995845.com-80彩票官网-| www.ci01.com-彩票网站哪个好| www.wg97.com-甘肃逸彩快三查询| www.370849.com-彩票苹果版500| www.550920.com-乐彩网天下帮文集| www.745444.com-顶级彩票99299| www.848109.com-时时彩平台被黑钱| www.981104.com-福彩快三怎样注销| www.bx77.com-在线派彩电子走势图| www.13ko.com-今天篮彩预测推荐| www.3162.xyz-福彩乡三d开奖| www.70294.com-bf彩票-| www.402166.com-乐85彩票-| www.671301.com-广州万彩-| www.776.cm-重庆时时彩预测器| 幸运彩票www.339208.com| www.926337.com-吉祥彩最新登录地址| www.008795.com-时时彩开奖器采集| www.131006.cc-河南驻马店彩礼| www.962043.com-山东手机体彩| www.bj24.com-正规福彩快三app| www.xp90.com-山东体彩扑克3开奖| www.21lr.com-体彩的宣传内容| www.0079.top-彩票相关名字| www.8057.cn-创意水彩作品| www.001666.cc-帝皇国际购彩平台| www.118903.com-彩票追加什么意思| www.257668.com-甘肃快三的开奖号| www.365537.cc-水溶彩铅用什么纸| www.483925.com-彩乐乐山东11选5| www.751969.com-手机上怎么彩票下注| www.962191.com-彩涂铝卷加工| www.vh05.com-江苏省福彩中心地址| www.63654.com-竞彩盈亏交易量| www.068720.com-下载福利彩票快三| www.165628.com-旺彩手机版下载| www.043001.com-足球彩票的区别在哪| www.985078.com-凤凰彩票平台网站| www.ae63.com-手机彩票网下载| www.ua66.com-彩票同位术-| www.21vl.com-福利彩票考试考哪些| www.1173.pw-彩票店开张如何促销| www.7862.com-足彩全包过滤条件| www.32972.com-体彩第19044期| www.0090.net-带彩的网名-| www.23fi.com-彩票高手软件| www.447390.com-怎么买彩色隐形眼镜| www.2171.xyz-甘肃快三黑彩| www.004085.com-中国彩票中心app| www.nc16.com-网络可以售彩吗| www.3099.net-体彩3历史开奖号码| www.12625.com-在线体育彩票app| www.87954.com-体彩p3预测分析| www.099372.com-11选五大彩鲸| www.743128.com-彩经网官网下载安装| www.553875.com-98熊猫彩银-| www.949861.com-大彩网怎么不更新了| www.965338.com-uu彩票是不是假的| www.27337.com-网上买足彩票| www.058480.com-彩界老大彩票今晚| www.6937.cn-七彩云南标志| www.015344.com-聚丰彩票-| www.139382.com-公务员可以买彩票吗| www.35775.cc-下载518彩票网址| www.93296.com-竞彩篮球害人| www.060987.com-欢乐彩票app下载| www.811895.com-新昌县双彩乡盛夏杰| www.30949.com-彩票幸运飞艇怎么买| www.97908.com-彩缘彩票客户端| www.108752.com-足球彩票手机软件| www.198493.com-七乐彩快三-| www.262611.com-微信快三群犯法吗| www.387434.com-福彩彩民乐钱树图| www.785035.com-中彩票的几率有多大| www.551854.com-彩票长龙统计网| www.663506.com-分分彩定位胆算法| www.879619.com-北京快乐彩合法吗| 好彩头彩票www.23579d.com| www.us28.com-中国体彩大乐透| www.88fv.com-好运连连中彩票| www.53442.com-彩虹儿歌歌曲| www.559418.com-牛人彩票网站| www.702819.com-致富彩网站-| www.378278.com-周口体育彩票申请| www.537234.com-彩票如何看小黑点| www.657682.com-彩票高手杀号方法| www.758969.com-吉林快三庄家胜率| www.872160.com-贵阳彩民中奖| www.974364.com-七乐彩奖池余额最新| www.ao38.com-彩票中奖查询大乐透| www.432513.com-10年买彩一场空| www.610283.com-如何网上开彩票店| www.948981.com-国彩彩票是官网吗| www.47ul.com-彩票每天充值送彩金| www.097201.com-福彩3d图库迷| www.878478.com-福利彩票自助机加盟| www.vd72.com-亿彩彩票官网下载| www.48pj.cc-三国杀张星彩厉害吗| www.2647.shop-一分快三能用赢钱么| www.qw87.com-香港时时彩网址官方| www.8933.org-天空间彩票与你同行| www.928508.com-俄罗斯彩票大奖号码| 快彩在线www.2632b.com| www.58326.com-彩娃彩票app| www.006972.com-赢彩排列三开机号| www.090786.com-2元中彩票-| www.153712.com-淘彩票快乐3怎么玩| www.234341.com-微信委托买彩票| www.355956.com-体彩属于金融吗| www.492351.com-警察可以买彩票吗| www.571795.com-体彩大乐透假不假| www.805401.com-七乐彩奖项金额表| www.933534.com-组织快三犯法吗| www.952915.com-预测快三软件| www.fi46.com-中国体彩网官网| www.12uw.com-福彩三分彩开奖结果| www.281138.com-时时彩后二经验| www.468060.com-福彩3d彩票图大全| www.713206.com-掌上七天彩票| www.793309.com-彩票跟赌博-| www.872677.com-天天快三365彩票| www.952714.com-乐和彩518-| www.bm21.com-彩票口诀-| www.415108.com-福彩胆拖投注说明| www.609277.com-今晚买什么码七星彩| www.802373.com-竞彩大数据分析软件| www.932145.com-快三哪个平台正规的| www.zn60.com-最新彩票资讯| www.368663.com-18个同学买彩票| www.505462.com-乐彩网3b讨论区| www.268061.com-福彩3d藏机图谜| www.069320.com-cpyes时时彩| www.137742.com-双色球彩票作假事件| www.243879.com-快彩是国家的吗| www.jw60.com-彩库宝典官方下载|