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天

知道了
998彩票 www.6174.live-体育彩票是不是搞假| www.57114.com-泊松足彩模型下载| www.072068.com-人人中彩票靠谱吗| www.152608.com-湖北省体育彩票| www.263927.com-店之宝彩票app| www.427952.com-胜负彩过滤-| www.536329.com-福彩1d怎么买| www.643133.com-304彩票-| www.743855.com-网上福彩快三购彩| www.825546.com-云南申游快三是哪里| www.906644.com-福利彩票都有哪些| www.977012.com-惠安街道彩礼标准| www.fp88.cc-宁夏福彩快三手机版| www.zt03.com-彩票智能选号器| www.36dz.com-中国福彩中奖窍门| www.1116.pw-竞彩能挣钱吗| www.8276.cn-珀彩国际是传销吗| www.34500.com-上海体彩手机在线| www.85517.cc-冠盈娱乐彩票官网| www.049188.com-福建体彩报-| www.171695.com-江西多乐彩今日开奖| www.267921.com-竞彩500足球| www.363033.com-网上购彩恢复| www.463480.com-好彩客彩票怎么样| www.558457.com-古风女彩铅手绘图片| www.635251.com-时彩有规律吗| www.763766.com-足彩加官网app| www.860001.com-时时彩是不是诈骗的| www.933469.com-全国高频彩票app| www.995704.com-足彩能买单场吗| www.uj4.com-'彩票开奖结果丨| www.se09.com-昨天内蒙快三走势图| www.17ah.com-彩鸾归令格律| www.378.cm-福利彩票中奖了事件| www.4765.wang-南宁福利彩票店| www.06351.com-高频彩投注策略| www.54566.com-彩票稳定平台| www.002987.com-体彩七星彩摇奖器| www.079452.com-3d彩票咋玩-| www.151694.com-五行数字与彩票| www.309618.com-31选7私彩-| www.384331.com-qq哪里可以买彩票| www.522689.com-彩票走势图5oo| www.596071.com-中彩票后被杀| www.675258.com-福利彩票七乐彩预测| www.759868.com-时时彩怎么看走势图| www.874021.com-大发快三和值技巧| www.967319.com-qq群老师带玩彩票| www.cai0800.com快三网站平台| www.ll75.com-中彩彩票快3| www.m16.website常笑体彩店合法吗| www.47xh.com-合买彩票中奖机率| www.948.in-彩票号码均衡论| www.8856.org-乐彩网合买大厅| www.45866.com-云彩生活无纸化彩票| www.93772.cc-正规的网球彩票网| www.059152.com-中国体彩nba| www.166362.com-分分快三怎么玩| www.255467.com-快三预测一定牛北京| www.331484.com-彩票趋势分析入门篇| www.405054.com-神彩争霸8邀请码| www.515785.com-领航时时彩微信群发| www.587215.com-中国体彩网快三| www.662929.com-如意彩票手机app| www.739041.com-福彩微信群-| www.811762.com-微博怎么买彩票| www.887469.com-釉下彩怎么画| 大赢家彩票平台www.976731.com| www.ka24.com-中彩彩票用户登录| www.e71.club-七星彩大师规律头尾| www.35nl.com-农民彩票-| www.1163.in-网络彩票术语| www.7705.vip-湖北快三开将| www.25649.com-彩民周刊编辑组| www.68376.com-秒速时时彩开| www.107337.com-福建福彩七乐彩开奖| www.177019.com-江苏快三怎么玩大小| www.251300.com-今日彩票apk| www.322023.com-看体彩排五开奖号| www.392117.com-体彩开奖36选7| www.557769.com-重庆十字彩开什么| www.625450.com-珠江彩票平台| www.694448.com-足球彩票圈论坛| www.771250.com-身边有人中过彩票吗| www.883921.com-百姓彩票网的信息| www.957045.com-彩票挂机不爆方案| 乐趣彩www.lqc8.com| www.cn73.com-彩界联盟安全吗| www.tp99.com-湖北省快三中奖图案| www.02ya.com-菲律宾做博彩客服| www.71km.com-彩票祝福语经典| www.0956.vip-福彩合买宣传| www.01691.com-幸运彩金-| www.54020.com-时时彩赢了不能提现| www.97738.com-永利皇宫时时彩| www.059573.com-k彩娱乐线路测速| www.160344.com-乐彩走势图大全| www.247525.com-福彩33d开奖结果| www.318481.com-福彩排列七开奖规则| www.383851.com-三晋福彩网官网| www.523511.com-网易163彩票开奖| www.603853.com-体彩最大遗漏号| www.671140.com-香港和彩宝典大全| www.744129.com-福利彩票有人中过吗| www.811484.com-福彩3d万能四码表| www.882475.com-刷英国五分彩| www.982710.com-广东好彩一预测推荐| www.dx04.com-手机现在能买彩票吗| www.vc46.com-体育彩票单式票| www.03ya.com-体彩大乐透| www.67fn.com-快三分分彩漏洞| www.0453.org-彩网cai5下载| www.8611.date-彩神通怎么样下载| www.37747.com-c02彩票登录平台| www.79733.com-天水市体彩中心在哪| www.025802.com-淘宝彩票入口在哪| www.093836.com-彩世界开奖官网| www.152637.com-快三安徽开奖| www.279373.com-红旗彩票群-| www.361795.com-买彩票就是看运气| www.442520.com-下载彩票网站大全| www.527886.com-微彩娱乐是骗局揭秘| www.626833.com-信发彩票app| www.691342.com-九龙彩票下载| www.762397.com-87彩店app停用| www.864659.com-彩票必赢网-| www.925760.com-l9cfcc彩富网| www.977514.com-好彩头下载-| www.qm3.com-体彩排列3中奖玩法| www.ot13.com-用手机买彩票合法吗| www.2ys.cc-黑彩十大-| www.50ph.com-三d多彩网-| www.513.site-福彩3d精准彩票群| www.4252.top-竟彩比分500| www.9145.xyz-机选七乐彩新浪彩票| www.002558.cc-博彩反水-| www.060568.com-彩500大发-| www.139921.com-七星彩加急版专区| www.208639.com-江苏快三助手下| www.271952.com-213彩票-| www.367501.com-幸运彩票软件靠谱吗| www.449126.com-数字彩开奖彩票网| www.529482.com-七星彩特区-| www.623882.com-彩47彩票-| www.684655.com-福彩福彩福彩| www.752592.com-彩虹六号有国服吗| www.851622.com-时时彩智能分析软件| www.905771.com-国彩怎么提现| www.963915.com-彩票六大网投| 68彩票www.68682t.com| www.cc91.com-体彩5d开奖查询| www.ra65.com-极速时时彩口诀| www.06ge.com-用手机怎样买彩票| www.65ld.com-彩票开奖杳洵| www.931.date-七星彩大奖票样| www.4292.cn-福彩字谜双彩论坛区| www.9056.net-七彩乐中奖结果图| www.64495.com-收米竞彩-| www.016059.com-彩管家app下载| www.072809.com-九亿彩票app下载| www.127823.com-真正的彩虹-| www.188852.com-浙江福彩快乐彩| www.249734.com-彩票顶呱刮app| www.308299.com-贵州快三中了多少钱|