jQuery带小图标响应式图片滚动特效代码下载


jQuery带小图标响应式图片滚动特效代码下载
jQuery带小图标响应式图片滚动特效代码下载以及小图标、响应式图片滚动等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="js/main.js"></script>

3. HTML代码

<header class="cd-header">
	<nav class="cd-primary-nav">
		<ul>
			<li><a href="#0">网站首页</a></li>
			<li><a href="#0">关于我们</a></li>
			<li><a href="#0">联系我们</a></li>
		</ul>
	</nav> <!-- .cd-primary-nav -->
</header>
<section class="cd-hero">
	<ul class="cd-hero-slider">
		<li class="selected">
			<div class="cd-half-width">
				<h2>Slide title here</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In consequatur cumque natus!</p>
				<a href="https://www.51qianduan.com/">51前端</a>
				<a href="https://www.51qianduan.com/">51前端</a>
			</div> <!-- .cd-half-width -->
			<div class="cd-half-width cd-img-container">
				<img src="assets/tech-1.jpg" alt="tech 1">
			</div> <!-- .cd-half-width.cd-img-container -->
		</li>
		<li>
			<div class="cd-half-width cd-img-container">
				<img src="assets/tech-2.jpg" alt="tech 2">
			</div> <!-- .cd-half-width.cd-img-container -->
			<div class="cd-half-width">
				<h2>Slide title here</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In consequatur cumque natus!</p>
				<a href="https://www.51qianduan.com/">51前端</a>
				<a href="https://www.51qianduan.com/">51前端</a>
			</div> <!-- .cd-half-width -->
		</li>
		<li class="cd-bg-video">
			<div class="cd-full-width">
				<h2>Slide title here</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, explicabo.</p>
				<a href="https://www.51qianduan.com/">51前端</a>
			</div> <!-- .cd-full-width -->
			<div class="cd-bg-video-wrapper" data-video="assets/video/video">
				<!-- video element will be loaded using jQuery -->
			</div> <!-- .cd-bg-video-wrapper -->
		</li>
		<li>
			<div class="cd-full-width">
				<h2>Slide title here</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, explicabo.</p>
				<a href="https://www.51qianduan.com/">51前端</a>
				<a href="https://www.51qianduan.com/">51前端</a>
			</div> <!-- .cd-full-width -->
		</li>
	</ul> <!-- .cd-hero-slider -->
	<div class="cd-slider-nav">
		<nav>
			<span class="cd-marker item-1"></span>
			<ul>
				<li class="selected"><a href="#0">Intro</a></li>
				<li><a href="#0">Tech 1</a></li>
				<li><a href="#0">Tech 2</a></li>
				<li><a href="#0">Video</a></li>
			</ul>
		</nav> 
	</div> <!-- .cd-slider-nav -->
</section> <!-- .cd-hero -->

相关推荐

发表评论

相关文章