jQuery圆形图标菜单旋转轮播特效代码下载


jQuery圆形图标菜单旋转轮播特效代码下载
jQuery圆形图标菜单旋转轮播特效代码下载以及圆形图标、菜单旋转轮播等js/jquery网页特效代码下载。

1. 引入CSS

<link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/circle.css">
<link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/circle.css">

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/circle.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/circle.js"></script>

3. HTML代码

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
	<title>jQuery圆形轮播图插件circleCarousel</title>
	<!--sucai58.com 专注html3+css3素材的网站-->
</head>
<body style="background-color: #2D2D2D">
		<div class="holderCircle">
		<div class="dotCircle">
			<span class="itemDot active itemDot1" data-tab="1">
				<i class="fa fa-life-ring"></i>
				<span class="forActive"></span>
			</span>
			<span class="itemDot itemDot2" data-tab="2">
				<i class="fa fa-bomb"></i>
				<span class="forActive"></span>
			</span>
			<span class="itemDot itemDot3" data-tab="3">
				<i class="fa fa-heartbeat"></i>
				<span class="forActive"></span>
			</span>
			<span class="itemDot itemDot4" data-tab="4">
				<i class="fa fa-leaf"></i>
				<span class="forActive"></span>
			</span>
			<span class="itemDot itemDot5" data-tab="5">
				<i class="fa fa-magic"></i>
				<span class="forActive"></span>
			</span>
			<span class="itemDot itemDot6" data-tab="6">
				<i class="fa fa-pencil-square-o"></i>
				<span class="forActive"></span>
			</span>
			<span class="itemDot itemDot7" data-tab="7">
				<i class="fa fa-rss-square"></i>
				<span class="forActive"></span>
			</span>
			<span class="itemDot itemDot8" data-tab="8">
				<i class="fa fa-ship"></i>
				<span class="forActive"></span>
			</span>
			<span class="itemDot itemDot9" data-tab="9">
				<i class="fa fa-truck"></i>
				<span class="forActive"></span>
			</span>
			<span class="itemDot itemDot10" data-tab="10">
				<i class="fa fa-pied-piper"></i>
				<span class="forActive"></span>
			</span>
		</div>
		<div class="contentCircle">
			<div class="CirItem active CirItem1">
				TEXT SAMPLE FOR ITEM 1
			</div>
			<div class="CirItem CirItem2">
				TEXT SAMPLE FOR ITEM 2
			</div>
			<div class="CirItem CirItem3">
				TEXT SAMPLE FOR ITEM 3
			</div>
			<div class="CirItem CirItem4">
				TEXT SAMPLE FOR ITEM 4
			</div>
			<div class="CirItem CirItem5">
				TEXT SAMPLE FOR ITEM 5
			</div>
			<div class="CirItem CirItem6">
				TEXT SAMPLE FOR ITEM 6
			</div>
			<div class="CirItem CirItem7">
				TEXT SAMPLE FOR ITEM 7
			</div>
			<div class="CirItem CirItem8">
				TEXT SAMPLE FOR ITEM 8
			</div>
			<div class="CirItem CirItem9">
				TEXT SAMPLE FOR ITEM 9
			</div>
			<div class="CirItem CirItem10">
				TEXT SAMPLE FOR ITEM 10
			</div>
		</div>
	</div>
</body>
</html>

相关推荐

发表评论

相关文章