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天

知道了
百盈PK10 www.98ql.com-福彩3d小军三版| www.7717.loan-二分彩票星际集团| www.555623.com-快三顺子两倍多少钱| www.713809.com-彩神网网址是多少| www.463588.com-汇盈彩票-| www.565615.com-18彩票网客户端| www.644595.com-彩九苹果下载安装| www.710107.com-女孩子加微信聊彩票| www.873694.com-彩票3b试机号查| www.01vq.com-鼎巨国际彩票靠谱吗| www.49345.cc-旺旺团队彩票计划| www.023996.com-主角中彩票后的小说| www.wb40.com-冀彩宝站主平台| www.49il.com-八彩鲜花加盟店| www.989263.com-彩票818官网| www.hj78.cc-湖北快三奖励| www.s51.org-青海福彩网址| www.397513.com-体彩大乐透截止时间| www.661653.com-竞彩易中技巧| www.aj36.com-七星彩没人敢买了| www.22jc.cc-天空彩禁肖| www.3003.in-趣9购老彩票邀请码| www.38997.cc-彩票不给提现| www.193938.com-神圣彩票app| www.ah96.com-手机体彩投注| www.607950.com-彩友多怎么下载啊| www.943721.com-被百胜彩票骗了| www.29879.cc-江苏快三倍投公式| www.3637.xyz-青海快三的彩票台子| www.36823.com-彩票28是正规的吗| www.500186.com-彩票导航平安| www.696044.com-体彩足球竞彩计算| www.836207.com-九龙中彩牛仁五肖| www.973067.com-彩虹世界类似的软件| www.ww08.com-最新申请26元彩金| www.80gz.com-七星彩开奖号码最新| www.3099.cc-世界杯彩票蛋糕| www.16297.cc-哪种彩票最容易中奖| www.63938.com-足彩月野兔博客| www.020738.com-今晚七里彩开奖结果| www.110005.com-六台彩软件下载| www.181799.com-北京彩票快三查询| www.874159.com-上海快三推荐和值| www.lf14.com-306全民彩票| www.77hb.cc-重庆时时彩第53期| www.5576.space-小彩牛彩票是真的吗| www.75573.cc-成功彩票登录网址| www.073303.com-也买彩平台网站| www.831370.com-彩票店请员工| www.n13.net-彩票数学挑选算法| www.5446.in-福彩太湖3d字谜| www.025735.com-福彩专家杀码成绩| www.163902.com-彩票可把人害惨了| www.331064.com-国际彩票棋牌| www.442283.com-易购彩票技巧| www.594164.com-七彩云扫一扫在哪里| www.698080.com-杭州体彩兑奖地址| www.723530.com-镇江体彩中心地址| www.52355.com-范本彩金-| www.171226.com-上海快三最新开奖| www.2229.top-易彩一福地登录| www.38775.cc-中彩平台能出款吗| www.98156.com-今天福彩3b试机号| www.099582.com-百盈互动彩票| www.93687.cc-彩色纸箱定做厂家| www.106608.com-足彩世界杯比赛竞猜| www.207160.com-湖北官网快三开奖| www.319155.com-辣椒七星彩下载| www.390368.com-重庆时时彩漏洞在哪| www.494779.com-彩票版区区开开| www.559689.com-云彩宝彩票苹果版| www.618926.com-明天的彩票开多少期| www.680129.com-彩票2元元网| www.756260.com-qq分分彩免费计划| www.826322.com-点石彩票-| www.890826.com-体育彩票61走势图| www.958452.com-七星彩二字现怎么打| 818合彩www.www.5666hc.com| www.cd40.com-大发快三代理邀请码| www.649463.com-彩博888官方| www.49741.com-一分快三豹子是哪个| www.638797.com-体彩店生意好不好| www.835861.com-好彩代表什么生肖| www.985182.com-竞彩单关都博平局| www.ow93.com-最新福彩3d交流群| www.1602.com-3d杀码家彩网| www.020011.com-北京多乐彩-| www.367276.com-新彩吧网站新彩吧| www.560371.com-棋牌游戏官网送彩金| www.777556.com-98cpw彩票网| www.897662.com-东莞福彩中心| www.gr41.com-好彩香烟图片价格表| www.02169.com-神彩网手机版本| www.96684.com-博纳彩票官网| www.071518.com-彩色纸箱定制厂| www.128402.com-竞彩模拟投注app| www.202530.com-彩之星江苏快3| www.268617.com-3d快三开奖结果| www.352529.com-小平台彩票违法吗| www.432400.com-湖南福彩网网址| www.552802.com-下载彩票计划| www.653820.com-跳快三的歌曲是什么| www.756205.com-58福彩靠谱吗| www.853645.com-彩票头条-| www.941223.com-彩票对冲套利骗局| www.997265.com-随机彩票中奖几率| www.di69.com-乐和彩开奖查询| www.290000.com-彩票16安卓-| www.395339.com-彩虹岛2官网| www.95236.cc-福彩中心会改企业吗| www.079308.com-大玩家彩票提不了款| www.141284.com-宁夏快三推荐号码| www.627895.com-大发彩票被黑| www.736311.com-免费带人回血彩票| www.808516.com-e乐彩会员线路| www.874022.com-福利彩票三d开奖| www.951361.com-下载北京快三并安装| 中国福利彩票www.33588j.com| www.hh83.cc-中彩娱乐骗局| www.848554.com-彩票官方注册| www.eq06.com-河南快三跨度玩法| www.7ih.com-过生日买彩票会中吗| www.356.tv-国外高频彩票| www.216823.com-老快三遗漏数据| www.670643.com-彩票店兑奖-| www.821783.com-彩票中奖码是什么| www.933933.cc-彩票指南电子版今天| www.rc07.com-大发时时彩官网开奖| www.70ct.com-鼎丰彩票下载安装| www.7808.vip-竞彩足球盘-| www.72191.cc-598彩票登录| www.214742.com-上海快三爱彩乐| www.6218.club-凤彩网主页-| www.10405.com-50o足彩-| www.43584.com-旺彩ios-| www.86958.com-彩票店老板不买彩票| www.033965.com-七乐彩票是什么鬼| www.102338.com-快开彩12选5| www.208720.com-体彩竞彩比分直播| www.277923.com-牛彩票时票-| www.111451.com-彩票团队计划高手| www.251037.com-河北福彩快三推荐| www.318827.com-幸运5分彩怎么玩| www.413259.com-分分彩八码做号| www.506124.com-彩吧图库小军第三板| www.570179.com-重庆分分彩精准计划| www.631327.com-看彩票开奖的软件| www.693011.com-体彩短信投注| www.762779.com-足彩单场彩即时比分| www.818192.com-足彩第19040期| www.879769.com-888彩票平台| www.10752.com-信彩彩票下载安装| www.49475.com-大学生买彩票中奖| www.680732.com-8亿彩苹果下载| www.360067.com-七星彩摇号器| www.460079.com-彩票机图片扑克娱乐| www.562263.com-上海基诺彩票奖金| www.625121.com-七乐彩预测结果| www.688965.com-星之卡比三重彩攻略| www.767944.com-中国竞彩足球计算机| www.833005.com-彩票3d开机号| www.911312.com-k彩彩票二维码下载| www.981590.com-举报福彩-| www.dt33.com-五星彩票开奖查询|