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.607098.com-天津福彩电话号码| www.734211.com-福彩体彩走势图下载| www.814818.com-快3中彩网app| www.907684.com-合肥体彩领奖地址| www.971999.com-福彩35选7走势图| www.l85.com-易彩一分钟快三做假| www.56ir.com-福彩体彩app| www.976.online-电玩城彩票机调试| www.22786.cc-怎么下九州彩票| www.71855.cc-快3彩票中奖是多少| www.104723.com-时时彩缩水手机工具| www.274244.com-梦见买彩票中奖号码| www.413536.com-彩八游戏-| www.526381.com-头头博彩-| www.628980.com-福彩任务代打| www.709051.com-七天彩票是真的假的| www.794611.com-立彩破解器-| www.875871.com-星彩网彩票大赢家| www.983824.com-大连市福彩中心在哪| www.ad59.com-彩票123最新下载| www.va08.com-詹天佑福彩3d今天| www.15rq.com-彩礼20万多吗| www.777.club-福彩3d杀一码高手| www.5581.pro-彩牛美缝剂质量好吗| www.18070.com-湖南福彩票网| www.66321.com-千禧彩票线路导航| www.120454.com-078彩票app-| www.199902.com-高频选5彩票软件| www.279948.com-博彩可以破解吗| www.393342.com-动漫彩铅画入门教程| www.523326.com-时时彩下期出号规律| www.614080.com-乐天彩票网是真的吗| www.693469.com-七天彩掌上购彩| www.778251.com-今日福彩3d开奖号| www.891662.com-彩票微信名字大全男| www.965262.com-辽宁彩票官方网站| www.c3.hk-内蒙快三爱彩乐网站| www.se07.com-亚投彩票是什么| www.17dm.com-河南快三组合走势图| www.238.me-淘彩票漏洞赚钱| www.4201.cc-彩钻品牌-| www.00619.com-好彩门户开奖| www.72108.com-福彩3d选胆图表| www.036609.com-快三选号器-| www.127797.com-彩虹岛2-| www.205111.cc-吉林快三基本走势图| www.301899.com-旺彩官方下载苹果| www.389777.com-塘厦彩票店转让| www.551533.com-福彩快乐彩概率| www.639021.com-中国福利彩票是谁管| www.754428.com-特彩4949-| www.833858.com-好彩多少钱一盒| www.907603.com-嘉定机选中奖彩民| www.966501.com-全球彩票网正规吗| 彩神网www.csw288.com| www.he42.com-福彩是什么意思| www.yz06.cc-福彩三d开奖规则| www.27ev.com-众购彩票导航网址| www.0854.me-福彩扫码验奖| www.7667.me-福利彩票大全图九| www.26337.cc-福利彩吧助手| www.70990.com-时时彩彩票aqq| www.057079.com-休闲帝彩票-| www.138668.cc-互娱彩票返点| www.217812.com-7125彩票计划网| www.290315.com-黑龙江快三开奖| www.364397.com-彩票开奖记录查询| www.455555.com-中彩票的故事| www.546737.com-二手福彩机器多少钱| www.680935.com-七星彩平台赚钱吗| www.761231.com-好彩票hcpon| www.850955.com-极速时时彩全天人工| www.918223.com-飞艇彩票怎么玩| www.977497.com-潘多拉彩妆官网| www.km70.com-易彩集团软件靠谱吗| www.f86.org-华人彩官网注册登录| www.35hi.com-彩票分析家官网| www.0315.cc-彩虹的约定歌词歌谱| www.6708.xyz-计算器竞彩-| www.17613.cc-捷报网足彩专家分析| www.59915.cc-竞彩8串8容错几场| www.030960.com-永乐彩-| www.107666.com-足彩分折一新浪彩票| www.175371.com-体彩快乐十分| www.280804.com-地下时时彩-| www.365549.com-六开彩完整版| www.453315.com-第一台熊猫彩电| www.540150.com-玩彩网客户端下载| www.646465.com-博彩宝马网站| www.730229.com-78彩票网-| www.799910.com-龙之彩是不是黑平台| www.873196.com-四川体彩管理中心| 500彩票www.26299g.com| www.dn35.com-能玩河北快三的软件| www.ui69.com-玩时时彩私彩违法吗| www.199875.com-快三二同号单选技巧| www.804223.com-新2彩票app官网| www.9859.in-玺彩画-| www.408546.com-体彩大乐透春节放假| www.512291.com-唯美古风手绘彩铅画| www.579648.com-花逸彩-| www.647414.com-分分彩太假了| www.777232.com-大公七星彩开奖结果| www.866310.com-牛蛙彩票天下| www.927835.com-掌信彩app-| www.980012.com-2018彩票app| www.ff18.com-查询彩票开奖软件| www.vq18.com-快三是哪里的彩票| www.06tx.com-儿童彩铅画视频教程| www.71rl.com-恒彩娱-| www.1091.net-今日福彩字谜定位三| www.9607.top-北京赛车是国彩吗| www.46909.com-中国福利彩票预测网| www.88317.cc-春天彩票登录网址| www.037740.com-七乐彩30码过滤| www.135303.com-快三在线预测| www.204895.com-多乐彩开奖号码查询| www.271282.com-南粤风采好彩3| www.370808.com-新彩水料-| www.455395.com-华彩生活app华夏| www.536422.com-时时彩大小开奖结果| www.635561.com-彩宝价值排位| www.713140.com-41彩票网官网| www.781898.com-福利彩票今日开奖| www.851473.com-彩票预测推荐app| www.909183.com-三d彩吧第三版| www.967410.com-彩票预测微信群| 大赢家彩票网www.178775.com| www.fg15.com-彩票娱乐送28元| www.ux43.com-湖北快三怎么玩法| www.00ub.com-三等奖彩票-| www.62kp.com-天恒彩票app| www.925.space-临沂体育彩票总部| www.4492.cn-竞彩足球新浪| www.9205.com-今日福彩中奖号| www.79538.com-彩9安卓下载安装| www.025432.cc-北京北控国彩合法吗| www.089553.com-众彩网火烈鸟大乐透| www.144104.com-app福利彩-| www.255562.com-k彩app下载-| www.318845.com-江西彩票中心厅| www.379071.com-新宝彩票娱乐| www.512499.com-唯美凤凰彩铅画图片| www.574819.com-体彩大乐斗周几开| www.636132.com-彩虹六号墨冰| www.723277.com-东彩娱乐贴吧| www.789396.com-篮球体彩竞彩app| www.843648.com-彩乐乐专业彩票工具| www.890804.com-青岛福彩中心电话| www.945098.com-彩票54-| www.985247.com-福利彩挂机软件| www.pq32.com-福彩精彩十分推荐| www.q11.net-测彩高手的彩票专栏| www.34xx.com-腾讯分分彩正规平台| www.3332.pw-中彩股份宁夏快三| www.8273.com-北京福利快三跨度| www.23009.com-彩神争霸8app| www.58786.cc-福彩3b预测和值| www.029589.com-新利彩票能控制吗| www.093220.com-福彩开奖公告号码| www.144728.com-天际彩票网址| www.245660.com-易彩堂app主页| www.306120.com-76858彩票平台| www.365156.cc-体彩排列3中奖号码|