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.991579.com-百宝彩电视走势图| www.338552.com-中山福利彩票加盟| www.417400.com-台湾彩虹台在线直播| www.630771.com-今日竟彩足球推荐| www.869702.com-唯彩会开奖大厅| 博友彩www.938751.com| www.074720.com-彩富网最快-| www.206788.com-黑彩彩票平台| www.878673.com-7星彩几点开奖| www.645011.com-给几个彩票开奖网站| www.8932.xyz-中国福利彩票智能机| www.825593.com-933彩票cc-| www.936151.com-福彩时时彩开奖号| www.uc50.com-彩神软件在哪儿下载| www.399979.com-福彩周三-| www.075701.com-五福彩票微信群| www.911.hk-念什么咒语能中彩票| www.324883.com-海南4十1彩票平台| www.006502.com-快彩怎么玩容易中奖| www.314533.com-体彩足球竞彩比分| www.211867.com-卖私彩定罪量刑| www.977503.com-江苏快三总共几期| www.09by.com-彩民高手交流| www.75gx.com-竞彩足球伤停信息| www.661572.com-竞彩单场开奖时间| www.243653.com-苹果6s买彩票| www.895801.com-英国快三开奖查询| www.nb61.com-贵州快三基本| www.1309.pw-黄金彩票官网安卓| www.874132.com-彩票推算神器| 尊彩www.083025.com| www.03hk.com-彩票冷热遗漏怎么看| www.690295.com-苏州体彩网开奖结果| www.566896.com-流亭福利彩票位置| www.702266.com-南宁彩票站转让| www.820525.com-天津彩票app下载| www.925257.com-体彩杀号定胆2元| 中彩www.zc35.com| www.1935.vip-河南彩票app| www.934438.com-快三如何刷流水| www.77597.cc-彩票谜语什么意思| www.702.cn-民政部福彩中心改革| www.7563.biz-22彩票网址是多少| www.bm60.com-彩神大发快3骗法| www.601722.com-男子身无分文买彩票| www.161295.com-老谢说彩头条号| www.751212.com-彩票巴士计划师| www.508832.com-爱玩彩-| www.140614.com-58彩票安卓版链接| www.260345.com-彩票平台算是赌博吗| www.357975.com-老时彩票-| www.mq62.com-8k彩票如何稳赚| www.2220.vip-重庆时时彩遗漏新浪| www.6368.biz-彩票挂机方案是什么| www.31997.cc-500彩网app-| www.740035.com-福利彩票几位| www.94mo.com-同志彩票骗局大揭秘| www.061996.com-彩客站主页-| www.32xd.com-分分彩做号技巧| www.387.space-下载安徽体彩| www.596132.com-福彩报纸的首页| www.569592.com-七乐彩连线走势图| www.747460.com-时彩软件-| www.919905.com-彩票网站开发设计| www.519092.com-体彩19015期| www.726116.com-云鼎彩票-| www.874255.com-彩票源码博客| www.086380.com-溢彩造型-| www.511077.com-彩虹张惠妹mv| www.371708.com-中国足彩馆露露女主| www.657224.com-龙鱼七彩-| www.688805.com-鸿鼎彩票平台| www.850323.com-快三选号号-| www.964117.com-几点前可以买彩票| www.dg26.com-福利彩票看那几位数| www.371790.com-五百彩票是什么意思| www.27281.cc-彩宝网首页电脑版| www.91277.cc-四色好彩爆珠| www.33751.cc-乐成网彩票可靠吗| www.718853.com-体育彩票世界杯玩法| www.73055.com-快三二同号| www.285935.com-亚洲彩票打不开了| www.440825.com-手机好彩客2017| www.578309.com-澳门彩票平台有哪些| www.718798.com-福彩快三推荐代码| www.829181.com-彩票害了那么多人| www.958276.com-66彩票的网址| www.rr0.com-上海快三走势图和| www.462086.com-99彩票推荐码| www.92226.cc-3地福彩图谜总汇| www.813065.com-彩票站能用电信网吗| www.935017.com-彩票走势机顶盒| www.981548.com-高频彩票揭秘| www.cp5058.com-上海快三开奖一定牛| www.44709.com-福彩高层如何做假| www.172209.com-江西快三彩票| www.34xl.com-七星彩论坛特区彩| www.396.me-必发彩票平台登录| www.3104.cm-体育彩票体彩开奖| www.8316.in-500万福利彩票网| www.41868.com-中华彩吧的网站| www.86363.cc-七星彩走势分析图| www.yp87.com-天津时时彩玩法说明| www.62ou.com-招聘彩票店员工| www.043773.com-高频彩二十年经验| www.266809.com-彩票赌大小能玩吗| www.039773.com-恒大彩票官方网站| www.107698.com-梦到和人平分彩票| www.174882.com-快三网上代理平台| www.252787.com-三d彩票图-| www.371720.com-大发快三计算技巧| www.219409.com-中国福利彩票6+1| www.681295.com-双色球彩民选号| www.260704.com-亚洲彩票能挣钱吗| www.xr40.com-新人怎么买彩票| www.33fq.com-春节彩票销售时间| www.0000.red-福彩是要几位数| www.533606.com-七星彩随机-| www.501826.com-k彩登陆浅路测速| www.105390.com-美税无嘴骆驼和好彩| www.205142.com-网彩合法吗-| www.301295.com-精彩十分推荐| www.137159.com-添点七彩鲜花| www.ee94.com-百姓彩票可靠吗| www.t77.cn-彩票推广拉人| www.048443.com-彩吧p3图谜第三版| www.62358.com-彩种极速快三违法| www.386912.com-乐乐彩足球推介| www.71070.com-怀诚体彩店微博| www.070271.com-彩678赚钱吗| www.513575.com-幸运五星彩那里开奖| www.609126.com-几点对彩票大乐透| www.891310.com-福利彩票宣传标语| www.789461.com-中国竞彩网手机下载| www.857738.com-做博彩推广犯法吗| www.1412.net-福利彩票双色球网址| www.bk7.cc-湖北快三一定牛遗漏| www.828651.com-英国彩票大奖姓名| www.907215.com-快三助赢计划| www.966532.com-有玩01彩票的吗| 凤凰彩票www.5091t.com| www.85692.com-蓝彩瑛-| www.3263.top-安装e77乐彩登陆| www.9869.top-彩票任务-| www.083808.com-彩票指南电子报| www.857696.com-做梦梦见买彩票| www.943996.com-佰萬彩票是真的假的| 天天彩票www.2373n.com| www.hr67.cc-体彩开奖在哪个频道| www.217896.com-彩福平台-| www.767533.com-都彩神怎么玩| www.920282.com-彩票计划86在线网| 彩82www.c2809.com| www.73pn.com-福建掌中彩信息技术| www.2788.mobi-福彩平台有哪些| www.9570.vip-哪种彩票适合新手| www.42165.com-手机买彩票全球彩票| www.017238.com-盛大彩票网站是什么| www.095173.com-爱彩乐网投可靠吗| www.317655.com-彩票稳赚不赔| www.388055.com-华彩的近义词| www.471504.com-彩名堂下载计划软件| www.532631.com-澳门天星彩-| www.586526.com-竞彩去哪里买得到|