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.872086.com-甘肃福彩快三跨度| www.dr28.com-私彩app源码| www.b54.org-江西快三每天多少期| www.43jt.com-下载网易彩票软件| www.0172.top-七彩色版-| www.9385.vip-河北彩礼多少钱| www.57173.com-铁公鸡七星彩下载| www.025702.com-内蒙古彩票中心地址| www.111459.com-彩票团队计划大全| www.190970.com-河北快三号码走势图| www.277851.com-福利彩票奖金| www.413889.com-足彩复式最大| www.529807.com-中国福利彩票直播间| www.637446.com-彩虹91无人机| www.737389.com-永盛彩票网靠不靠谱| www.823188.com-天下体彩主页| www.906202.com-彩票105-| www.969719.com-台湾今彩-| www.le24.com-中彩官网app| www.v07.com-山西福彩怎么兑奖| www.60ms.com-赌彩争霸-| www.1001.in-足彩军长微博| www.9641.shop-重庆时时彩有几种| www.56559.cc-体彩昵称-| www.008592.com-体彩七位19029| www.088352.com-3d福彩十拿九稳| www.171108.com-彩票十选五怎么玩法| www.307712.com-下载派彩网-| www.386216.com-有谁中过彩票的人| www.530358.com-所有时时彩开奖号码| www.630356.com-七星彩智能画规| www.710888.com-中国人福彩-| www.792811.com-支付宝积分兑彩票| www.874130.com-重庆肘时彩实时开奖| www.981852.com-彩之星博彩怎么样| www.nj4.cc-福彩三d走势表| www.rm16.com-重庆时时彩为啥停了| www.16hx.com-优乐彩7697下载| www.196.cm-星优时时彩平台登录| www.4274.biz-彩票外挂作弊软件| www.01482.com-和彩云收费多少| www.70852.com-乐彩网未出号| www.036839.com-全民彩票官方网| www.128660.com-江苏快三号码统计器| www.208851.com-彩票跟长龙-| www.286116.com-安徽快三专家推荐| www.397051.com-v8彩票苹果-| www.523530.com-时时彩预计-| www.616545.com-7彩网下载-| www.691277.com-河南福彩跑马| www.773052.com-正规的极速彩票网站| www.943108.com-福利彩票领奖规则| www.999224.com-竞彩足球预测| www.th2.com-江西快三推荐| www.rs21.com-魔方彩票可靠吗| www.14gx.com-中国体彩在线培训| www.99yv.com-宇宙彩票下载安装| www.3608.tv-竞彩能网上买了吗| www.9410.top-体育彩票中奖怎么看| www.64950.com-彩钢贴吧-| www.025941.com-3号彩票平台| www.101861.com-好乐多彩票app| www.172244.com-江西多乐彩走势图| www.283196.com-彩票攻略-| www.368677.com-彩铅画动物毛发教程| www.466788.com-七乐彩晚上卖到几点| www.557774.com-重庆十字彩数字规则| www.633166.com-竞彩篮球彩票规则| www.709188.com-竞彩比分直播彩客网| www.789105.com-竞彩外围网-| www.869982.com-彩票有k线吗| 彩票大家乐www.21202z.com| www.fc97.com-彩票害人-| www.xj22.cc-三分时时彩技巧集锦| www.20ep.com-彩票兑奖识别| www.0239.net-大家赢彩票网app| www.6886.me-杨震足彩博客| www.20814.com-有没有人玩过彩神| www.65811.com-武汉市福利彩票发行| www.044325.com-v湖北快三走势图| www.130709.com-福利彩票摇一摇机选| www.206974.com-今天的内蒙快三| www.277338.com-王牌彩票是正规的吗| www.383025.com-福彩16号-| www.503913.com-山东体育彩票115| www.576429.com-七彩彩票网址| www.647688.com-智胜彩票手机版| www.754323.com-福彩3d北斗预测号| www.839914.com-浙江省体彩中心主任| www.907066.com-福利彩有大发快三吗| www.969427.com-158计划网时时彩| www.bs02.com-华彩彩票骗局| www.td47.com-中国彩种有哪些| www.15xe.com-结婚彩礼全国排行榜| www.98ej.com-彩票能转职吗| www.3446.xyz-时时彩杀胆-| www.8910.cn-竞彩比分封顶金额| www.59433.com-彩铅手绘星空| www.040091.com-彩乐乐福彩预测| www.144736.com-淘宝快三基本走势图| www.254051.com-快三3个6豹子规律| www.329501.com-速盈彩票是骗局揭秘| www.456686.com-彩易网3d-| www.549788.com-去体彩店怎么买彩票| www.664810.com-分分彩后三稳赚技巧| www.747898.com-彩易科思合作的彩票| www.817950.com-足彩19024对阵| www.893083.com-时时彩五星缩水在线| www.x50.top-蚂蚁彩票下载安装| www.94ej.com-8彩票链接-| www.4675.cm-合买彩票1元| www.05248.cc-福彩3d图表大全| www.87758.cc-七星彩能提现吗| www.067683.com-网上彩票哪个靠谱| www.192922.com-彩6app官网网| www.266807.com-幸运快三时时走势图| www.390116.com-福彩金牛送胆| www.530797.com-时时彩五星二码技巧| www.688385.com-短信投注彩票| www.772369.com-多种彩票网站大平台| www.902367.com-成都快三彩票| www.958390.com-永信218彩票| 购彩在线www.66332d.com| www.dx06.com-90彩票-| www.wf01.com-甘肃福彩兑奖中心| www.20yb.com-每天买两块钱彩票| www.2201.me-彩票010网-| www.7987.me-本港博彩堂免费资料| www.26931.cc-中彩票的概率是多少| www.72749.com-彩八仙做号软件安卓| www.251433.com-彩票2元网下载安装| www.443610.com-安卓彩票摇奖模拟器| www.553299.com-竞彩中奖故事| www.638937.com-快三国家有吗| www.800775.com-天天彩图先锋快报| www.870484.com-安卓版彩16-| www.967252.com-3口福彩-| 亿彩堂www.87668r.com| www.ru05.com-中彩网湖北快三开奖| www.22lo.com-天津时时采彩人工| www.0186.cn-彩云国小说-| www.8435.pw-湖北彩钢围挡定做| www.56428.com-盈彩网盈宝彩票| www.023834.com-r8国际彩票网站| www.095100.com-外围足彩app排名| www.161789.com-美国纽约快三开奖| www.262848.com-湖南福彩中心新地址| www.356043.com-体彩怎么打票| www.441600.cc-体育彩票销售点距离| www.553110.com-网赌分分彩经历| www.662503.com-彩娱乐代理-| www.757822.com-菲律宾优游彩票平台| www.856995.com-大发快三害人不浅| www.917905.com-专业彩吧助手| www.989149.com-直击黑彩福彩| www.bs65.com-大发快三免费作弊器| www.sv33.com-彩票公式-| www.15eq.com-时时彩有中过大奖吗| www.438.bid-网上赌彩票判多少年| www.4034.com-海南博彩牌照怎么批| www.72960.com-优彩网彩票优惠券| www.066008.com-彩虹代刷网装修代码| www.130829.com-上官燕最新七星彩| www.199997.com-今日中原风彩开奖|