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天

知道了
彩票256平台 www.822783.com-蚂蚁正规彩票网址| www.601396.com-彩票一般买什么彩票| www.304380.com-内蒙快三图-| www.388400.com-在博乐彩票网被骗了| www.218399.com-福利彩票幸运农场| www.329712.com-河北体育彩票转让| www.451256.com-黑龙时时彩-| www.2868.org-昨天的福彩-| www.303609.com-鑫彩网xcw588| www.381946.com-民政部福彩中心贪污| 吉利彩票www.80065o.com| www.852911.com-彩票巨人计划软件| www.362225.com-形容彩虹的句子| www.530516.com-时时彩前一选号技巧| www.19hj.com-私彩展示违法吗| www.73xw.com-牛彩网双色球图库| www.164159.com-腾讯纷纷彩计划软件| www.026929.com-手机购彩大发快3| www.18616.cc-澳超竞彩推荐| www.997256.com-哪个软件可以买足彩| www.mb59.com-足彩软件下载排行榜| www.rf70.com-168彩票安卓| www.71069.com-彩20彩票-| www.618128.com-福彩投注站管理办法| www.760603.com-时时彩不定位二码| www.920533.com-信博彩票平台多少| www.996464.com-龙江体彩七星彩| www.by68.com-快彩网app下载| www.971409.com-彩票分析基础答案| www.dy50.com-双赢彩票5567| www.043813.com-彩票扫码器-| www.421896.com-中国体彩双色球| www.715815.com-亚洲彩票怎么样| www.831698.com-足彩竞彩网站大全| www.911739.com-中乐时时彩官网注册| www.992827.com-昨晚7乐彩开奖号码| www.ii24.com-福彩3的d-| www.1zb.cc-手机贴膜彩膜| www.76nw.com-彩票几点封机| www.39757.cc-中福彩票登陆| www.123975.com-福彩排烈3-| www.51008.com-网购彩票平台| www.98qm.com-彩票弃奖2019| www.167786.com-福彩快3湖北| www.776456.com-福彩三d字迷总汇| www.898186.com-重庆时彩刷返点方法| www.966035.com-全民快三违法吗| 新世界www.616777a.com| www.645009.com-118彩票正规吗| www.597771.com-彩虹六号高手技巧| www.309520.com-附近福利彩票站| www.386649.com-韩国彩票快乐彩官网| www.05517.com-彩票灵异事件| www.ez9.cc-时时彩内蒙-| www.877182.com-七乐彩哪里领奖| www.jp56.com-科彩吧-| www.z66.org-神彩网址-| www.847521.com-规划彩票-| www.915780.com-体彩机要折旧费吗| www.971524.com-彩8彩票安卓版| www.cai9811.com福彩五d-| www.2899.pw-优彩彩票怎么样| www.9035.loan-乐彩论坛一百度| www.002326.com-新西兰快三玩法说明| www.125670.com-网络彩票赚钱吗| www.250225.com-云购彩-| www.63327.cc-足彩19039最新| www.go22.com-内蒙古彩票快3| www.413362.com-水立方彩票ios| www.519977.com-彩票五百万中奖概率| www.640051.com-22彩网-| www.744363.com-彩宝网老版本| www.817281.com-网易传统彩-| www.883425.com-安徽快三出豹子征兆| www.948614.com-彩票公益金提取比例| 500彩票www.50054y.com| www.660070.com-人工智能算彩票| www.mr18.com-七星彩中奖号查询| www.721016.com-新2彩票正规吗| www.7304.cc-福彩都包括啥| www.062954.com-福彩利润-| www.69vy.com-最新送彩金菠菜网站| www.787098.com-竞彩篮球比分新浪| www.973949.com-竞彩模拟交易量| www.tr75.com-贵州福彩三地推荐| www.71ot.com-福彩上班时间| www.3931.tv-足彩胜负平中奖| www.028743.com-高频彩真的能赚钱吗| www.113234.com-足彩计算工具| www.539103.com-旺彩平台注册吧| www.759433.com-大中华彩票开奖规律| www.69005.com-印尼三分彩开奖结果| www.34952.com-彩53彩票网注册| www.535380.com-中国福利彩票怎样看| www.0122.tv-春秋彩票是黑平台| www.948992.com-国彩彩票站平台怎样| www.129450.com-彩运来登录网址| www.894878.com-六开彩鬼谷子论坛| www.tr97.com-快三送彩金-| www.14428.com-福彩三d预测号码| www.715232.com-坚持三年买彩票| www.411501.com-福彩开奖时候| www.539170.com-腾讯分分彩大小口诀| www.136114.com-怎样申请彩票投注站| www.61799.com-特彩吧原彩票高手网| www.972072.com-乐彩网3d福彩| www.fh81.com-高德彩诈骗-| www.046907.com-黑龙江快三助手| www.105328.com-铁盒好彩1871| www.km61.com-排3凤彩网-| www.907103.com-彩票的数字是几位| 500彩票www.401286.com| www.w77.me-世界杯足彩310| www.887890.cc-七星彩开结果奖历史| www.5121.biz-高彩对比-| www.094343.com-快三哪些是官彩| www.320138.com-中彩乐群英会| www.312542.com-开心彩票可靠吗| www.505132.com-博瑞彩怎么玩| www.984854.com-长城彩票怎么提现啊| www.sl5.com-体彩论坛-| www.oo72.com-3d新彩吧预测| www.12990.com-快三今天开奖| 博亿彩票www.636by.com| www.069798.com-鑫彩登录平台登录| www.215002.com-全民快三彩票| www.326510.com-七星彩怎么兑奖规则| www.295831.com-上海彩票网开奖公告| 成功彩票www.le33.cc| www.312471.com-浙江福彩3d导航页| www.3081.org-江苏快三走时一定牛| www.17sl.com-竞彩足球世界杯版| www.433409.com-体彩大乐透开奖给果| www.339118.com-时彩族贴吧-| www.322550.com-足彩八串一什么意思| www.35993.cc-神彩挣霸-| www.818673.com-重庆福彩兑奖地址| www.qr33.com-大发时时彩开奖号码| www.237967.com-彩发发app苹果版| www.24476.com-彩票摇奖机-| www.44pz.com-红树林彩-| www.39ye.com-苏州彩铃制作| www.78137.com-买福利彩票靠谱吗| www.4669.biz-彩票一般买什么彩票| www.253045.com-时时彩走势图彩票网| www.085537.com-凤凰彩票导师群| www.218792.com-淘彩票快3-| www.517217.com-彩票511乐艺| www.125431.com-福彩公益行是真的吗| www.668389.com-国外彩票工作| www.752713.com-彩票挂机赚钱软件| www.734331.com-凤彩网体彩排三| www.7468.cn-厦门人做彩票的多吗| www.36ql.com-七星彩走势图带线| www.21gy.com-彩83时时彩-| www.62891.cc-竞彩混合投注合买| www.244546.com-福彩3d选号助手| www.237145.com-万博官方彩票| www.66og.com-头彩彩票是怎么回事| www.351626.com-彩票178走势| www.530641.cc-乐彩客网址导航| www.697066.com-体彩即乐彩开奖走势| www.784744.com-新加坡彩票开奖记录| www.851968.com-彩票中奖法术|