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.6293.in-香港星彩网网址| www.079305.com-如何投资足球彩票| www.220467.com-新彩彩票平台正规吗| www.358614.com-竞彩猫推荐合买| www.497773.com-悟空彩票进不去| www.575802.com-彩票2020app| www.wk36.com-1分快三走势| www.77cs.com-新彩网三d字迷| www.53959.cc-柬埔寨彩票骗局| www.35317.com-彩神争霸500官方| www.783794.com-众彩网预测总汇| www.371888.cc-牛彩彩票网能赚钱吗| www.521150.com-澳门快三下载安装| www.346880.com-李彩谭在线-| www.99ah.com-澳门十佳博彩| www.8303.wang-上饶市福利彩票中心| www.37991.cc-棒棒彩票注册| www.97793.com-山西吕梁彩礼| www.836206.com-福彩双色球诗迷总汇| www.432559.com-七星彩兑奖器| www.587397.com-篮球竞彩推荐软件| www.689608.com-福彩字谜总汇全图| www.789397.com-篮球竞彩分析app| www.866615.com-收今天彩票开奖号码| www.932307.com-快三破解器软件下载| 大玩家彩票www.9478r.com| www.lk89.com-彩49官网-| www.u24.mobi-深圳市体育彩票网点| www.56wx.cc-张家口福彩兑奖处| www.386598.com-福星彩资料开奖结果| www.744848.com-开个彩票网站多少钱| www.827255.com-微信小站宝彩票| www.904722.com-500彩票资讯网| www.13qr.com-网易彩票网下载| www.0289.com-彩票是什么纸做的| www.9092.vip-七乐彩开奖对比器| www.66234.cc-江西快三综合| www.064446.com-私彩平台网址| www.205522.com-内蒙古呼市福彩中心| www.491279.com-009彩票网靠谱吗| www.638020.com-彩八仙官网-| www.582333.com-幸运快三助手下载| www.689875.com-最大彩票投注平台| www.821640.com-民政部彩票发行| www.948027.com-双色球杀号_彩经网| www.mn93.com-彩票送彩金-| www.7308.cc-体彩都是礼拜几开| www.72248.com-云南彩票弃奖| www.089812.com-彩票代理平台微信| www.25736.cc-竞彩容错怎么投注| www.070513.com-欧莱雅彩妆店| www.237057.com-5oo竞彩-| www.377225.com-歌芙彩-| www.246846.com-快三是哪里发行的| www.434058.com-彩票胆拖技巧| www.4411.online福彩3d选号技巧| www.61655.cc-福利彩票管理中心| www.078962.com-彩牛彩票是合法的| www.0932.wang-app彩库宝典| www.27000.com-彩票可以买数字0吗| www.008351.com-阅读更多精彩| www.69pz.cc-手机赌彩票是哪一种| www.61308.com-709彩票老版| www.187928.com-重庆时时彩突然停了| www.367169.com-彩铅画风景夜空| www.585300.com-欧洲时时彩开奖记录| www.733468.com-福建体育彩11选5| www.0516.top-公益彩是什么| www.017460.com-易旺大发快三| www.157601.com-足彩冷门买法| www.4428.cn-1分钟快三平台| www.81705.com-欧美中奖彩票图| www.086159.com-福彩终端机押金多少| www.101911.com-彩狮计划-| www.278900.com-丹麦快乐彩走势图| www.893973.com-九九集团app彩票| www.982430.com-三分时时彩计划网址| www.4187.me-7彩阳光大酒店| www.337725.com-福彩3d杀号六码| www.803750.com-江苏快三号码统计图| www.898737.com-一等奖彩票票样| www.104094.com-旺角彩票-| www.222056.com-北单足彩比分直播| www.341988.com-秒速快三计划| www.466859.com-新加坡金都快三查询| www.813644.com-盈多彩票-| www.915227.com-老时时彩下载| www.qh99.com-山东福彩23选5| www.25du.com-彩天下下载-| www.97qk.com-彩票3d试机号口诀| www.984878.com-神彩争霸官网| www.th1.com-彩票开奖双色球今天| www.tz63.com-网投彩票砍龙技巧| www.310439.com-彩票k线软件| www.521930.com-时时彩开盘如何定罪| www.649251.com-519bc慱彩堂| www.868121.com-南国彩票开奖结果| www.086073.com-分分彩怎么刷赚钱| www.49mk.com-体彩93多少钱| www.2841.vip-彩票福彩3d速查表| www.9001.me-足彩串场奖金计算器| www.77038.com-华东福彩l5选5| www.051735.com-下载大发快三时时彩| www.076229.com-易彩网抢红包活动| www.578288.com-体彩背景图-| www.674501.com-唯彩会彩票销量| www.796422.com-彩5-| www.868885.com-七星彩按顺序兑奖吗| www.938721.com-上海福利天天彩选4| www.994490.com-江西新快三和值表| www.it51.com-竞彩足球比分比| www.02zh.com-套彩是什么-| www.0125.cn-春秋彩票骗-| www.6454.cn-速8彩票真的假的| www.10884.com-竞彩网足球比分直播| www.47595.com-快三抓豹子有规律吗| www.1527.xyz-腾讯赛车彩票计划| www.9348.vip-武汉福彩中心地址| www.46226.com-彩票店中奖横幅| 福运www.fyyy1.com| www.10ps.com-时时彩票投注软件| www.98ob.com-555彩票登陆| www.75ha.com-看彩票结果-| www.3497.org-彩票2等奖-| www.30765.com-彩票中奖的人| www.017633.com-天马快三彩票平台| www.175411.com-广西风采快三走势图| www.395683.com-奇门遁甲测香港港彩| www.555751.com-七星彩开奖查询下| www.af11.com-手机彩票网123| www.xc95.com-彩经网新版大乐透| www.26gf.com-福利彩票号码图片| www.890.cc-老彩民买吗赢钱方法| www.6545.cm-9购彩票是不是骗局| www.15872.com-彩铅入门-| www.66660.com-福彩在哪兑奖| www.034250.com-彩票店有卖nba吗| www.122000.com-马云买大乐透彩票| www.161695.com-香港三色彩票| www.267381.com-500万彩票网分析| www.372580.com-53彩票网真假| www.509338.com-缤果彩票网-| www.616850.com-火箭彩票v-| 500彩票www.937986.com| www.kb12.com-快三开走势图| www.c32.com-揭秘时时彩-| www.35mq.com-彩票开奖查询27期| www.1686.hk-体育彩票千亿彩票| www.7970.org-和彩国际官网| www.25257.com-彩铅画要擦掉线稿吗| www.65387.com-青海省体彩中心在哪| www.036267.com-腾讯五分彩走势图| www.xb08.com-开心七星彩票论坛| www.772948.com-加微信号送彩金| www.2839.com-七星彩全国可领吗| www.8679.top-福彩3d预测彩票群| www.850014.com-3d福彩今天试机号| www.922812.com-人人红彩票-| www.977143.com-订婚还彩礼-| www.fn3.com-国家叫停重庆时时彩| www.rc70.com-西宁快三开奖| www.8488.org-6d彩票注册网址| www.41514.com-app好彩票-| www.89478.com-浦东彩票销售点|