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.2232.date-大和彩网站-| www.pn25.com-彩乐乐双色球预测| www.6668.bid-彩调全集-| www.67446.com-专业彩票团队| www.169508.com-幸运快三就是个坑| www.365944.cc-彩票29-| www.639347.com-够力七星彩直播| www.34vc.com-七星彩中间错了一个| www.6200.wang-cp彩票苹果版下载| 天下彩www.495770.com| www.707779.com-注册领彩金彩票站| www.884136.com-彩票案子-| www.am26.cc-河北快三时间| www.23cl.com-家彩网福彩开奖| www.5274.top-万优彩票app| www.66321.cc-千禧彩票官网手机版| www.1799.tv-这些高频彩真坑人| www.8176.cc-重庆时时彩2期必中| www.58066.com-乐8彩彩票-| www.029328.com-陇彩宝是官方的吗| www.148418.com-聊彩大厅下载安装| www.269092.com-长城彩票大发| www.93js.com-送彩票的文案| www.6723.biz-5分彩全天288期| www.27496.com-网上彩票破解| www.022740.com-365约彩提现| www.989.cc-电玩城游戏机彩票机| www.062889.com-中国体彩加盟费用| www.176330.com-幸运快三人工计划| www.257215.com-分分中彩-| www.355795.com-豪彩vip计划| www.447711.com-大彩怎么抽-| www.305234.com-体彩第19030期| www.429440.com-打地鼠彩虹伞目标| www.549737.com-足彩害死多少人| www.668596.com-非凡彩票网走势图| www.774813.com-体彩777刮刮乐| www.871507.com-新快三时间开奖| www.371972.com-福彩3近十期开机号| www.660168.com-福彩游戏跟单| www.586334.com-彩票机器做手脚| www.22gh.com-海口七星彩开心论坛| www.3598.xyz-万彩吧下载链接| www.34878.com-购彩v下载-| www.672198.com-苏会文彩票-| www.821692.com-仙家算彩票-| www.099307.com-足彩北单只能在北京| www.177054.com-新快三个位走势图| www.851517.com-体彩怎么买中奖率高| www.bp46.com-彩票软件官方下载| www.099952.com-南方彩票彩网首页| www.735678.com-3d彩报图库天牛| www.878446.com-国彩彩票app下载| www.995866.cc-苹果足彩app| www.xm93.cc-快彩在线怎么打不开| www.25ty.com-塞子彩票-| www.5052.biz-属羊人买彩票的数字| www.166749.com-一分快三破解器免费| www.563900.com-下载购彩助手| www.003214.com-想开一个彩票站| www.051855.com-福彩三的开机号今天| www.137056.com-彩788网站-| 万彩网www.wcp777888.com| www.57906.com-黑彩平台评测网| www.uo85.com-天天彩票论坛社区| www.126406.com-彩拾彩票受骗| www.229309.com-网赌快三追杀模式| www.318594.com-今天福彩三地试机号| www.382821.com-九彩僵神秦无风| www.639947.com-咬金体育足彩| www.841406.com-彩票不公平-| www.909726.com-彩神网是什么| www.973478.com-唯美彩虹壁纸| www.ya42.com-韩国快三走势| www.105125.com-网易足彩推荐app| www.858507.com-快三夸度走势图| www.387234.com-北京实时采彩走势图| www.06669.com-体彩新彩预测| www.010517.com-时彩怎么骗人| www.257319.com-微彩下载安装到手机| www.415668.com-红树林彩票客户端| www.669248.com-体彩排列3图谜总汇| www.70666.cc-口袋彩票店铺| www.005490.com-内蒙快三和值跨度表| www.950929.com-足彩竞彩预测分析网| 凤凰彩票www.77801w.com| www.806782.com-大型彩票网站| www.899464.com-彩神通代理会员| www.971703.com-彩票开奖号今天| 9号彩票www.608799.com| www.fp86.com-快三必中技巧443| www.vs15.com-红旗彩票一分快三| www.06dh.com-海口市福彩管理中心| www.70dl.com-彩票忏悔视频| www.210554.com-极速快三下载软件| www.728269.com-线上彩票共赢联盟| www.828468.com-重庆老试试彩走势图| www.878725.com-江西体育彩票中心| www.967847.com-有没有彩票的qq群| www.yz.com-彩票大小规律| www.805362.com-中国足彩网彩票官网| www.900877.com-辽宁3d水果图彩吧| www.968554.com-一分彩单双的技巧| 乐点彩票www.662358.com| www.600944.com-彩票可以只买1注| www.52271.com-经营黑彩如何定罪| www.122841.com-体彩公益金分配| www.537093.com-五洲彩票如何登录| www.613046.com-双色球彩票直通车| www.692630.com-6678彩票app| www.772876.com-如意彩票客户端| 奔驰彩票www.781566.com| www.kr88.com-新浪足彩分析| www.422757.com-双色球积分换彩票| www.598308.com-体彩直选票开奖| www.664294.com-福彩七乐彩30选7| www.765707.com-最诚信的私彩平台| www.830823.com-cp彩票苹果版| www.891567.com-彩票如何网上推销| 天下彩www.527990.com| www.zm28.com-内蒙古快三开奖时间| www.9911.loan-今晚的体育彩票| www.133587.com-500彩票投注网| www.72hn.com-足彩软件贴吧| www.432559.com-七星彩兑奖器| www.802.club-彩票六壬-| www.ag15.cc-彩票api接口| www.23171.com-彩神app争霸| www.323046.com-百度彩票网-| www.5782.cc-深圳市福彩兑奖地址| www.17522.cc-1305彩票网-| www.590159.com-3d彩报蓝精灵| www.367677.cc-姜山足彩博客| www.91277.cc-四色好彩爆珠| www.811589.com-福彩3d最笨的规律| www.891698.com-彩票走势大全安卓| www.088205.com-88彩票开奖-| www.999373.com-好彩自然来类似的| www.i28.top-快三一直倍投亏惨了| www.777954.com-正版978彩票| www.620258.com-釉中彩和釉下彩区别| www.888068.com-11选5爱彩乐广东| www.45511.cc-微彩网是正规定的| www.588655.com-开开心心七星彩网| www.w53.cc-谁有江苏快三群| www.107587.com-体育彩票销量排行| www.15773.cc-零基础学彩铅入门| www.95781.com-公益福彩大爱| www.759992.com-下载时时彩计划软件| www.871623.com-超级彩票助手安卓版| www.935292.com-彩票软件苹果版| www.992135.com-竞彩篮球不能竞猜| www.cp9311.com-河北快三一定牛推荐| www.8053.org-动物水彩画简单可爱| www.505280.com-彩票票面@后的数字| www.564805.com-东北彩票论坛| www.612623.com-马来彩开奖记录| www.324789.com-彩票字谜大全| www.414813.com-七彩蓝田非法集资| www.76lz.com-七彩乐几点停售| www.577101.com-彩虹糖小孩能通吃吗| www.685932.com-福利彩票投注软件| www.769399.com-江苏快三快乐彩| www.839595.com-程序员彩票骗局|