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.684755.com-新浪网彩票开奖结果| www.39859.cc-佰万彩票破解| www.805712.com-一分钟时时彩计划| www.911149.com-彩票排列五开奖号码| www.977975.com-快三能赢钱-| www.fv5.cc-时时彩刷9码| www.ps85.com-3说彩吧-| www.19cd.com-泰安彩民中奖| www.5837.xyz-买彩票怎么看中奖| www.12981.cc-浙江杭州体育彩票| www.4387.xyz-福彩单一跨度走势图| www.11175.cc-快开彩票时间调整| www.84gv.com-彩票站app苹果版| www.081813.com-有老师带的福利彩票| www.266052.com-彩票改革即将启动| www.54td.com-足彩竞猜下载| www.01085.com-yy彩票官方网站| www.61907.com-四川体彩app| www.038823.com-七星彩开奖什么奖| www.354644.com-怎样查看彩票| www.486629.com-竞猜足彩23期推荐| www.562155.com-快三单双怎么玩稳定| www.654002.com-除了彩票以外的投资| www.737246.com-谁知道众彩彩票网站| www.829387.com-玩彩的聊天工具| www.932622.com-玩大发快三软件| www.994853.com-随机彩票号码生成器| www.an58.com-3d福彩藏机图| www.56qm.com-彩票5等奖多少钱| www.4233.top-今曰说法失控的黑彩| www.036670.com-怎么看彩票开奖结果| www.1278.pw-5分彩历史开奖号码| www.40893.com-澳门快5彩骗局| www.654997.com-局王七星彩下载安装| www.791740.com-最稳定的时时彩平台| www.160887.com-北京彩票站怎么加盟| www.fv37.com-西安福彩宝马案| www.075271.com-彩77手机版下载| www.989409.com-快赢彩票多少人玩| www.lq63.com-红彩会彩票可信吗| www.27jo.com-重庆福彩中心主任| www.2335.top-好彩二公式-| www.28892.com-一出好戏的彩票号| www.14sl.com-安徽体彩开奖时间| www.1082.wang-彩票源码百度云盘| www.04894.cc-今日福彩3藏机图| www.335184.com-双彩开奖公告| www.58ik.com-彩神通网址-| www.wx68.com-一分快三走势预测| www.308021.com-大发快三辅助工具| www.668494.com-马来西亚博彩安全吗| www.760332.com-西蔵快三开奖| www.877907.com-重生中彩票北京买房| www.945881.com-体彩顶呱刮大7出奖| 鸿运彩票www.hy5455.com| www.72933.cc-中彩网天津杀号| www.041616.com-中国体彩查询| www.812666.cc-新彩吧彩票网站| www.cp73.com-快三彩票技巧| www.79zw.cc-福彩字谜图迷牛彩网| www.749044.com-体彩浙江-| www.836099.com-彩宝典安卓下载| www.900631.com-淘彩票tcp网址| www.972008.com-3地福彩字谜总汇| www.cp237.com-彩票软件大全| www.033.cc-唐龙快递彩图| www.13vh.com-2019清明节彩票| www.74615.com-七乐彩奖励有多少| www.6976.cn-时时彩后二规律技巧| www.740530.com-澳门彩票macau| www.963258.com-550彩票-| www.cp7968.com-快3福彩网app| www.021983.com-购物送彩票在哪里领| www.815836.com-福彩3d倍投的秘密| www.905342.com-足彩推单是骗局| www.968426.com-吉利时时彩开彩结果| 99彩票www.533081.com| www.5370.cm-如何网上开彩票店| www.18954.com-有多少人玩私彩| www.437969.com-无彩限的怪灵世界| www.035656.com-最经典的彩票宣传语| www.652891.com-高频彩包括什么彩| www.729112.com-在哪买彩票最安全| www.821771.com-巨彩赌博-| www.887623.com-体育彩票网上投注站| www.954772.com-今晚上体彩开什么码| 购彩网www.79gcw.com| www.09wi.com-博胜彩票网址| www.1082.cm-分分时时彩害死人| www.946282.com-福建体彩app| 500彩票网www.65707y.com| www.39ym.com-菲律宾彩票包网服务| www.671295.com-彩独2破解版| www.737074.com-快捷彩票官方网站| www.799756.com-彩票中奖号码发给我| www.882845.com-棒棒彩票怎么样| www.5356.biz-牛彩彩票合法吗| www.337358.com-广西福利彩票网| www.562163.com-快彩开奖结果查询| www.335108.com-长春市体彩电话| www.449840.com-彩票77会被黑吗| www.bc33.com-多乐彩票网站| www.8735.biz-金牌彩票下载| 天天彩票www.127880.com| www.610034.com-淘宝怎么销售彩票| www.713732.com-3d彩票图纸-| www.811774.com-快乐双彩复式玩法| www.937219.com-为内蒙古喝彩蒙语歌| 500彩票www.66653v.com| www.cq5.cc-三分快三是哪里的| www.16gw.com-江西快三直播开奖| www.46ov.com-印象彩票网登录| www.221245.com-时时彩手机app| www.286942.com-安徽快三奖金怎么算| www.53995.cc-网上彩票排名| www.44932.com-彩票的具体套利方法| www.013415.com-湖北快三助手下载| www.d81.top-中彩计划软件手机版| www.7136.cn-欢乐炸金花彩票| www.300695.com-118彩票官网| www.397634.com-福彩刮刮乐编码秘籍| www.083756.com-彩票和赌博的区别| www.328873.com-江苏快三如何抓豹子| www.412277.com-福彩复制票怎么打| www.506153.com-彩票平台有人控制吗| www.567821.com-中国有哪几种彩票| www.626105.com-鑫彩网是合法的吗| www.684626.com-福彩3d中奖组选| www.751451.com-50o彩票网-| www.807995.com-福利彩票安装下载| www.867925.com-各种釉彩大瓶图片| www.916771.com-信阳合买彩票中奖| www.965123.com-彩票江苏快三是撒| 凤凰彩票www.3479i.com| www.638461.com-色彩静物临摹图片| www.60199.com-中彩票人八字| www.299937.com-彩票彩宝贝走势图| www.413084.com-卖福彩提成-| www.542425.com-福彩网是什么东西| www.630161.com-昨天东盛彩报1| www.727271.com-广西手机福彩| www.828718.com-彩票站打错票能退吗| www.920512.com-鑫彩网公司官方网页| www.993831.cc-足彩有几种购买方式| www.hu40.com-河北彩票快三| www.252461.com-体彩中奖规则及奖金| www.425406.com-福彩江苏快三合法吗| www.622543.com-福彩双色球购买方式| www.410482.com-福彩开奖怎么看| www.70ej.com-彩票输了十万| www.4133.biz-彩虹6号墨冰| www.500879.com-一寸免冠彩色证件照| www.206563.com-体彩屋购彩大厅| www.332932.com-中福彩票网址下载| www.517788.com-今天福利彩票结果| www.7146.shop-续写七彩音符| www.1702.vip-天际彩票下载安装| www.52783.com-七彩虹显卡-| www.114923.com-97彩票网软件| www.94929.com-澳客竞彩网电脑版| www.121940.com-体彩投注方法| www.254932.com-网络彩票有哪些平台| www.411826.com-猫和老鼠简笔画彩色| www.637107.com-彩虹六号辅助|