QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 图片代码 > jQuery css3响应式图文卡片滚动轮播特效

jQuery css3响应式图文卡片滚动轮播特效

这是一款jquery和css3响应式卡片图文列表轮播布局。基于owl-carousel图片滚动插件,通过bootstrap制作响应式卡片布局,组成炫酷的图文卡片轮播特效。
分享到微信朋友圈
X

使用方法:

1、head引入css文件

<!--响应式框架-->
<link rel="stylesheet" type="text/css" href="css/bootstrap-grid.min.css" />

<!--图标样式-->
<link rel="stylesheet" >

<!--滚动样式-->
<link rel="stylesheet" href="css/owl.carousel.min.css">

<!--核心样式-->
<link rel="stylesheet" href="css/style.css">

2、head引入js文件

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/owl.carousel.min.js"></script>

3、body引入HTML代码

<div class="container">

	<div class="row">
		<div class="col-md-12">
			<div id="news-slider" class="owl-carousel">
				<div class="post-slide">
					<div class="post-img">
						<a href="#"><img src="images/img-1.jpg" alt=""></a>
					</div>
					<div class="post-content">
						<h3 class="post-title"><a href="#">Latest News Post</a></h3>
						<p class="post-description">
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec elementum mauris. Praesent vehicula gravida dolor, ac efficitur sem sagittis.
						</p>
						<ul class="post-bar">
							<li><i class="fa fa-calendar"></i> June 5, 2016</li>
							<li>
								<i class="fa fa-folder"></i>
								<a href="#">Mockup</a>
								<a href="#">Graphics</a>
								<a href="#">Flayers</a>
							</li>
						</ul>
						<a href="#" class="read-more">read more</a>
					</div>
				</div>

				<div class="post-slide">
					<div class="post-img">
						<a href="#"><img src="images/img-2.jpg" alt=""></a>
					</div>
					<div class="post-content">
						<h3 class="post-title"><a href="#">Latest News Post</a></h3>
						<p class="post-description">
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec elementum mauris. Praesent vehicula gravida dolor, ac efficitur sem sagittis.
						</p>
						<ul class="post-bar">
							<li><i class="fa fa-calendar"></i> June 7, 2016</li>
							<li>
								<i class="fa fa-folder"></i>
								<a href="#">Mockup</a>
								<a href="#">Graphics</a>
								<a href="#">Flayers</a>
							</li>
						</ul>
						<a href="#" class="read-more">read more</a>
					</div>
				</div>

				<div class="post-slide">
					<div class="post-img">
						<a href="#"><img src="images/img-3.jpg" alt=""></a>
					</div>
					<div class="post-content">
						<h3 class="post-title"><a href="#">Latest News Post</a></h3>
						<p class="post-description">
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec elementum mauris. Praesent vehicula gravida dolor, ac efficitur sem sagittis.
						</p>
						<ul class="post-bar">
							<li><i class="fa fa-calendar"></i> June 9, 2016</li>
							<li>
								<i class="fa fa-folder"></i>
								<a href="#">Mockup</a>
								<a href="#">Graphics</a>
								<a href="#">Flayers</a>
							</li>
						</ul>
						<a href="#" class="read-more">read more</a>
					</div>
				</div>

				<div class="post-slide">
					<div class="post-img">
						<a href="#"><img src="images/img-4.jpg" alt=""></a>
					</div>
					<div class="post-content">
						<h3 class="post-title"><a href="#">Latest News Post</a></h3>
						<p class="post-description">
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec elementum mauris. Praesent vehicula gravida dolor, ac efficitur sem sagittis.
						</p>
						<ul class="post-bar">
							<li><i class="fa fa-calendar"></i> June 11, 2016</li>
							<li>
								<i class="fa fa-folder"></i>
								<a href="#">Mockup</a>
								<a href="#">Graphics</a>
								<a href="#">Flayers</a>
							</li>
						</ul>
						<a href="#" class="read-more">read more</a>
					</div>
				</div>
			</div>
		</div>
	</div>

</div>

<script>
	$(document).ready(function() {
		$("#news-slider").owlCarousel({
			items:3,
			itemsDesktop:[1199,2],
			itemsDesktopSmall:[980,2],
			itemsMobile:[600,1],
			pagination:false,
			navigationText:false,
			autoPlay:true
		});
	});
</script>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
58福彩 www.37363.com-金山彩票官网| www.088097.com-亿彩首页-| www.005173.com-体彩48l开奖结果| www.11177.cc-易彩注册账号| www.q02.net-乐猫彩票安卓版下载| www.85ox.com-西安市彩票号码| www.932018.com-七星彩容易中大奖吗| www.hr62.com-五百万彩票app| www.km96.com-广州快三查询| www.71.link-彩吧论坛官方下载| www.92qw.com-福彩30选5开奖| www.964829.com-淅江体彩网-| www.849.in-铁公鸡七星彩长条表| www.38827.com-彩票网站的四大优势| www.067270.com-新时彩中奖-| www.396568.com-58娱乐彩票-| www.72jn.com-约彩365黑奖金| www.6502.org-七星彩预测新浪网| www.62646.com-彩客网指数比分直播| www.081258.com-云计算彩票分析系统| www.37661.cc-凤翔彩票是不是骗局| www.ee11.com-分分彩最牛回本技巧| www.zh83.com-福彩3d之双彩论坛| www.52ii.com-足球竞彩凯利| www.598393.com-七星彩对比器360| www.761701.com-手机买福彩官网下载| www.904026.com-大发快三彩-| 鑫彩网www.xcw866.com| www.122063.com-快三手机软件| www.23958.com-3d杨大侠彩乐乐| www.31661.cc-足彩胜负14场比分| www.135293.com-最安全的彩票平台| www.625063.com-天空彩开奖现场报码| www.734797.com-三合开彩-| www.952496.com-配送员中彩票| www.xb2.com-福彩双色球走势| www.m27.bid-广西彩票快三软件| www.96633.com-福彩积分换彩| www.115413.com-七乐彩中3-| www.6046.com-甘肃中彩网-| www.479828.com-足彩半场胜分析| www.573629.com-创世红梅彩票| www.656666.com-趣彩网官网登录| www.757244.com-彩色沥青混凝土厂家| www.850785.com-时时彩总跨度是什么| www.933898.com-女孩玩彩票是下套么| PK彩票www.573898.com| www.76py.com-体彩几点不能买| www.2821.top-中彩官网摇奖机| www.01583.cc-欧冠足彩竞猜| www.227820.com-江苏快三的真假| www.472916.com-彩乐园免费资料大全| www.561390.com-彩票5950-| www.672578.com-福彩3第之家| www.743678.com-福彩彩金是什么意思| www.852290.com-梦见结婚谈彩礼钱| www.940608.com-大发快三如何压大小| 五星彩票www.5xct.com| www.518901.com-体育彩票官方客服| www.673926.com-什么部门管彩票站| www.7678.org-体育彩票字母含义| www.85817.cc-彩美旬果-| www.426098.com-体彩e球是谁开的| www.567774.com-七彩阳光广播体操| www.806119.com-甘肃快三走势图昨天| www.959949.com-职业足彩彩民| www.er35.com-安徽省快三推荐号| www.227176.com-新彩票快三-| www.301918.com-福彩湖北基本走势| www.365285.cc-彩库宝典平特一肖图| www.460031.com-福彩3d无错断组| www.551711.com-周一福彩开什么| www.622465.com-甘肃彩票最高中奖| www.700083.cc-3d福彩怎么玩法| www.777956.com-玲珑彩票app| www.844226.com-体彩中心改革国企| www.911671.com-澳门彩金是真的吗| www.969913.com-彩票抓了几个人| www.683869.com-推店彩票app下载| www.3739.net-七星彩公开册子| www.701257.com-足彩澳客网-| www.3552.xyz-首存1元送39彩金| www.10jc.com-x23幻彩版耗电快| www.77jh.cc-23国际彩票平台| www.1005.net-凤凰彩下载360| www.56757.com-时时彩千万别翻倍| www.7805.vip-家彩网三d开机号| www.051255.com-可以彩票合买的网站| www.h61.com-北京赛车彩票官方网| www.59126.cc-彩票店在什么位置| www.968478.com-77彩票靠谱吗| www.095810.com-四川体育彩票七星彩| 500万彩票www.936570.com| www.983224.com-彩31官网-| www.563685.com-柬埔寨网络彩票| www.650538.com-南京哪里有卖彩票的| www.717038.com-国产彩铅排行榜| www.797508.com-1998彩票-| www.211963.com-哪个彩票平台高倍率| www.193682.com-体彩7位数选号技巧| www.32lr.com-七星彩中六个数有奖| www.222466.com-彩票注册秒送28元| www.337397.com-河北快三和值遗漏| www.438384.com-易彩-彩民福登录| www.556367.com-体彩直选3-| www.639911.com-中国最大的彩票网站| www.734177.com-九亿娱乐彩票| www.824456.com-新彩的画法-| www.924540.com-福福彩彩票-| www.981688.com-k8彩票网注册登录| www.4ur.com-彩票大本营彩赢家| www.256739.com-中彩网网页版| www.685541.com-福利彩票官方版下载| www.mx15.com-在汉川开一个彩票店| www.853824.com-云南时时彩开奖官方| 创世纪彩票www.36787g.com| www.zs76.com-彩票怎么玩法| www.292572.com-福彩真精华布衣2| www.909947.com-彩虹六号多少钱| www.988255.com-仲彩app-| www.tb21.com-大发快三和值| www.021405.com-高频彩漏洞-| www.222464.com-什么彩票网站最安全| www.360141.com-境外网络黑彩| www.460151.com-乐彩模拟投注平台| www.599139.com-顶尖的彩票软件源码| www.768805.com-百度彩票手机版| www.906023.com-黑彩快三有没有漏洞| 天天彩票www.101129.com| www.865538.com-澳客网足球竞彩| www.517825.com-福彩三地易点彩票| www.nl62.com-足彩比分直播网| www.7hw.com-同事买彩票中奖| www.4540.net-天娱彩票靠谱么| www.23213.com-3d彩票下载安装| www.693621.com-足彩竞彩胜平负开奖| www.5481.vip-长春福彩3d开奖号| www.117772.com-竞彩海报模板| www.305092.com-福彩3d今天开奖吗| www.616014.com-一百万彩票-| www.767640.com-牛蛙彩票网站手机版| www.06wo.com-彩铅9岁儿童夕阳画| www.122897.com-酷彩吧是正规公司吗| www.699850.com-富余彩票网-| www.858511.com-彩神计划软件好吗| www.04668.com-足彩19047-| www.9224.com-航天彩虹是央企吗| www.87111.com-933彩票赢钱不给| www.28853.cc-期期中彩票能玩吗| www.845627.com-市福彩中心在哪| www.923885.com-河南快三怎么玩稳赚| www.pi14.com-海南快三开奖信息| www.zy04.com-体彩大乐透兑奖期限| www.8801.xyz-七意彩网站-| www.891310.com-福利彩票宣传标语| www.817452.com-23彩票安全吗| www.856433.com-彩票网站建设极云| www.3395.mobi-1077彩票app| www.860504.com-福利彩票江苏快三| www.839626.com-快三最容易出的号码| www.95771.cc-全国体彩彩民数量| www.534877.com-研究彩票的书| www.042030.com-彩票店宣传语图片| www.699723.com-中国足彩电脑版首页|