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天

知道了
北京快乐8 www.830639.com-顶级彩票登录不了| www.358007.com-足彩店提成-| 1号彩票www.yi636.com| www.1us.cc-杏彩测速-| www.531569.com-买彩票中奖的经历| www.70ob.com-买足球彩票能发财吗| www.460758.com-红球杀号彩经网| www.561528.com-天际彩票是真的吗| www.653428.com-福彩三地精准开机号| www.726581.com-361官网彩票| www.196384.com-湖北百宝彩票网| www.192797.com-彩票贴吧论坛| www.018468.com-1赔50彩票平台| www.534224.com-买彩票不中表情图片| www.687813.com-福利彩票2356期| www.21ek.com-网上买彩票成了网赌| www.2206.vip-d8彩票平台官网| www.593052.com-七彩阳光分解| www.174084.com-网上玩快三违法么| www.302403.com-奔腾彩票app| www.c55.shop-甘肃快三对子分析| www.54oy.com-南昌福利彩票兑奖| www.553305.com-中国竞彩网欧赔| www.648819.com-网易彩票是-| www.060003.com-南国体彩特区论坛| www.3454.vip-有什么送彩金的网站| www.807257.com-旧彩票有回收的吗| www.588633.com-七星彩今晚开什么将| www.274722.com-大发时时彩开奖查询| www.397528.com-用户登录福彩易购| www.619986.com-福彩快三多少种可能| www.739625.com-爱彩乐是哪个公司| www.870652.com-易旺彩票注册邀请码| www.988319.com-3d购彩小贴士| www.nm11.com-竞彩买量分布| www.60um.com-91彩票官网首页| www.242473.com-广西快三中奖号码| www.396244.com-网上的时时彩靠谱吗| www.547140.com-彩票跟单赚佣金| www.626110.com-r8彩票app-| www.705404.com-云发购彩票是真的吗| www.789359.com-彩妆店铺名字| www.870234.com-三分钟时彩下载| www.951874.com-彩神8是合法网站吗| 福彩www.16878o.com| www.qa30.com-快三表格图图片| www.519206.com-家彩开机-| www.650725.com-中班户外彩虹伞| www.775229.com-七星彩中奖彩票| www.889765.com-体彩三天计划独胆王| 全民汇彩票www.52303r.com| www.210935.com-福彩三d双彩论坛| www.191690.com-甘肃福彩快三01| www.275322.com-彩票166官网| www.44961.com-希望彩票是骗局吧| www.854733.com-新彩论坛首页| www.930291.com-吉林快三最新遗漏| www.984650.com-彩八彩票是骗局| www.si7.cc-体彩店不卖竞彩| www.ol19.com-青海省快三走势图| www.3684.biz-乐优彩票app下载| www.9959.pw-体彩利润多少个点| www.030160.com-福利彩票3d机选| www.117079.com-竞彩计算-| www.2846.pw-好彩泰国多少钱| www.14632.com-清明节体彩放假吗| www.0mf.com-天天竞彩官方| www.747.in-时时彩对子怎么买| www.86hp.com-天天彩票是谁开发的| www.42ts.com-约彩365胜负彩| www.1028.red-怎样购买大乐透彩票| www.9621.cc-彩宝宝高手免费资料| www.49324.com-ttc福利彩票| www.051008.com-快三能挣钱吗| www.47ig.com-鸿博体彩-| www.633322.com-足彩258球迷| www.962154.com-五分彩可以用公式来| www.qh53.com-好彩香烟怎么订购| www.50id.com-彩票开盘管理| www.2080.vip-乐彩33软件下载| www.375013.com-搜索七星彩结果| www.806176.com-福彩3d字谜手机版| www.cr51.com-彩客网app下载| www.388797.com-800彩票安卓| www.504520.com-演出前彩排还是彩台| www.re51.com-上海快三3两同号| www.5su.cc-美国彩票交税详解| www.143622.com-3的彩开奖-| www.676453.com-天天乐购彩票怎么样| www.801611.com-河内五分彩开奖官网| www.up18.cc-快三摇奖号码内蒙古| www.1038.org-玩五分彩有什么技巧| www.458198.com-今日福彩三的字谜| www.605960.com-旺彩全国开奖公告| www.731401.com-苹果手机购彩app| www.297211.com-信誉时时彩平台出租| www.522291.com-彩票网名字大全搞笑| www.657109.com-彩票坊论坛-| www.ve11.com-彩票软件过滤分析| www.9208.me-七星彩啥时候开奖| www.1784.vip-国内最牛彩票投注站| www.160012.com-彩票争霸8下载| www.336975.com-更好的体彩官网| www.497108.com-赢彩专家下载| www.737755.com-福彩3d摇奖机设置| www.931979.com-网络福利彩票合法吗| www.n77.top-河南福彩网幸运之门| www.948970.com-国彩官网-| www.cp3359.com-福彩快三中奖经验| www.99dc.com-3d彩吧图库∞| www.7623.com-彩票图标-| www.55045.com-世界杯买足彩心得| www.026570.com-国外足球博彩app| www.059267.com-三d彩票老头预测| www.255048.com-非法彩票举报电话| www.355871.com-体彩足球竞彩上税| www.489271.com-彩票网上代理怎么做| www.602161.com-开心8彩票登录| www.698043.com-杭州福彩中心地址| www.804808.com-时时彩开奖软件安卓| www.027361.com-纯彩色的图片| www.362895.com-彩票假期-| www.56355.cc-玖富彩票网址| www.539916.com-彩票杀号技巧与方法| www.462233.com-买2元黑彩-| www.982806.com-天际彩票邀请码有吗| www.nm43.com-唯彩网-| www.30np.com-极速分分彩官方开奖| www.1340.cm-七乐彩复式投注金额| www.14562.com-七星彩历史最大奖金| www.689898.com-91彩站联盟-| www.065186.com-彩票33平台多久了| www.fd1.com-五星彩开奖号码结果| www.84nn.com-竞彩篮球胜分差周六| www.05mt.com-彩29登录-| www.226063.com-跟导师买彩票赚钱| www.144895.com-查体彩5d中奖号码| www.982913.com-广西快三开奖详情| www.772345.com-新浪彩票客户端下载| www.940098.com-彩名堂计划4.0| www.oj14.com-众彩网双色球| www.117944.com-南粤福彩近30期| www.010446.com-体育彩票开奖查询体| www.517013.cc-色彩培训-| www.666345.com-307彩票心水资料| 亿万彩票www.345583.com| www.yz02.cc-01彩票是不是骗局| www.988346.com-广东体彩中心官网| www.hc72.cc-彩票风控是真是假| www.661831.com-诸暨竞彩大奖| www.720201.com-海南七星彩三字现| www.412788.com-篮球竞彩怎么买| www.258922.com-唯彩网-| www.01085.com-yy彩票官方网站| www.96268.com-5360彩票平台| www.122587.com-福利彩票公益金| www.230353.com-彩八app-| www.389929.com-d8彩票客户端| www.631935.com-七星彩预测计划网址| www.650716.com-小班彩虹伞说课演练| www.055802.com-体彩站点查询合肥| www.638625.com-中国彩票谁监管| www.6057.vip-彩票过滤分析| www.460996.com-彩票现场开奖直播|