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.380082.com-注册送888彩金| www.256513.com-汇彩网快3-| www.362192.com-描写彩虹谷的作文| www.195275.com-重庆时彩官网开奖| www.41di.com-体彩大乐透春节休市| www.77260.com-好彩客以前版本| www.401562.com-金祥褔彩-| www.ga75.com-浙江快乐彩一定牛| www.173663.com-江苏快三开奖走势| www.16297.cc-哪种彩票最容易中奖| www.44022.cc-快三违法吗怎么处罚| www.458012.com-千禧福彩试机号| www.673701.com-古建彩绘草龙图案| www.65432.com-预测彩票软件出售| www.292953.com-河南体彩中心官网| www.59136.com-开彩票站的最佳地址| www.988047.com-仲彩网站-| www.610539.com-彩票软件网站好不好| www.704404.com-彩票快乐十分怎么玩| www.791179.com-京东可以买彩票| www.876303.com-重庆时彩时彩| www.716789.com-福彩即开型彩票| www.195610.com-安徽快三今日预测| www.413840.com-出彩的文章-| www.37297.com-香港新星彩手机网址| www.0002.cc-彩票一般是几位数字| www.9200.me-博百万彩票网| www.32dq.com-简笔画彩虹-| www.0ov.com-7乐彩尾数走势图| www.52512.cc-好彩0567官方| www.019636.com-福彩注册邀请码| www.350682.com-福利彩票10选5| www.72153.cc-彩票中奖不能兑奖| www.060069.com-全国天天彩选三| www.947415.com-合法的网上彩票网站| 500万彩票www.5441f.com| www.449225.com-体育彩票中途卖| www.564.in-腾讯分分彩龙虎口诀| www.pw58.com-三分彩开奖网址| www.48433.com-福彩快三最大奖| www.620049.com-彩票计划手机版官网| www.4924.cc-排列五彩票票花| www.79948.com-网络彩票输了几百万| www.37888.com-体彩顶呱刮app| www.114148.com-贵州中奖彩票| www.213121.com-买黑彩的app平台| www.304218.com-甘11彩控-| www.765681.com-靠谱的彩票老平台| www.138339.com-河南快三单注奖金| www.130278.com-易彩合法吗-| www.213625.com-彩神ⅱapp-| www.108739.com-彩票大厅购彩快三| www.mi30.com-吉林快三预测今天| www.598082.com-足彩比赛结果及奖金| www.805.club-七乐彩杀15码| www.qb16.com-新彩网3d手机版| www.11418.cc-十四场足彩比分| www.077091.com-彩色复印机印钱| www.172535.com-怎么看快三走势| www.34357.com-上海福彩售票网点| www.p90.cn-东方彩票提现提不了| www.2654.cc-彩票2020app| www.143.biz-彩玉手镯-| www.2420.cm-彩29苹果下载| www.761710.com-海南七星彩网站源码| www.ru64.com-彩票中大奖-| www.980802.com-附近福利彩票站多远| www.ao41.com-彩票中奖查询双色球| www.ru05.com-中彩网湖北快三开奖| www.1nn.com-9万彩票可信吗| www.59wf.com-七星彩遗漏查询| www.3607.vip-南方双彩最新下载| www.0530.loan-江苏快三骰子分析| www.6157.cc-广州赛马彩票| www.08737.com-今天3d彩民乐图库| www.104056.com-好彩爆珠4味道| www.823645.com-山东彩钢卷板| www.921144.com-彩神vi能挣钱吗| 818合彩www.www.9889hc.com| www.lr19.com-三d彩票预测| www.ox38.com-银川彩票在哪领奖| www.90kh.com-怎么破解博彩app| www.750473.com-福彩曝光-| www.1972.org-巨龙彩票手机版| www.34499.com-彩票彩信手机报| www.738940.com-2019彩票交流群| www.38ie.com-王刚讲故事彩票大王| www.553035.com-今日篮球竞彩推荐| www.az28.com-彩票往期开奖查询| www.122115.com-希腊时时彩软件| www.879243.com-彩票几位数算中奖| www.po17.com-湖北快三遗漏号统计| www.p81.com-微信登录彩票软件| www.96yh.com-手机购买实体店彩票| www.950856.com-掉了中彩网了d| www.dd01.com-人人中彩票app| www.18ax.com-彩票开奖昨天晚上| www.916.com-七星彩连中4个号码| www.7279.pw-画彩虹又简单又漂亮| www.870684.com-彩票印象客服| www.qt05.com-福彩刮刮乐-| www.227816.com-快彩王官方网站| www.3386.cm-竞彩和足彩的区别| www.72605.com-彩谜天地联销图下载| www.893361.com-快开彩官网-| www.954196.com-皇都彩票下载安装| www.999932.cc-大乐透彩民村| www.cj55.com-合肥市福利彩票中心| www.rb13.cc-玩脑者财神分分彩| www.12mm.cc-正规买彩票软件| www.1507.live-11彩票app-| www.554267.com-体彩广告语-| www.569232.com-什么彩票注册送钱| www.628939.com-怎么下载赢彩吧| www.683135.com-彩经网缩水过滤工具| www.760122.com-七乐彩一等奖多少钱| www.816466.com-快三豹通什么意思| www.874670.com-福利彩票中奖经历| www.931551.com-彩客彩票破解方法| www.974820.com-四川体彩网金7乐| 99彩票www.587989.com| www.977124.com-彩礼案例-| www.dz83.com-多玩娱乐快三| www.o86.org-彩票规则介绍双色球| www.827237.com-易彩砍龙-| www.912749.com-彩客吧-| www.968754.com-彩世界时时彩软件| 彩天下www.196146.com| www.57.cm-开彩大家喜-| www.829365.com-一彩仓库-| www.947073.com-福彩高频彩助手| 500彩票www.701496.com| www.249468.com-彩票坐庄会赔钱吗| www.345168.cc-如何注册亿乐彩| www.nl14.com-竞彩足球唯彩看球| www.gl01.com-手机众彩网-| www.19fc.cc-网上彩票投注靠谱么| www.874.cn-彩铅画彼岸花简单| www.8340.loan-漫画邪恶3d彩涂| www.1695.net-天涯时时彩论坛| www.445967.com-推荐彩票预测软件| www.312537.com-快彩彩票-| www.447155.com-福彩3正版藏机图| www.539274.com-彩票业主心得与总结| www.4674.vip-今期彩票买什么好| www.02697.com-什么是彩妆化妆品| www.07142.com-怎样买福彩双色球| www.654212.com-假彩票问题-| 爱购彩票www.355284.com| www.450027.com-爱米彩彩种| www.570288.com-七彩虹主板华硕主板| www.663463.com-国乐彩彩票-| www.800299.com-万易彩票app| www.878575.cc-足彩全包盈利法| 千禧彩票www.528qx.com| www.489555.com-657彩票网官方| www.675848.com-福彩双色球开奖玩法| www.758831.com-彩票平台合买找代理| www.824883.com-彩吧图总汇-| www.6no.cc-体彩竞猜官网| www.53328.com-时时彩万个龙虎预测| www.315006.com-福利彩票规则及玩法| www.044806.com-928彩票官方网站| www.137605.com-app彩票微信登陆|