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天

知道了
500彩票竞猜 www.41864.com-彩票开奖查询开机号| www.2884.pw-彩票平台搭建出租| www.5024.cc-福建体彩开奖管方网| www.wm54.com-广西官方彩票客户端| www.340768.com-体彩专家预测推存号| www.3990.vip-甲骨文体彩店app| www.680056.com-彩票两元网-| www.776444.com-福彩3d追号-| www.871577.com-3d彩票缩水软件| www.948036.com-四川体育彩票网| 天地彩www.4tdc.com| www.60438.cc-彩票幸运定律| www.801565.com-运彩网合法吗| www.9302.vip-彩票奇人选号法| www.68116.com-中飞鱼体育彩票| www.503182.com-探探上拉人买彩票| www.604159.com-排列五彩票票花| www.229356.com-百盈彩票网址谁有| www.466555.com-名人彩票官方登陆| www.687300.com-足彩数学模型| www.835131.com-欧盟好彩柠檬双爆珠| www.524407.com-3b福利彩票总汇| www.636901.com-彩虹儿歌简谱| www.97804.com-c38彩票领导者| www.079396.com-1980彩票app| www.141490.com-鸣彩艺术官方网站| www.219499.com-福彩3d幸运号| www.290380.com-内蒙古彩票开奖结果| www.761561.com-好彩网怎么打| www.858726.com-黑龙江浩彩快三| www.931792.com-全中彩票app下载| www.984606.com-彩虹8彩票平台| www.219849.com-福建快三75推荐| www.288309.com-爱彩乐提不出款| www.356524.com-体彩竞猜官网| www.22890.com-福彩彩票网-| www.567861.com-玩彩票包赔什么套路| www.70043.com-时时彩胆码是意思| www.79499.cc-重庆时时彩彩票投注| www.776000.com-时时彩相对稳定玩法| www.912520.com-好彩客把我害惨了| www.991699.com-够力七星彩奖表官网| www.po17.com-湖北快三遗漏号统计| www.737367.com-福彩三d开奖号是| www.2791.wang-福彩排七开奖结果| www.99317.com-智胜彩票网-| www.130230.com-查福彩3d开奖号码| www.789391.com-外围体育竞彩app| www.917761.com-彩虹六号手游| www.981740.com-大中华网络彩票| www.084939.com-彩票外接显示| www.717359.com-国家福彩中心| www.790699.com-大乐大乐透彩吧助手| www.861785.com-赢彩助手3d试机号| www.919949.com-彩票软件彩缘| www.974164.com-福彩3d彩报小熊猫| www.cai569.com-网上快三代理| www.253795.com-好运彩快三下载| www.739742.com-3d彩票平台投注| www.71xk.com-彩票走势图如何看| www.199808.com-河北福彩三-| www.710172.com-大优手机彩票平台| www.778253.com-彩20下载-| www.857655.com-彩之源app网址| www.922247.com-怎么成为足彩分析师| www.976413.com-长春市福彩中心地址| www.cai2066.com快三跨度是什么意思| www.6187.com-秒速时时彩预测软件| www.299755.com-头奖彩票贴吧| www.350421.com-福彩3d门户网址| www.499439.com-体彩有哪几种彩票| www.579496.com-雪缘足彩山分直播| www.583260.com-彩色装饰画图片| www.390870.com-注册彩票账户| www.553599.com-竞彩中奖案例| www.655215.com-七星彩头尾书| www.736055.com-500彩票时时彩| www.812210.com-福彩中奖窍门| www.885644.com-彩宝网3d跨度| www.961047.com-时时彩顺龙还是反龙| 8号彩票www.611669.com| www.000305.com-彩票头条计划| www.86976.cc-悠悠彩票客户端下载| www.12319.com-伯爵国际彩票骗人| www.93135.com-有专业竞彩的团队么| www.070952.com-约彩下载-| 500彩票www.374977.com| www.pg83.com-江苏快三预测号码| www.13944.com-彩世界时时彩| www.1380.vip-奔驰彩票我的账户| www.la03.com-幸运福彩合法吗| www.31qn.com-什么彩票星期六开奖| www.54788.cc-福彩快3中奖号码| www.rk6.com-福彩快三害死人| www.435581.com-广东福彩多少个中学| www.025628.com-7乐彩开奖-| www.517570.com-永信皇冠彩票| www.680065.com-江苏快三的骗局| www.900745.com-百宝世家彩票| www.519931.com-酷彩买彩票安全吗| www.490098.com-下载小白彩票| www.26024.com-描写彩虹的优美段落| www.417627.com-彩虹6号百科| www.172812.com-湖北快三开将结果| www.dp53.com-118彩票骗局| www.523552.com-5分时时彩开奖号| www.610059.com-微信买彩票怎么扫码| www.690106.com-中彩网美媒体擂台赛| www.775446.com-中彩网3d预测分析| www.859516.com-彩票997官网| www.970629.com-迷彩免视频-| www.kb5.com-分分快三计划数据| www.985080.com-快乐彩太假-| www.wv63.com-彩鸿彩票有问题吗| www.ef83.com-中国福建体育彩票网| www.088042.com-澳客彩票网安卓版| www.769882.com-好彩18036网址| www.0703.org-彩票店申请书| www.247117.com-玩彩票怎么才能赚钱| www.605064.com-大乐透中奖彩票图| www.230879.com-湖北快三彩票2元网| www.308833.com-彩票高手计划软件| www.48728.com-彩1彩票app下载| www.980642.com-彩77app-| www.145952.com-本期足彩310预测| www.878166.com-福彩图迷总汇牛材网| www.119364.com-福彩3d最新开奖| www.85032.com-彩票后三容错| www.633567.com-神彩通四码-| www.369090.com-彩票体彩开奖号| www.606763.com-福利3d开门彩| www.699294.cc-中国福利彩票大乐透| www.802644.com-山东老体彩遗漏| www.876981.com-福彩十选五中奖金额| www.975073.com-海南七星彩怎么玩法| www.tb5.cc-福彩三d开奖| www.qp94.com-体彩福彩哪个靠谱| www.788563.com-福彩今天试机号| www.855255.com-深圳市福彩中心官网| www.906387.com-彩票游戏送彩金| www.169298.com-安徽快三预测| www.561791.com-开户送彩金-| www.960465.com-大发快3分分彩| 幸运彩票www.73166k.com| www.es44.com-彩神是真的吗| www.887141.com-九哥彩票是真的吗| www.969456.com-彩票计划首页| 大赢家彩票平台www.791317.com| www.754936.com-锋彩直播官网| www.100268.com-非法经营彩票罪量刑| www.nf69.com-江苏快三怎么买| www.13303.com-360竞彩直播比分| www.350461.com-快三012路怎么分| www.790342.com-炫彩公司-| www.841505.com-福彩改企业-| www.8419.loan-手机在线彩票下载| www.92980.com-皇博彩票这个软件| www.1167.vip-彩富网高手坛| www.509570.com-盈彩网app邀请码| www.100093.cc-大彩网app下载| www.796570.com-印尼五分彩后开奖| www.870957.com-南宁体彩兑奖中心| www.939496.com-买快三的官方平台| 乐盈彩票www.88kcw.com|