js电商banner焦点图导航特效代码下载


js电商banner焦点图导航特效代码下载
js电商banner焦点图导航特效代码下载以及焦点图导航等js/jquery网页特效代码下载。

1. 引入CSS

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

2. 引入JS

<script src="js/jsss.js"></script>

3. HTML代码

		<div class="main" id="main">
			<div class="menu-box">
			</div>
			<!--子-->
			<div class="sub-menu hide" id="sub-menu">
				<!--手机-->
				<div class="inner-box ">
					<div class="sub-inner-box">
						<div class="tittle">手机、配件</div>
						<div class="sub-row">
							<span class="bold mr10">手机通讯:</span>
							<a href="#">手机</a>
							<span class="ml10 mr10">/</span>
							<a href="#">手机</a>
							<span class="ml10 mr10">/</span>
							<a href="#">手机</a>
							<span class="ml10 mr10">/</span>
							<a href="#">手机</a>
						</div>
						<div class="sub-row">
							<span class="bold mr10">手机通讯:</span>
							<a href="#">手机</a>
							<span class="ml10 mr10">/</span>
							<a href="#">手机</a>
							<span class="ml10 mr10">/</span>
							<a href="#">手机</a>
							<span class="ml10 mr10">/</span>
							<a href="#">手机</a>
						</div>
						<div class="sub-row">
							<span class="bold mr10">手机通讯:</span>
							<a href="#">手机</a>
							<span class="ml10 mr10">/</span>
							<a href="#">手机</a>
							<span class="ml10 mr10">/</span>
							<a href="#">手机</a>
							<span class="ml10 mr10">/</span>
							<a href="#">手机</a>
						</div>
					</div>
				</div>
				<!--电脑-->
				<div class="inner-box">
					<div class="sub-inner-box">
						<div class="tittle">电脑</div>
						<div class="sub-row">
							<span class="bold mr10">手机通讯:</span>
							<a href="#">手机</a>
							<span class="ml10 mr10">/</span>
							<a href="#">手机</a>
							<span class="ml10 mr10">/</span>
							<a href="#">手机</a>
							<span class="ml10 mr10">/</span>
							<a href="#">手机</a>
						</div>
						<div class="sub-row">
							<span class="bold mr10">手机通讯:</span>
							<a href="#">手机</a>
							<span class="ml10 mr10">/</span>
							<a href="#">手机</a>
							<span class="ml10 mr10">/</span>
							<a href="#">手机</a>
							<span class="ml10 mr10">/</span>
							<a href="#">手机</a>
						</div>
						<div class="sub-row">
							<span class="bold mr10">手机通讯:</span>
							<a href="#">手机</a>
							<span class="ml10 mr10">/</span>
							<a href="#">手机</a>
							<span class="ml10 mr10">/</span>
							<a href="#">手机</a>
							<span class="ml10 mr10">/</span>
							<a href="#">手机</a>
						</div>
					</div>
				</div>
				<!--电器-->
				<div class="inner-box">
					<div class="sub-inner-box">
						<div class="tittle">电器</div>
						<div class="sub-row">
							<span class="bold mr10">手机通讯:</span>
							<a href="#">手机</a>
							<span class="ml10 mr10">/</span>
							<a href="#">手机</a>
							<span class="ml10 mr10">/</span>
							<a href="#">手机</a>
							<span class="ml10 mr10">/</span>
							<a href="#">手机</a>
						</div>
						<div class="sub-row">
							<span class="bold mr10">手机通讯:</span>
							<a href="#">手机</a>
							<span class="ml10 mr10">/</span>
							<a href="#">手机</a>
							<span class="ml10 mr10">/</span>
							<a href="#">手机</a>
							<span class="ml10 mr10">/</span>
							<a href="#">手机</a>
						</div>
						<div class="sub-row">
							<span class="bold mr10">手机通讯:</span>
							<a href="#">手机</a>
							<span class="ml10 mr10">/</span>
							<a href="#">手机</a>
							<span class="ml10 mr10">/</span>
							<a href="#">手机</a>
							<span class="ml10 mr10">/</span>
							<a href="#">手机</a>
						</div>
					</div>
				</div>
				<!--家具-->
				<div class="inner-box">
					<div class="sub-inner-box">
						<div class="tittle">家具</div>
						<div class="sub-row">
							<span class="bold mr10">手机通讯:</span>
							<a href="#">手机</a>
							<span class="ml10 mr10">/</span>
							<a href="#">手机</a>
							<span class="ml10 mr10">/</span>
							<a href="#">手机</a>
							<span class="ml10 mr10">/</span>
							<a href="#">手机</a>
						</div>
						<div class="sub-row">
							<span class="bold mr10">手机通讯:</span>
							<a href="#">手机</a>
							<span class="ml10 mr10">/</span>
							<a href="#">手机</a>
							<span class="ml10 mr10">/</span>
							<a href="#">手机</a>
							<span class="ml10 mr10">/</span>
							<a href="#">手机</a>
						</div>
						<div class="sub-row">
							<span class="bold mr10">手机通讯:</span>
							<a href="#">手机</a>
							<span class="ml10 mr10">/</span>
							<a href="#">手机</a>
							<span class="ml10 mr10">/</span>
							<a href="#">手机</a>
							<span class="ml10 mr10">/</span>
							<a href="#">手机</a>
						</div>
					</div>
				</div>
			</div>
			<!--主-->
			<div class="menu-contern" id="menu-contern">
				<div class="menu-item">
					<a href="">
						<span>手机、配件</span>
						<i class="icon">&#xe665;</i>
					</a>
				</div>
				<div class="menu-item">
					<a href="">
						<span>电脑</span>
						<i class="icon">&#xe665;</i>
					</a>
				</div>
				<div class="menu-item">
					<a href="">
						<span>家用电器</span>
						<i class="icon">&#xe665;</i>
					</a>
				</div>
				<div class="menu-item">
					<a href="">
						<span>家具</span>
						<i class="icon">&#xe665;</i>
					</a>
				</div>
			</div>
			<!--图片轮播-->
			<div class="banner" id="banner">
				<a href="">
					<div class="banner-slide slide1 slide_active"></div>
				</a>
				<a href="">
					<div class="banner-slide slide2"></div>
				</a>
				<a href="">
					<div class="banner-slide slide3"></div>
				</a>
			</div>
			<!--上下按钮-->
			<a href="javascript:void(0)" class="button prev" id="prev"></a>
			<a href="javascript:void(0)" class="button next" id="next"></a>
			<!--圆点-->
			<div class="dots" id="dots">
				<span class="active"></span>
				<span></span>
				<span></span>
			</div>
		</div>

相关推荐

发表评论

相关文章