jQuery发展历程时间轴特效代码下载


jQuery发展历程时间轴特效代码下载
jQuery发展历程时间轴特效代码下载以及发展历程、时间轴等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="css/index.css">

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/index.js"></script>

3. HTML代码

<div class="container">
	<div class="button prev iconfont icon-zuojiantou"></div>
	<div class="button next iconfont icon-zuojiantou"></div>
	<div class="slide_wrap">
		<ul class="slide_items clearfix">
			<li class="on">
				<a href="jacascript:;">
					<span>2019年</span>
					<div class="circle">
						<i></i>
					</div>
				</a>
			</li>
			<li>
				<a href="jacascript:;">
					<span>2018年</span>
					<div class="circle">
						<i></i>
					</div>
				</a>
			</li>
			<li>
				<a href="jacascript:;">
					<span>2017年</span>
					<div class="circle">
						<i></i>
					</div>
				</a>
			</li>
			<li>
				<a href="jacascript:;">
					<span>2016年</span>
					<div class="circle">
						<i></i>
					</div>
				</a>
			</li>
			<li>
				<a href="jacascript:;">
					<span>2015年</span>
					<div class="circle">
						<i></i>
					</div>
				</a>
			</li>
			<li>
				<a href="jacascript:;">
					<span>2014年</span>
					<div class="circle">
						<i></i>
					</div>
				</a>
			</li>
			<li>
				<a href="jacascript:;">
					<span>2013年</span>
					<div class="circle">
						<i></i>
					</div>
				</a>
			</li>
			<li>
				<a href="jacascript:;">
					<span>2012年</span>
					<div class="circle">
						<i></i>
					</div>
				</a>
			</li>
		</ul>
	</div>
	<!-- 对应的内容 -->
	<div class="slide-content">
		<ul class="on">
			<li>
				<a href="#">
					<img src="./images/t1.jpg" alt="">
					<!-- 内容可自定义 -->
				</a>
			</li>
		</ul>
		<ul>
			<li><a href="#"><img src="./images/t2.jpg" alt=""></a></li>
		</ul>
		<ul>
			<li><a href="#"><img src="./images/t3.jpg" alt=""></a></li>
		</ul>
		<ul>
			<li><a href="#"><img src="./images/t4.jpg" alt=""></a></li>
		</ul>
		<ul>
			<li><a href="#"><img src="./images/t5.jpg" alt=""></a></li>
		</ul>
		<ul>
			<li><a href="#"><img src="./images/t6.jpg" alt=""></a></li>
		</ul>
		<ul>
			<li><a href="#"><img src="./images/t7.jpg" alt=""></a></li>
		</ul>
		<ul>
			<li><a href="#"><img src="./images/t8.jpg" alt=""></a></li>
		</ul>
	</div>
</div>

相关推荐

发表评论

相关文章