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.vm62.com-全国彩票开奖查| www.658441.com-聚宝盆彩票网| www.1802.me-桌易彩票一亿不认账| www.9507.com-易经与彩票-| www.86956.cc-福利彩票14-| www.746262.com-8亿彩票官方网址| www.081991.com-快三破解器软件下载| www.54rk.com-中大奖彩票下载安装| www.2206.cm-京彩精選合集| www.323682.com-福彩双色球玩法介绍| www.449835.com-爱乐透彩票买不了| www.585694.com-人人福彩下载| www.en7.com-快三输了能赢回来吗| www.409993.com-乐彩网体彩开奖号码| www.rq57.com-网上买彩票可靠网站| www.3686.vip-彩色复印机出租| www.630952.com-大玩家彩票天猫兑换| www.779968.com-瑞祥彩云有没有技巧| www.946830.com-彩钢围挡压瓦机| www.ov0.cc-十一选五彩票专业版| www.v10.pw-今晚南洋彩开什么| www.365.link-爱彩彩票官网首页| www.14918.com-时时彩赚钱唯一方法| www.977633.com-宝马彩票手机版下载| www.bq48.com-彩71下载网址| www.k05.top-彩票注册送38元| www.76jf.com-42500彩票-| www.15249.cc-中国体育彩票订票| www.021274.com-金藏彩群专栏| www.146484.com-256时时彩下载| www.313342.com-快三跨度有什么技巧| www.528847.com-体彩店面设计图| www.747977.com-红彩直播软件| www.387044.com-名彩手机膜怎么样| www.920313.com-福彩网站是啥| 汇丰彩票www.977hf.com| www.ox1.com-彩票中心有人蹲点| www.352261.com-彩票22是什么平台| www.466011.com-体彩六码组六遗漏| www.579808.com-乐都彩票网址是多少| www.688336.com-3d彩票高手微信| www.775248.com-彩世界app官网彩| www.540333.cc-球队买彩票-| www.758776.com-微彩被骗怎么追回| www.028863.com-中国彩吧彩报图库| www.191284.com-分分快三计划网站| www.721573.com-01彩票破解版| www.230251.com-彩16苹果下载地址| www.622970.com-印象彩票官方网| www.890897.com-快三单式查询| www.773823.com-七星彩开奖现场| www.814011.com-彩票调整对实体店| www.mo76.com-足球彩票指南| www.331799.com-广西快三高手软件| www.503561.com-pvc彩钢围挡| www.593006.com-彩虹e直播源| www.686058.com-彩色水磨石图片| www.771734.com-三时时彩人工计划| www.6004.net-福利3g彩票今天买| www.58332.cc-双色球彩民乐下载| www.604.bid-tt彩票网下载安装| www.7355.org-彩虹6号多大| www.55401.com-各彩种开奖网| www.050093.com-手机微信怎么买彩票| www.217160.com-快三省份-| www.23392.com-江西体彩购彩客户端| www.649301.com-彩博网址-| www.761953.com-大发时时彩后二计划| www.7358.cn-彩客网竟彩专家分析| www.60006.com-大发快三模拟器软件| www.133277.com-会理拆除彩钢棚文件| www.249733.com-体育彩票排列五| www.349032.com-中国足彩直播吧| www.521495.com-来彩网app-| www.668499.com-马来西亚博彩违法吗| www.365241.com-快三什么时候加奖| www.590307.com-福彩三d字谜| www.713078.com-彩之源平台-| www.814199.com-中园福利彩票双色球| www.977307.com-全民彩票合法吗| www.gj68.com-公益福彩1分快三| www.r37.org-高频彩票真的害死人| www.625996.com-信彩彩票投注平台| www.282911.com-准提咒彩票-| www.568146.com-彩票网站不能提现| www.cp8385.com-彩票出号绝密公式| www.70qt.com-开户送彩金的娱乐城| www.582271.com-e77乐彩首页| 彩71www.939884.com| www.18pz.com-当天所有彩票开奖| www.88683.com-别人梦见自己中彩票| www.129418.com-体彩大乐透选号规则| www.252848.com-一分快三大中华彩票| www.381294.com-泰安市体彩-| www.568034.com-杳江苏快三开奖号码| www.659042.com-体彩是否有假货| www.751905.com-彩票10-| www.864806.com-手机平板彩膜项目| www.14os.com-体彩兑奖需要哪些| www.94xd.com-河南的彩礼很高吗| www.413362.com-水立方彩票ios| www.561837.com-博彩送彩金特邀微信| www.645563.com-陶瓷新彩技法| www.731648.com-快三和值与跨度| www.817997.com-九号彩票骗局揭秘| www.909599.com-国家福彩五分快三| 500彩票www.50788c.com| www.641088.com-一生荣耀彩票| www.821908.com-体彩北京十一选五| www.o23.cn-网络彩票输了| www.911992.com-彩票开奖是不是直播| www.195700.com-上海快三一玛渍漏| www.435577.com-体彩和福彩是一家吗| www.585601.com-财通彩票-| www.663584.com-新浪彩票趣闻| www.753762.com-搜狗彩票是不是假的| www.971042.com-彩票选号能随机选吗| www.xt81.com-彩虹六号国服凉了| www.44ux.com-天荣国际区块链彩票| www.30qg.com-分分彩靠什么开奖| www.622.pw-重庆老时时彩预测| www.7741.org-体彩大乐透大奖得主| www.31215.cc-彩尊彩票-| www.89734.com-福彩七乐彩如何中奖| www.409.tv-境外彩票app| www.150339.com-中国体彩中心| www.354434.com-天天中彩票人工客服| www.440005.com-709彩票网站吗| www.531660.com-新生彩票平台登录| www.0456.me-多金彩84384| www.96931.cc-新浪爱彩开奖结果| www.246495.com-哪个彩票一分钟开| www.318621.com-澳门彩票有限公司| www.382862.com-福利彩票有什么彩种| www.15id.com-线上彩票平台出租| www.74sg.com-福彩大厅开奖结果| www.8438.top-玲丽彩妆培训学校| www.928456.com-中国福利彩票幸运彩| www.234422.com-合法彩票-| www.341155.com-拉萨体育彩票领奖| www.75.biz-雨后彩虹的句子图片| www.254615.com-好彩网有风险吗| www.33486.com-彩神帝彩票-| www.89640.com-广州彩钢板-| www.062365.com-159彩票正规吗| www.180206.com-易彩大小单双怎么看| www.257198.com-江西11选5爱彩乐| www.177762.com-分分快三技巧和值| www.737111.cc-爱赢彩中彩-| www.wd84.com-体彩排3试机号今天| www.86vu.com-彩票套利犯法吗| www.9828.cc-安徽快三怎么算和值| www.78822.com-彩票双色球走势预测| www.p09.cc-彩票顺口溜怎么说| www.075806.com-彩票降价-| www.183603.com-彩票怎么买-| www.307669.com-大乐透派彩每日推荐| www.507712.com-全球彩票官方app| www.670014.com-彩中网-| www.0660.cc-香港快乐5分彩计划| www.71355.cc-全国彩票开奖结果l| www.48748.com-87彩票客户端下载| www.715581.com-彩票走势分析软件| www.137221.com-七彩格子是真是假|