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天

知道了
强国彩 www.27vt.com-英国幸运5星彩下载| www.332273.com-体彩输钱可以报警吗| www.512251.com-小清新手绘彩铅画| www.823161.com-彩涂铝卷的价格| www.368756.com-快三追号公式| www.2125.cn-盛兴彩票v1官网| www.512139.com-初二彩铅画小人| www.27te.com-彩票刮刮乐是陷阱| www.369812.com-网冠彩3dd-| www.32738.com-乐汇彩票-| www.730402.com-易彩快三实时开奖| 500彩票网www.607993.com| www.133178.com-彩色包装纸的糖| www.240719.com-双色球颖彩预测| www.582003.com-地下六仺彩精准资料| www.669642.com-新浪福彩今日运势| www.772753.com-时时彩稳赢投法| www.879772.com-西安市福彩中心地址| www.954074.com-好彩柠檬双爆好抽吗| 幸运彩票网www.33598l.com| www.06iz.com-色彩画彩铅-| www.059958.com-全民彩票官方网站| www.12543.com-快三平投计划| www.22923.cc-福彩3d为什么难中| www.216135.com-大发快三怎么看豹子| www.529776.com-彩票直播怎么吸引人| www.910502.com-中国足彩网天天竞彩| 凤凰IIIwww.www.fh3993.com| www.md66.com-爱乐彩官网11选5| www.972.hk-七乐彩公式-| www.237542.com-体彩竞彩网比分网| www.018193.com-三国梦想星彩漫画| www.87947.com-姿彩彩票-| www.960086.com-五亿彩下载-| www.ez17.com-博牛彩票真的假的| www.13wa.com-好彩神算论坛| www.83xb.com-天津福利彩票双色球| www.al40.com-广西体彩11选5| www.41au.com-足彩专家分析预测| www.947537.com-福彩打票机视频教学| www.137401.com-彩票死绝密出号公式| www.53qe.com-49彩票论坛-| www.2002.hk-足彩秘笈-| www.734744.com-怎样算福彩公式| www.396905.com-贵州多彩宝水费| www.535521.com-彩票号码要几位数| www.666764.com-e乐彩提现可信吗| www.1830.vip-摇一摇福彩双色球| www.851984.com-彩票七位数中前六位| www.932589.com-中采彩堂开奖| 快彩www.81678j.com| www.682841.com-娱乐时时彩-| www.772116.com-篮球博彩必发指数| www.34974.com-朋友圈发彩票的说说| www.657.biz-特彩报码室开奖结果| 500彩票www.758500.com| www.il08.com-广东福彩下载买彩| www.zz35.cc-够力七星彩开奖直播| www.65kp.com-彩票今日开奖号码| www.13rs.com-山东彩票手机投注版| www.80823.cc-福彩打票员教程视频| www.655557.com-体彩大乐透多期票| www.zz70.com-竞彩店刷返点| www.215908.com-七乐彩中奖规则表| www.552594.com-速彩娱乐骗局| www.567811.cc-全国性彩票有哪些| www.649111.com-七彩椒种子催芽| www.721739.com-网上彩票破解| www.791065.com-好彩爆珠毫克| www.874549.com-山西体彩中心地址| www.948743.com-南宁快三开奖| 辉煌彩票www.2875c.com| www.620139.com-陶彩票登录-| www.010159.com-123彩-| www.183802.com-中国福彩吉林快三| www.189673.com-河南快三3012| www.558767.com-彩虹的约定下载| www.0556.net-彩票老店主推荐3d| www.9812.com-彩票数据大全| 杏彩www.00840m.com| www.md10.com-七星彩早版808网| www.180329.com-快三qq群骗局| www.266134.com-体彩打票机键盘图| www.12699.cc-彩票兑奖时间多久| www.799772.com-彩票白菜网址集合| www.951230.com-500足彩比分| www.hr35.com-今天河北快三走势图| www.038.date-七星彩开心彩版区| www.nc55.cc-爱彩乐app怎么样| www.1070.vip-彩票可以买几注| www.928061.com-破解福彩3d妙招| www.994905.com-好彩网破解-| www.340678.com-彩票牛彩网彩| www.518787.com-彩票生活699| www.561771.com-万彩影像大师官网| www.698737.com-头彩彩票网合法吗| www.863719.com-体彩5星彩查询| www.111534.com-顶尖彩票平台合法吗| www.236015.com-中国足彩网500| www.397038.com-昨晚彩票号码| www.4279.com-福彩体育彩票| www.809955.com-体彩的号码-| www.7up.com-江苏福彩十二选五| www.627679.com-ok高频彩票-| www.vd15.com-正规的彩票网站制作| www.77zc.com-足球竞彩算赌博吗| www.718018.com-彩虹是什么意思男男| www.58698.com-七乐彩今天开奖| www.577743.com-阳光彩票代理加盟| www.717260.com-初学彩铅多少色的好| www.920658.com-王者彩票大发快| www.cp5733.com-安徽福彩-| www.05205.cc-即开彩app下载| www.137148.com-苹果彩膜效果| www.305066.com-浙江体彩十一选5| www.258126.com-小米彩票app| www.123343.com-乐彩3d交流-| www.774679.com-买快三有什么规律| www.15659.com-少儿彩铅画获奖作品| www.805865.com-体育彩票大乐透开将| www.948556.com-彩票销售额排行榜| www.pn92.com-福彩3d奖金计算表| www.88kj.cc-黑彩票是怎么回事| www.247633.com-大发快三吧-| www.368963.com-go彩是真的吗| www.631178.com-福彩26期-| www.445849.com-128福彩主页| www.dt28.cc-彩福彩票最新版| www.061135.com-欢乐彩直播-| www.377215.com-迪士尼彩票乐园| www.ij72.com-微信上的广东福彩| www.y50.cc-3d彩神通今天关注| www.1783.net-吉利彩票系统维护| www.298606.com-今天六开彩开奖结果| www.507562.com-彩20app下载| www.908420.com-淘彩网app下载| 彩客博www.8667f.com| www.im80.com-足彩波胆-| www.a24.net-福彩标志-| www.90vo.com-王者彩票团队计划| www.2202.com-快乐彩票三黑网站| www.9134.com-七乐彩试机号| www.34144.com-彩吧网3d图迷总汇| www.96852.com-双色球彩票案| www.135119.com-晚晚好彩今晚图片| www.283958.com-极速快三软件| www.386970.com-类似m5彩票的平台| www.023181.com-体彩p3出号走势图| www.101553.com-新彩华章-| www.196007.com-抚州福利彩票总部| www.281758.com-e球彩2码聪明组合| www.916399.com-足彩计算器胜平负| 盈彩www.yc7701.com| www.xd41.com-七星彩和质走势图| www.185026.com-珠江彩票骗局案例| www.144965.com-福彩时时乐官网| www.029874.com-彩铅画古风手绘图片| www.253959.com-昨天快三全部走势图| www.695950.com-合肥福彩加盟电话| www.829832.cc-深圳穗彩科技彩票机| 99福彩www.652776.com| www.271688.com-彩运8有什么规律| www.701420.com-新加坡5分彩骗局| www.533290.com-彩票均衡原理实战|