特效描述:仿有道视频网站 选项卡分组 图片滚动。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>