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.181535.com-快三黑平台-| www.230335.com-鼎盛彩运8-| www.290042.com-福利彩票奖金分配| www.967851.com-竞彩足球新浪网| www.329138.com-免费送试玩彩金| www.435083.com-三和彩-| www.882431.com-易彩票是什么东西| www.977705.com-足彩让球胜平负规则| www.gr8.com-内蒙快三中奖金额| www.605955.com-今天开奖什么彩票| www.736787.com-中囩彩吧更懂彩民| www.830366.com-哪个软件能查彩票| www.905756.com-冠赢彩票app下载| www.998780.com-平顶山市彩票点| www.di25.com-306官方彩票| www.95763.com-足彩瓜瓜的微博| www.177968.com-北京福彩网-| www.262733.com-长沙彩票-| www.819170.com-福彩中奖新闻今天的| www.894883.com-彩票投注时间大乐透| www.962204.com-彩友网彩票官网| www.cai712.com-快三计划导师骗局| www.337201.com-福利彩票怎么玩法| www.426282.com-彩票三d乐彩论坛| www.522055.com-甘肃庆阳体彩中心| www.97598.cc-时时彩两星直远技巧| www.108178.com-中国足彩馆踩踏视频| www.189311.com-内蒙古快三牛| www.2888.vip-鄂彩羊毛衫-| www.263386.com-福彩基诺型-| www.940722.com-彩票推广话术搞笑| www.gf13.com-怀表每天快三秒| www.096358.com-开体彩与福彩哪个好| www.853560.com-天津新宇彩劵| www.933633.com-江苏彩票网-| www.kr72.com-彩神彩票-| www.98ju.com-中国彩票引发的案件| www.545485.com-彩票计算软件哪个好| www.425630.com-彩票倍率高的台子| www.877325.com-马耳他共和国彩票| www.297308.com-彩票王软件下载手机| www.610267.com-支付宝可以买彩票嘛| www.893071.com-本育彩票开奖结果| www.984766.com-彩运网客服-| www.ca23.cc-天天彩票软件| www.p17.in-买体育彩票的常识| www.6789.net-77彩票手机版77| www.40639.com-体彩竞足彩-| www.003746.com-福利彩票几点关机| www.118988.com-快三234下期预测| www.028010.com-彩票套利怎么做| www.396696.com-美国彩票中奖玩法| www.561890.com-彩神viii下载| www.679106.com-彩票返点怎么调| www.772616.com-618彩票下载| www.860486.com-m8彩票软件-| www.954284.com-时时彩助手旧版本| 凤凰彩票www.452823.com| www.380248.com-中国体育彩开结果| www.250205.com-306手机彩票| www.eg29.com-广西快三赔率介绍| www.285892.com-信誉好的足球彩票| www.456880.com-恒大彩票官网首页| www.550642.com-沈丘彩票最近中奖| www.433200.cc-官方彩九-| www.539267.com-彩票餐馆-| www.625018.com-福彩过年什么时候开| www.731234.com-金誉彩票网vip3| www.795563.com-天天彩票安卓版下载| www.862727.com-上海天天彩选4| www.949714.com-160彩票网站| www.996069.com-彩678不能提现| www.rp85.com-快三猜一个号| www.972467.com-优彩网下载安装| www.nq09.com-人人快三登录不了| www.886.cm-彩票数字组合公式| www.5441.com-彩35的网址-| www.271561.com-广东彩票官网| www.139974.cc-彩16苹果版-| www.557210.com-牛彩网诗谜-| www.871757.com-安微快三软件下载| www.90591.com-有没有彩票店二维码| www.100025.com-足彩金手指彩票网| www.42016.com-中彩吧五分彩可信吗| www.029087.com-彩票代打投注兼职| www.537596.com-不属于无彩色系| www.318982.com-快三和时时彩哪个好| www.00er.com-形容彩虹的优美句子| www.590963.com-东北女方结婚彩礼钱| www.189856.com-江苏快三开奖一定牛| www.59813.com-儿童彩虹画图片| www.32156.cc-玩彩长期赢钱技巧| www.18984.com-快三跨度投注| www.77257.cc-彩票难中的原因| www.051935.com-那个彩票合买平台好| www.xl99.com-河北快三遗漏走势图| www.197.cm-和善美彩铅画| www.095293.com-网上可以买足彩吗| www.wc77.com-上海快三登录| www.518812.com-女子中彩票51亿| www.976747.com-中国彩礼最高的省| www.cp9928.com-湖北快三今天走势| www.a17.top-环彩app下载| www.53159.cc-彩96下载苹果版| www.785378.com-江西快三助手下载| www.889510.com-七乐彩票合法吗| www.953092.com-足球计算器一竞彩网| 中国福利彩票www.34788c.com| www.12or.com-今天福彩3d奖号| www.ms33.com-彩票种类介绍大全| www.518258.com-中彩票大奖几率| www.436.win-大发快三的计算公式| www.787226.com-新浪篮彩比分| www.909750.com-帝彩塑胶地板| www.980536.com-1068彩票网-| www.cp8638.com-幸福快三是合法的吗| www.712660.com-99彩登录网站| www.990052.com-中彩网用户注册| www.7488.vip-8彩票直通车官网| www.884455.com-体彩快三怎么玩稳赚| www.958404.com-分分快三算号器| 名门彩www.33997g.com| www.115413.com-七乐彩中3-| www.195987.com-江西福利彩票中心| www.249214.com-中彩网3d彩报| www.927377.com-山东体彩订票系统| 彩客吧www.44ckb.com| www.iw33.com-竞彩网直播比分直播| www.770465.com-篮球胜负竞彩玩法| www.851143.com-时时彩几分钟一开| www.909268.com-宝马彩票下载安装| www.970716.com-买彩票幽默句子| www.cp9728.com-青海快三走势走势图| www.206.la-彩票直通车客户端| www.456371.com-爱心彩app邀请码| www.566189.com-亿彩平台娱乐| www.736922.com-人人赢彩券官网| www.823840.com-七星彩内部会员卡| www.919882.com-做一个彩票软件| www.500186.com-彩票导航平安| www.599226.com-欢乐彩软件下载| www.2978.wang-彩豆子彩票官网登录| www.29hm.com-五个号的彩票是什么| www.266646.com-吉林省快三推荐图| www.774355.com-充值返利彩票平台| www.918060.com-900彩票官网| 幸运彩票www.774311.com| www.404296.com-彩礼和聘礼的区别| www.526536.com-王者荣耀彩票| www.57268.com-福彩手机可以投注吗| www.771119.com-时时彩网站设置| www.869723.com-快乐彩票用户登录| www.977113.com-彩礼返还比例| www.aq15.com-贵州福彩网下载| www.b09.org-彩票开奖查询今天| www.zs9.cc-体彩排三遗漏统计| www.95073.com-彩妆店加盟排行| www.992041.com-体彩双色球玩法| www.te72.com-苹果手机购彩软件| www.076844.cc-分分中彩票网页版| www.143378.com-梅花易数测彩票| www.801932.com-彩云字体-| www.875481.com-安徽快三计划群| www.958714.com-双色球彩票多久开奖|