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天

知道了
亚洲28 www.656559.com-江苏快三有几种玩法| www.826769.com-搜索三b彩票藏机图| www.906327.com-彩票种类ig-| www.970171.com-体彩群名-| 博友彩www.931669.com| www.3iv.cc-下载彩39-| www.688.shop-彩票需要上税多少| www.066987.com-博彩软件哪个好| www.782308.com-中国彩票app| www.878693.cc-七星彩推算方法| www.516493.com-彩票47-| www.727469.com-33cc彩票注册| www.52363.cc-共享彩票最高倍率| www.003024.com-福彩3d独胆预测| www.080355.com-体彩6加1怎么玩| www.151063.com-网上彩票8816| www.197966.com-江苏快三跨度走势| www.998364.com-火凤凰福彩预测| www.865157.com-华彩谢茂全-| www.770461.com-黑彩做庄能赚钱吗| www.886666.com-福利彩票中奖是什么| www.974917.com-sd彩票-| www.mf1.cc-360新快三-| www.46089.com-时时彩全天在线计划| www.22113.com-2元彩票中100万| www.9209.net-七星彩开结果奖| www.538379.com-百度彩票还可以买吗| www.121081.com-彩票交流微信号| www.302746.com-下载308彩票| www.870172.com-挂彩是什么意思| www.sj31.com-福彩三地天气网| www.979423.com-体彩7位数中奖| www.23109.com-彩票怎样判断大小| www.133641.com-北京福彩赛车靠谱吗| www.257350.com-江苏福彩快三玩法| www.358184.com-开心网彩票论坛| www.52dy.cc-淮安彩礼2018| www.e48.bid-i23彩票-| www.80vx.com-爱彩比分直播直播| www.792883.com-福利彩票七彩乐咋投| www.908177.com-七星彩规则举例说明| www.257679.com-038彩票正规吗| www.360881.com-kh百彩网手机免费| www.21lw.com-体彩标语-| www.140160.com-那个软件可以买足彩| www.9489.tv-彩钢夹芯板房| www.62yn.com-开彩票店自己玩输了| www.188413.com-安徽快三倍投| www.531014.com-彩铅牌子哪个比较好| www.391858.com-福彩3d魔图表| www.945758.com-福建体彩网app| www.871956.com-牛彩票下载官网| www.968905.com-不要买彩金-| www.bl74.com-福彩快三平台下载| www.023562.com-全球彩票ios| www.337.name-学色彩搭配-| www.369190.com-神采争霸大发快三| www.036771.com-福彩体彩缩水程序| www.8261.biz-快三两同号多少钱| www.985575.com-足彩竞猜专家分析| www.li4.cc-快三到底坑了多少人| www.8848.pro-北大彩票专业| www.732244.com-彩礼和三金要退还吗| www.00790.com-福建体彩申请书| www.312623.com-快购彩票3期| www.113246.com-大奖彩票到底怎么样| www.217220.com-玩大发快三输了报警| www.477781.com-赣州福彩政策| www.566728.com-能玩彩票和棋牌| www.628565.com-美国纽约快三| www.689612.com-t乐彩-| www.0824.cm-欧冠体彩投-| www.933303.com-省份快三开售时间| www.z71.club-彩神和值怎么看走势| www.075266.com-彩票视频-| www.857664.com-彩之源这个是真的么| www.450253.com-福利彩票22-| www.1086.cm-幸运快三群-| www.7494.cm-济南体彩店转让| www.40645.com-世界杯足彩澳门盘口| www.372985.com-app809彩票-| www.3639.cm-湖北快三机选| www.265937.com-安徽快三开奖助手| www.066504.com-乐玩彩票-| www.282329.com-台湾时时彩骗局揭秘| www.4247.org-京东彩票客户端| www.543437.com-新的体育彩票| www.672307.com-全民彩彩票是真的吗| www.0064.pw-网易竞彩预测分析| www.98xt.com-中国竟彩网app| www.155016.com-足彩开奖时间每天| www.241.me-牛彩3d预测彩报图| www.kq1.cc-超级快三走势图| www.094677.com-3d中国彩吧蓝仙子| www.338342.com-郑州彩票-| www.333204.com-福彩三d开奖号往期| www.975374.com-时时彩跨度打法| www.1394.cn-水彩画植物花卉图片| 幸运彩票www.73166j.com| www.404102.com-e乐彩手机端| www.077945.com-海南七星彩规律表| www.827872.com-乐猫手机彩票| www.953586.com-胜负彩直播比分直播| 68彩票www.68682t.com| www.gy50.com-567cc彩票下载| www.zm28.com-内蒙古快三开奖时间| www.637467.com-竞彩店有名额限制么| www.408339.com-竞彩精准稳胆| www.114893.com-5oo万体彩-| www.575566.com-彩票一般几点停售| www.1356.cn-注册福利彩票多少钱| www.236359.com-体育彩票中奖规则| www.550005.cc-彩客集团股价下跌| www.309607.com-体育彩票排三| www.694.live-网上推广彩票违法吗| www.7673.top-彩世界软件下载| www.828983.com-彩九平台是怎么回事| www.914646.com-买彩票的技巧双色球| www.974332.com-广西快三和值遗漏| www.cai0977.com安徽快三开奖是多少| www.16bz.com-彩虹电影台密码| www.528287.com-河内时时彩软件| www.638721.com-浦东体彩网点查询| www.nr47.com-鸿彩网平台是真的吗| www.9dq.com-彩票怎么领奖| www.72np.com-彩世界ios下载| www.771531.com-澳门5分彩走势图| www.888966.com-中国体彩自动售票机| www.958901.com-今天福彩藏机图| 双龙娱乐www.slyl2.com| www.661769.com-中福利彩票的人| www.780802.com-88彩票安卓-| www.835406.com-联盟炫彩皮肤有什么| www.887387.com-招彩网-| www.8463.loan-乐彩网官网下载| www.66937.cc-附近彩票店在哪里| www.234414.com-黑龙江福彩22选5| www.340234.com-时时彩软件哪里买| www.0500.cn-福彩大家乐游戏规则| www.57906.com-黑彩平台评测网| www.185174.com-马云买了26年彩票| www.279735.com-腾讯分分彩平投盈利| www.629966.com-彩市新闻-| www.364306.com-测彩高手双色球预测| www.500579.com-生日送彩票的评论| www.567984.com-七彩野山鸡苗| www.627168.com-218彩票app-| www.685556.com-福彩和差运用| www.737256.com-彩票到哪领奖| www.817993.com-足彩复式怎么投注| www.881899.com-代玩彩票刷佣金被骗| www.939575.com-微信押大小双单彩票| www.983666.com-彩票66软件苹果版| www.fc53.com-百彩网马会开奖| www.872098.com-福彩三弟跨度走势| www.927990.com-二分快三在线计划| www.973577.com-彩吧助手下载| 大赢家彩票平台www.218565.com| www.53120.cc-一分彩彩票软件| www.06549.com-500竞彩网电脑版| www.63865.cc-模拟彩票-| www.220286.com-一定牛彩票可信吗| www.180798.com-手机彩票app| www.525318.com-搜索58彩开奖|