jQuery仿有道视频网站选项卡分组图片滚动特效代码下载

代码结构

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>

3. HTML代码

<div id="indexmain">
	<div id="slide">
		<div class="bd">
			<div class="cover">
				<ul>
					<li data-category="tv">
						<div class="shadow"></div>
						<a href="https://www.51qianduan.com/">51前端</a>
					</li>
					<li data-category="tv">
						<div class="shadow"></div>
						<a href="https://www.51qianduan.com/">51前端</a>
					</li>
					<li data-category="tv">
						<div class="shadow"></div>
						<a href="https://www.51qianduan.com/">51前端</a>
					</li>
					<li data-category="tv">
						<div class="shadow"></div>
						<a href="https://www.51qianduan.com/">51前端</a>
					</li>
					<li data-category="tv">
						<div class="shadow"></div>
						<a href="https://www.51qianduan.com/">51前端</a>
					</li>
					<li data-category="tv">
						<div class="shadow"></div>
						<a href="https://www.51qianduan.com/">51前端</a>
					</li><!--tv end-->
					<li data-category="movie">
						<div class="shadow"></div>
						<a href="https://www.51qianduan.com/">51前端</a>
					</li>
					<li data-category="movie">
						<div class="shadow"></div>
						<a href="https://www.51qianduan.com/">51前端</a>
					</li>
					<li data-category="movie">
						<div class="shadow"></div>
						<a href="https://www.51qianduan.com/">51前端</a>
					</li>
					<li data-category="movie">
						<div class="shadow"></div>
						<a href="https://www.51qianduan.com/">51前端</a>
					</li>
					<li data-category="movie">
						<div class="shadow"></div>
						<a href="https://www.51qianduan.com/">51前端</a>
					</li>
					<li data-category="movie">
						<div class="shadow"></div>
						<a href="https://www.51qianduan.com/">51前端</a>
					</li><!--movie end-->
					<li data-category="anime">
						<div class="shadow"></div>
						<a href="https://www.51qianduan.com/">51前端</a>
					</li>
					<li data-category="anime">
						<div class="shadow"></div>
						<a href="https://www.51qianduan.com/">51前端</a>
					</li>
					<li data-category="anime">
						<div class="shadow"></div>
						<a href="https://www.51qianduan.com/">51前端</a>
					</li>
					<li data-category="anime">
						<div class="shadow"></div>
						<a href="https://www.51qianduan.com/">51前端</a>
					</li>
					<li data-category="anime">
						<div class="shadow"></div>
						<a href="https://www.51qianduan.com/">51前端</a>
					</li>
					<li data-category="anime">
						<div class="shadow"></div>
						<a href="https://www.51qianduan.com/">51前端</a>
					</li><!--dongman end-->
					<li data-category="variety">
						<div class="shadow"></div>
						<a href="https://www.51qianduan.com/">51前端</a>
					</li>
					<li data-category="variety">
						<div class="shadow"></div>
						<a href="https://www.51qianduan.com/">51前端</a>
					</li>
					<li data-category="variety">
						<div class="shadow"></div>
						<a href="https://www.51qianduan.com/">51前端</a>
					</li>
					<li data-category="variety">
						<div class="shadow"></div>
						<a href="https://www.51qianduan.com/">51前端</a>
					</li>
					<li data-category="variety">
						<div class="shadow"></div>
						<a href="https://www.51qianduan.com/">51前端</a>
					</li>
					<li data-category="variety">
						<div class="shadow"></div>
						<a href="https://www.51qianduan.com/">51前端</a>
					</li><!--zongyi end-->
				</ul>
			</div>
			<a href="javascript:" class="btn left-btn" hidefocus="true"></a>
			<a href="javascript:" class="btn right-btn" hidefocus="true"></a>
		</div>
		<div class="ft">
			<div class="tab">
				<a href="javascript:" data-index="1" class="cur" hidefocus="true">电视剧<span></span></a>
				<a href="javascript:" data-index="3" hidefocus="true">电影<span></span></a>
				<a href="javascript:" data-index="5" hidefocus="true">动漫<span></span></a>
				<a href="javascript:" data-index="7" hidefocus="true">综艺<span></span></a>
			</div>
		</div>
		<div class="edge left-edge"></div>
		<div class="edge right-edge"></div>
		<div class="slide-bottom-shadow"></div>
	</div>
</div>