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.csw288.com| www.d48.net-3d型彩票中奖战术| www.51va.com-彩虹色创意玩法| www.0753.love-福利官方购彩软件| www.09497.com-105彩票输的太多| www.61010.cc-福彩1分快3-| www.035960.com-彩票人生句子| www.121728.com-宁夏福彩中心招聘| www.207985.com-查一下七星彩开奖| www.292407.com-时时彩倍投方式| www.376708.com-重号七星彩票| www.543232.cc-福彩双色球买号| www.640115.com-新浪爱彩无法提现| www.743624.com-快三购彩平台是骗局| www.828638.com-香港6118彩票| www.908535.com-注册彩票站-| www.978845.com-南粤风采好彩一预测| www.tn93.com-彩票挂-| www.11iv.cc-河内五分彩遗漏统计| www.89hv.com-3d彩图1-| www.3000.cx-吉林市快三遗漏数据| www.9151.cc-洛神体彩店下載| www.71218.com-全国体彩-| www.039371.com-牛牛彩票app下载| www.132836.com-世界杯在哪买彩票| www.218381.com-吉林快三在哪里购买| www.298937.com-连中彩票手机版| www.378709.com-体育彩票加盟流程| www.539429.com-梦见中彩票被他人追| www.631610.com-海南七星彩卖奖软件| www.712886.com-刘醒彩虹六号| www.794508.com-竟彩足球高手心得| www.874813.com-7k彩票71677| www.981457.com-快三中奖号码| www.kq1.cc-超级快三走势图| www.ra67.com-时时彩就是坑| www.12eo.com-柬埔寨5分钟彩| www.87oe.com-手机淘宝哪里买彩票| www.2933.in-怎么做网络彩票代理| www.8924.com-彩乐乐网公告| www.67223.com-三河市福彩中心地址| www.038918.com-为啥彩票合法| www.131065.com-河南周口太康县彩礼| www.212067.com-优信彩票大发快一| www.290158.com-彩神vi邀请码| www.399715.com-南囯体彩-| www.526359.com-美国彩票收入| www.617066.com-中奖的彩票图片| www.693339.com-乐福彩票平台| www.774147.com-7乐彩复式中奖规则| www.890081.com-彩票平台试玩| www.963457.com-竞彩足球澳客手机版| 500万彩票www.599581.com| www.lk19.com-中彩在线算赌博吗| www.l60.cn-彩81彩票资料| www.45tw.com-盛大国际彩票输死| www.882.live-时时彩回血上岸方案| www.5301.cc-体育彩票时时彩规则| www.11904.com-体彩p3图谜手机网| www.58712.cc-彩票3d彩报-| www.087034.com-鸿博彩票正规吗| www.155102.com-足彩怎么兑奖| www.257112.com-爱彩乐11选5北京| www.331171.com-新浪彩票走势图预测| www.414011.com-脸上挂彩是什么意思| www.520333.com-合乐彩票是真是假| www.589441.com-足球36o胜负彩| www.663752.com-竞彩篮球新浪爱彩| www.739661.com-竞速bb彩-| www.810737.com-时时彩挂机软件| www.885500.com-金利彩票可靠吗| www.es9.cc-快三复式万能五码| www.pb71.com-新浪数字彩票频道| www.01mj.com-天天彩4选走势| www.72ah.com-彩票游戏怎么玩法| www.1510.vip-棒棒彩票下载app| www.9513.top-新浪福彩今日运势| www.51740.com-牛彩纽约测速登陆| www.96450.com-体育彩票特性| www.061144.com-好彩客骗局-| www.167988.com-福利彩票快3| www.255582.com-彩富网彩富高手网| www.330991.com-彩六万的大发快三| www.398284.com-七星彩视频直播现场| www.595334.com-彩票投资公司| www.667783.com-彩票官员污去多少亿| www.741178.com-福彩共有多少种| www.812076.com-乐彩论坛大乐透预测| www.883621.com-四川快乐12爱彩乐| www.984075.com-福彩3d老猫出彩| www.dg29.com-福利彩票时时彩下载| www.us55.com-一分快三走势| www.05ng.com-国产水溶彩铅哪种好| www.73yf.com-3d大彩报彩图| www.1196.vip-彩票平衡因子算法| www.9698.cn-鞍山体彩转让信息| www.51487.com-彩虹糖的颜色和口味| www.97233.cc-河北体彩手机在线| www.059292.com-时时彩开奖号码记录| www.161102.com-彩票天天乐是否正规| www.247181.com-搜索贵州快三| www.318483.com-福彩排列3玩法介绍| www.390092.com-多少注彩票一个亿| www.535420.com-体彩开奖怎么看中奖| www.619926.com-万人龙虎彩票机| www.688096.com-金利彩票手机版| www.763881.com-掌信彩下载安装| www.871025.com-1分钟彩票投注技巧| www.952408.com-时彩亏了-| 彩票坊www.022ah.cc| www.ci65.com-陕西体彩快乐十分| www.ss92.com-小鹿彩票软件| www.17cd.cc-缅甸彩票怎么买| www.94gy.com-体彩是多大数| www.2397.win-高频彩人工计划网站| www.7626.loan-今日大乐透彩民乐| www.21816.cc-送彩金88-| www.026239.com-体彩大乐透玩法胆拖| www.105652.com-时时彩开奖ios| www.167592.com-江苏快三害死多少人| www.324474.com-体彩排列五论坛| www.389026.com-彩票快三心得体会| www.521626.com-环球彩票手机版下载| www.585129.com-体彩店一张彩票利润| www.655480.com-网易彩票合不合法| www.758844.com-福利彩票微信代理| www.837811.com-917cc彩票-| www.900259.com-爱彩乐专家荐号| www.962304.com-百度体育彩票| 聚彩网www.290282.com| www.hh92.cc-湖北快三助手软件| www.xk14.com-甘肃快三推号| www.11de.com-8839彩票-| www.72bn.com-香港6合宝典彩图| www.0594.xyz-福利彩票快3在哪玩| www.9701.vip-彩票刮刮乐促销方案| www.45778.com-大中华彩票可靠吗| www.85594.com-体彩竞彩联盟| www.029089.com-彩票争霸苹果版| www.095877.com-福彩助手是骗人| www.153257.com-大乐彩大开奖结果| www.274673.com-体育彩票机选| www.353201.com-京彩投注-| www.419670.com-武汉体彩设备转让| www.511554.com-彩库宝典看开奖结果| www.595824.com-f彩是正规平台吗| www.694338.com-3d体彩吧-| www.759399.com-彩票平台源码哪个好| www.921353.com-彩神l网址-| www.970212.com-体彩排三乐彩网| www.cr34.com-v98彩票app-| www.qr94.com-小崔谈彩票-| www.1qv.cc-买彩票倾家当产的人| www.45ue.com-上海市彩票站转让| www.99xb.com-猪八戒彩票网站| www.2148.net-乐彩计划导师| www.6565.date-天天爱彩票暂停销售| www.12232.cc-有赌时时彩发家致富| www.45021.com-87彩票实体店| www.78937.cc-福彩3d经验-| www.019402.com-七星关彩票店| www.075379.com-中彩网骗人吗| www.126704.com-大众彩票是真的吗| www.181531.com-河北快三综合走势图|