前言
1.静态动态实现淘宝首页的展示。
2.本项目使用HBuilder X编译器是实现。
?效果图片
?
一、代码目录块
二、使用步骤
1.引入库
引入js库:
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/less.js/4.1.1/less.min.js"></script>?引入图片库:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />图片库网站 :
引入less文件:
<link rel="stylesheet/less" href="css/main.less" />
2.完整项目代码
html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet/less" href="css/main.less" />
<script src="https://cdn.bootcdn.net/ajax/libs/less.js/4.1.1/less.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
</head>
<body>
<!-- 顶部条 -->
<div id="header">
<div class="container clearfix">
<div class="header-left">
<a href="#">中国大陆 <i class="fa fa-angle-down" aria-hidden="true"></i></a>
<a href="#" class="orange">亲，请登录</a>
<a href="#">免费注册</a>
<a href="#">手机逛淘宝</a>
</div>
<div class="header-right">
<a href="#">我的淘宝 <i class="fa fa-angle-down" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-shopping-cart orange" aria-hidden="true"></i> 购物车 <span
class="shopnum">0</span> <i class="fa fa-angle-down orange" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-star-o " aria-hidden="true"></i>收藏夹 <i class="fa fa-angle-down"
aria-hidden="true"></i></a>
<a href="#">商品分类</a>
<a href="#">免费开店</a>
<span class="split">|</span>
<a href="#">千牛卖家中心 <i class="fa fa-angle-down" aria-hidden="true"></i></a>
<a href="#">联系客服</a>
<a href="#"> <i class="fa fa-list-ul" aria-hidden="true" style="color: orangered;"></i> 网站导航 <i
class="fa fa-angle-down" aria-hidden="true"></i></a>
</div>
</div>
</div>
<!-- 主体 -->
<div id="main">
<div class="container">
<div class="searchbar">
<div class="logo">
<img src="https://gw.alicdn.com/imgextra/i3/O1CN01uRz3de23mzWofmPYX_!!6000000007299-2-tps-143-59.png"
alt="">
</div>
<form action="https://s.taobao.com/search" method="get">
<div class="searchbar-main" >
<div class="search-category">
宝贝 <i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
<span class="search-icon"><i class="fa fa-search" aria-hidden="true"></i></span>
<div class="input">
<input type="text" placeholder="连衣裙新款">
</div>
<button>搜索</button>
</div>
<div class="hotwords">
<a href="#">新款连衣裙 </a>
<a href="#">四件套 </a>
<a href="#" style="color: orangered;">潮流T恤 </a>
<a href="#">时尚女鞋 </a>
<a href="#">短裤 </a>
<a href="#">半身裙 </a>
<a href="#">男士外套 </a>
<a href="#">墙纸</a>
<a href="#">行车记录仪 </a>
<a href="#">新款男鞋 </a>
<a href="#">耳机 </a>
<a href="#">时尚女包 </a>
<a href="#">沙发</a>
</div>
</form>
<div class="qrcode">
<div class="qrcode-inner">
<span>
下载淘宝
</span>
<img src="http://img.alicdn.com/tfs/TB18W1cQFXXXXaWXXXXXXXXXXXX-160-160.png" alt="">
</div>
</div>
</div>
<div class="main-nav clearfix">
<div class="main-title clearfix">
<h2>主题市场</h2>
<ul class="main-tip">
<li><a href="#">天猫</a></li>
<li><a href="">聚划算</a></li>
<li><a href="">天猫超市</a></li>
</ul>
<ul class="main-inner">
<li>|</li>
<li><a href="">司法拍卖</a></li>
<li><a href="">飞猪旅行</a></li>
<li><a href="">天天特卖</a></li>
</ul>
<ul class="main-inner-info">
<li>|</li>
<li><a href="">造点新货</a></li>
<li><a href="">苏宁易购</a></li>
<li><a href="">淘宝新选</a></li>
<li><a href="">智能生活</a></li>
</ul>
</div>
<div class="main-box clearfix">
<div class="main-box-inner">
<div class="main-info">
<div class="main-inner-out">
<div class="main-foot">
<ul>
<li><a href="">女装</a>/
<a href="">内衣</a>/
<a href="">家居</a>
<i class="fa fa-angle-right" aria-hidden="true" class="tu"></i>
</li>
<li><a href="">女鞋</a>/
<a href="">男鞋</a>/
<a href="">箱包</a>
<i class="fa fa-angle-right" aria-hidden="true" class="tu"></i>
</li>
<li><a href="">母婴</a>/
<a href="">童装</a>/
<a href="">玩具</a>
<i class="fa fa-angle-right" aria-hidden="true" class="tu"></i>
</li>
<li><a href="">男装</a>/
<a href="">运动户外</a>
<i class="fa fa-angle-right" aria-hidden="true" class="tu"></i>
</li>
<li><a href="">美妆</a>/
<a href="">彩妆</a>/
<a href="">个护</a>
<i class="fa fa-angle-right" aria-hidden="true" class="tu"></i>
</li>
<li><a href="">手机</a>/
<a href="">数码</a>/
<a href="">企业</a>
<i class="fa fa-angle-right" aria-hidden="true" class="tu"></i>
</li>
<li><a href="">大家电</a>/
<a href="">生活电器</a>
<i class="fa fa-angle-right" aria-hidden="true" class="tu"></i>
</li>
<li><a href="">女零食</a>/
<a href="">生鲜</a>/
<a href="">茶酒</a>
<i class="fa fa-angle-right" aria-hidden="true" class="tu"></i>
</li>
<li><a href="">厨具</a>/
<a href="">收纳</a>/
<a href="">清洁</a>
<i class="fa fa-angle-right" aria-hidden="true" class="tu"></i>
</li>
<li><a href="">家纺</a>/
<a href="">家饰</a>/
<a href="">鲜花</a>
<i class="fa fa-angle-right" aria-hidden="true" class="tu"></i>
</li>
<li><a href="">图书音像</a>/
<a href="">文具</a>
<i class="fa fa-angle-right" aria-hidden="true" class="tu"></i>
</li>
<li><a href="">医药保健</a>/
<a href="">进口</a>
<i class="fa fa-angle-right" aria-hidden="true" class="tu"></i>
</li>
<li><a href="">汽车</a>/
<a href="">二手车</a>/
<a href="">用品</a>
<i class="fa fa-angle-right" aria-hidden="true" class="tu"></i>
</li>
<li><a href="">房产</a>/
<a href="">装修家具</a>/
<a href="">建材</a>
<i class="fa fa-angle-right" aria-hidden="true" class="tu"></i>
</li>
<li><a href="">手表</a>/
<a href="">眼镜</a>/
<a href="">珠宝饰品</a>
<i class="fa fa-angle-right" aria-hidden="true" class="tu"></i>
</li>
</ul>
</div>
<div class="main-tp-box" id="main-tp-box">
<ul id="unit">
<li><a href=""><img src="https://img.alicdn.com/imgextra/i4/6000000000370/O1CN01PdLdrI1EbVG0AJ10q_!!6000000000370-0-octopus.jpg" data-spm-anchor-id="a21bo.jianhua.d201405060011.i0.214411d9DjlETz"></a></li>
<li><a href=""><img border="0" src="https://gtms03.alicdn.com/tps/i3/TB1gXd1JXXXXXapXpXXvKyzTVXX-520-280.jpg" width="520px" height="280px" data-spm-anchor-id="a21bo.jianhua.201862.i1.214411d9DjlETz"></a></li>
<li><a href=""><img border="0" src="https://gtms01.alicdn.com/tps/i1/TB1r4h8JXXXXXXoXXXXvKyzTVXX-520-280.jpg" width="520px" height="280px" data-spm-anchor-id="a21bo.jianhua.201862.i2.214411d9DjlETz"></a></li>
<li><a href=""><img border="0" src="https://gtms02.alicdn.com/tps/i2/TB10vPXKpXXXXacXXXXvKyzTVXX-520-280.jpg" width="520px" height="280px" data-spm-anchor-id="a21bo.jianhua.201862.i3.214411d9DjlETz"></a></li>
<li><a href=""><img src="https://img.alicdn.com/imgextra/i1/6000000004961/O1CN01WBsw111mWBb2EYOU5_!!6000000004961-0-octopus.jpg" data-spm-anchor-id="a21bo.jianhua.d201405060021.i0.214411d9DjlETz"></a></li>
</ul>
<div class="btns">
<a href="javascript:void(0)" id="leftBtn" class="leftBtn"><</a>
<a href="javascript:void(0)" id="rightBtn" class="rightBtn">></a>
</div>
<div class="circles" id="circles">
<ol>
<li class="cur"></li>
<li></li>
<li></li>
<li></li>
<li class="last"></li>
</ol>
</div>
</div>
<div class="main-tp-footer" id="main-tp-footer">
<ul id="nut">
<li>
<a href="" ><img border="0" src="https://aecpm.alicdn.com/simba/img/TB1X6uHLVXXXXcCXVXXSutbFXXX.jpg" width="250px" height="155px" data-spm-anchor-id="a21bo.jianhua.201863.i1.27b311d98XrWrs"></a>
<a href="" ><img border="0" src="https://aecpm.alicdn.com/simba/img/TB13xKuLVXXXXcHapXXSutbFXXX.jpg" width="250px" height="155px" data-spm-anchor-id="a21bo.jianhua.201863.i0.6a4a11d9i7RyXT"></a>
</li>
<li>
<a href="" ><img src="//img.alicdn.com/imgextra/i3/700459267/O1CN01ga1mwD2IKL2CVvDC1_!!700459267.png_240x240q90.jpg" alt="" data-spm-anchor-id="a21bo.jianhua.d1.i1.6a4a11d9k232BZ"></a>
<a href=""><img src="//img.alicdn.com/tfs/TB1sQTyENYaK1RjSZFnXXa80pXa-502-380.jpg_240x240q90.jpg" alt="" data-spm-anchor-id="a21bo.jianhua.d2.i0.6a4a11d9i7RyXT"></a>
</li>
<li>
<a href=""><img src="//img.alicdn.com/tfs/TB1x7TyENYaK1RjSZFnXXa80pXa-502-380.jpg_240x240q90.jpg" alt="" data-spm-anchor-id="a21bo.jianhua.d1.i1.6a4a11d9i7RyXT"></a>
<a href=""><img src="//img.alicdn.com/tfs/TB1IQPsEFzqK1RjSZFoXXbfcXXa-502-380.jpg_240x240q90.jpg" alt="" data-spm-anchor-id="a21bo.jianhua.d2.i1.6a4a11d9i7RyXT"></a>
</li>
<li>
<a href=""><img src="//img.alicdn.com/tfs/TB1xwW3eiLaK1RjSZFxXXamPFXa-502-380.jpg_240x240q90.jpg" alt="" data-spm-anchor-id="a21bo.jianhua.d1.i2.6a4a11d9i7RyXT"></a>
<a href=""><img src="//img.alicdn.com/tfs/TB1Cq1HekvoK1RjSZPfXXXPKFXa-502-380.jpg_240x240q90.jpg" alt="" data-spm-anchor-id="a21bo.jianhua.d2.i2.6a4a11d9i7RyXT"></a>
</li>
<li>
<a href=""><img src="//img.alicdn.com/tfs/TB1jq1HekvoK1RjSZPfXXXPKFXa-502-380.jpg_240x240q90.jpg" alt="" data-spm-anchor-id="a21bo.jianhua.d1.i3.6a4a11d9i7RyXT"></a>
<a href=""><img src="//img.alicdn.com/tfs/TB1NASFejDpK1RjSZFrXXa78VXa-502-380.jpg_240x240q90.jpg" alt="" data-spm-anchor-id="a21bo.jianhua.d2.i3.6a4a11d9i7RyXT"></a>
</li>
</ul>
<div class="but">
<a href="javascript:void(0)" id="leftBut" class="leftBut"><</a>
<a href="javascript:void(0)" id="rightBut" class="rightBut">></a>
</div>
</div>
<div class="tb-hy">
<div class="tb-jz">
<a href=""><img class="J_MemberAvatar member-avatar" src="//wwc.alicdn.com/avatar/getAvatar.do?userNick=&width=50&height=50&type=sns&_input_charset=UTF-8" data-spm-anchor-id="a21bo.jianhua.201864.i0.6dd311d95QsEOZ"></a>
<p>Hi<strong>你好</strong></p>
</div>
<div class="hy-main">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">开店</a>
</div>
<div class="hy-tp" id="hy-tp">
<ul id="hy-dp">
<li><a href=""><img src="https://img.alicdn.com/imgextra/i4/O1CN01O9cUgd1hDLDja6LOx_!!6000000004243-2-tps-712-282.png" data-spm-anchor-id="a21bo.jianhua.0.i5.6dd311d9aYWBr1"></a></li>
<li><a href=""><img src="https://gw.alicdn.com/imgextra/i3/O1CN01Aq7brs1KNeyyozBnm_!!6000000001152-2-tps-356-141.png" data-spm-anchor-id="a21bo.jianhua.0.i3.6dd311d9aYWBr1"></a></li>
</ul>
<div class="quan" id="quan">
<ol>
<li class="quanfirst"></li>
<li class="quanlast"></li>
</ol>
</div>
</div>
<div class="hy-bt">
<p><strong>公告</strong>新鲜事儿都在这里～</p>
<p><a href="">热点</a><a href="">2021年淘宝11.11招商规则</a></p>
<p><a href="">热点</a><a href="">关于推进“清朗”账号乱象专项整治的通知</a></p>
<p><a href="">热点</a><a href="">《淘宝平台违禁信息管理规则》规则变更通知</a></p>
</div>
<div class="hy-bq">
<div class="hy-list1">
<a href="">
<p><i class="fa fa-clock-o" aria-hidden="true"></i></p>
<p>收藏的宝贝</p>
</a>
</div>
<div class="hy-list2">
<a href="">
<p><i class="fa fa-clock-o" aria-hidden="true"></i></p>
<p>收藏的宝贝</p>
</a>
</div>
<div class="hy-list3">
<a href="">
<p><i class="fa fa-clock-o" aria-hidden="true"></i></p>
<p>收藏的宝贝</p>
</a>
</div>
<div class="hy-list4">
<a href="">
<p><i class="fa fa-clock-o" aria-hidden="true"></i></p>
<p>收藏的宝贝</p>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>css 代码：
html {
overflow-y: scroll;
}
body {
background-color: #e8e8e8;
font-size: 14px;
}
* {
margin: 0;
padding: 0;
font-family: 宋体;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
.container {
width: 1200px;
margin: 0 auto;
position: relative;
}
#header {
background: #f6f6f6;
}
#header a {
color: #666;
font-size: 12px;
text-decoration: none;
line-height: 35px;
margin-left: 12px;
}
#header a:hover {
color: orangered;
}
#header .orange {
color: orangered;
}
#header span.shopnum {
color: orangered;
font-weight: bold;
}
#header span.split {
margin: 0 5px;
vertical-align: middle;
color: #ccc;
}
#header .header-left {
float: left;
height: 35px;
}
#header .header-right {
float: right;
height: 35px;
}
#main .searchbar {
height: 120px;
}
#main .searchbar .logo {
width: 250px;
float: left;
text-align: center;
margin-top: 26px;
}
#main .searchbar form {
width: 700px;
float: left;
}
#main .searchbar form .searchbar-main {
position: relative;
border: 1px solid orangered;
background: white;
border-radius: 18px;
height: 36px;
margin-top: 30px;
}
#main .searchbar form .searchbar-main .search-category {
float: left;
width: 80px;
height: 36px;
text-align: center;
line-height: 36px;
border-right: 1px solid #F1F1F1;
}
#main .searchbar form .searchbar-main .search-category i {
font-size: 12px;
transform: scale(0.6);
}
#main .searchbar form .searchbar-main .search-icon {
float: left;
line-height: 36px;
width: 36px;
text-align: center;
}
#main .searchbar form .searchbar-main .search-icon i {
color: gray;
font-size: 16px;
}
#main .searchbar form .searchbar-main div.input {
background: red;
position: absolute;
left: 117px;
right: 66px;
}
#main .searchbar form .searchbar-main div.input input {
width: 100%;
border: none;
outline: none;
height: 36px;
line-height: 36px;
}
#main .searchbar form .searchbar-main button {
position: absolute;
background-image: linear-gradient(to right, #ff9000 0, #ff5000 100%);
border: none;
height: 30px;
width: 60px;
right: 3px;
top: 3px;
font-size: 18px;
color: white;
border-radius: 15px;
font-weight: bold;
}
#main .searchbar form .hotwords {
margin-top: 5px;
}
#main .searchbar form .hotwords a {
text-decoration: none;
font-size: 12px;
color: #333;
}
#main .searchbar form .hotwords a:hover {
color: orangered;
}
#main .searchbar .qrcode {
width: 250px;
float: left;
}
#main .searchbar .qrcode .qrcode-inner {
background-color: white;
padding: 4px 6px;
position: relative;
margin: 16px auto 0px auto;
width: 60px;
}
#main .searchbar .qrcode .qrcode-inner span {
display: block;
color: orangered;
font-size: 12px;
text-align: center;
}
#main .searchbar .qrcode .qrcode-inner img {
width: 100%;
}
#main .main-nav {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
padding-top: 10px;
height: 540px;
background-color: white;
}
#main .main-nav .main-title .main-inner {
color: #333;
float: left;
list-style: none;
font-size: 14px;
}
#main .main-nav .main-title .main-inner li {
margin-left: 7px;
float: left;
}
#main .main-nav .main-title .main-inner li a {
float: left;
text-decoration: none;
padding: 0 5px;
}
#main .main-nav .main-title .main-inner li a:hover {
color: orangered;
}
#main .main-nav .main-title .main-inner-info {
color: #333;
float: left;
list-style: none;
font-size: 14px;
}
#main .main-nav .main-title .main-inner-info li {
margin-left: 7px;
float: left;
}
#main .main-nav .main-title .main-inner-info li a {
float: left;
text-decoration: none;
padding: 0 5px;
}
#main .main-nav .main-title .main-inner-info li a:hover {
color: orangered;
}
#main .main-nav .main-title h2 {
float: left;
width: 190px;
text-align: center;
font-size: 16px;
color: #FF6200;
}
#main .main-nav .main-title .main-tip {
float: left;
display: inline;
font-size: 16px;
font-weight: 700;
list-style: none;
}
#main .main-nav .main-title .main-tip li:nth-child(1) {
float: left;
margin: 0 3px;
text-align: center;
padding: 0 4px;
}
#main .main-nav .main-title .main-tip li:nth-child(1) a {
color: orangered;
text-decoration: none;
}
#main .main-nav .main-title .main-tip li:nth-child(1) a:hover {
transition: color 0.5s;
color: #ff6200;
}
#main .main-nav .main-title .main-tip li:nth-child(2) {
float: left;
margin: 0 3px;
text-align: center;
padding: 0 4px;
}
#main .main-nav .main-title .main-tip li:nth-child(2) a {
color: orangered;
text-decoration: none;
}
#main .main-nav .main-title .main-tip li:nth-child(2) a:hover {
transition: color 0.5s;
color: #ff6200;
}
#main .main-nav .main-title .main-tip li:nth-child(3) {
float: left;
margin: 0 3px;
text-align: center;
padding: 0 4px;
}
#main .main-nav .main-title .main-tip li:nth-child(3) a {
color: #33c900;
text-decoration: none;
}
#main .main-nav .main-title .main-tip li:nth-child(3) a:hover {
transition: color 0.5s;
color: #ff6200;
}
#main .main-box .main-box-inner .main-info .main-inner-out {
position: relative;
}
#main .main-box .main-box-inner .main-info .main-inner-out .tb-hy {
border-radius: 15px;
background-color: #f3f3f3;
position: absolute;
top: 5%;
left: 62%;
width: 400px;
height: 530px;
}
#main .main-box .main-box-inner .main-info .main-inner-out .tb-hy .hy-bq {
padding-top: 40px;
text-align: center;
}
#main .main-box .main-box-inner .main-info .main-inner-out .tb-hy .hy-bq .hy-list1 {
float: left;
width: 60px;
padding-left: 35px;
}
#main .main-box .main-box-inner .main-info .main-inner-out .tb-hy .hy-bq .hy-list1 a {
color: black;
text-decoration: none;
}
#main .main-box .main-box-inner .main-info .main-inner-out .tb-hy .hy-bq .hy-list1 a p {
padding-bottom: 20px;
}
#main .main-box .main-box-inner .main-info .main-inner-out .tb-hy .hy-bq .hy-list1 a p i {
transform: scale(2);
}
#main .main-box .main-box-inner .main-info .main-inner-out .tb-hy .hy-bq .hy-list1 a p i:hover {
color: red;
}
#main .main-box .main-box-inner .main-info .main-inner-out .tb-hy .hy-bq .hy-list2 {
float: left;
width: 60px;
padding-left: 35px;
}
#main .main-box .main-box-inner .main-info .main-inner-out .tb-hy .hy-bq .hy-list2 a {
color: black;
text-decoration: none;
}
#main .main-box .main-box-inner .main-info .main-inner-out .tb-hy .hy-bq .hy-list2 a p {
padding-bottom: 20px;
}
#main .main-box .main-box-inner .main-info .main-inner-out .tb-hy .hy-bq .hy-list2 a p i {
transform: scale(2);
}
#main .main-box .main-box-inner .main-info .main-inner-out .tb-hy .hy-bq .hy-list2 a p i:hover {
color: red;
}
#main .main-box .main-box-inner .main-info .main-inner-out .tb-hy .hy-bq .hy-list3 {
float: left;
width: 60px;
padding-left: 35px;
}
#main .main-box .main-box-inner .main-info .main-inner-out .tb-hy .hy-bq .hy-list3 a {
color: black;
text-decoration: none;
}
#main .main-box .main-box-inner .main-info .main-inner-out .tb-hy .hy-bq .hy-list3 a p {
padding-bottom: 20px;
}
#main .main-box .main-box-inner .main-info .main-inner-out .tb-hy .hy-bq .hy-list3 a p i {
transform: scale(2);
}
#main .main-box .main-box-inner .main-info .main-inner-out .tb-hy .hy-bq .hy-list3 a p i:hover {
color: red;
}
#main .main-box .main-box-inner .main-info .main-inner-out .tb-hy .hy-bq .hy-list4 {
width: 60px;
float: left;
padding-left: 35px;
}
#main .main-box .main-box-inner .main-info .main-inner-out .tb-hy .hy-bq .hy-list4 a {
text-decoration: none;
color: black;
}
#main .main-box .main-box-inner .main-info .main-inner-out .tb-hy .hy-bq .hy-list4 a p {
padding-bottom: 20px;
}
#main .main-box .main-box-inner .main-info .main-inner-out .tb-hy .hy-bq .hy-list4 a p i {
transform: scale(2);
}
#main .main-box .main-box-inner .main-info .main-inner-out .tb-hy .hy-bq .hy-list4 a p i:hover {
color: red;
}JS代码：
<script>
var $tpbox=$("#main-tp-box");
var $unit=$("#unit");
var $tpboxLis=$("#circles li");
var $leftBtn=$("#leftBtn");
var $rightBtn=$("#rightBtn");
var num=$unit.children("li").length;
$unit.children("li:first").clone().appendTo($unit);
var time=setInterval(rightBtnHandler,2000);
$tpbox.mouseenter(function(){
clearInterval(time);
});
$tpbox.mouseleave(function(){
time=setInterval(rightBtnHandler,2000);
});
var idx=0;
$rightBtn.click(rightBtnHandler);
function rightBtnHandler(){
if($unit.is(":animated")){
return;
}
idx++;
$unit.animate({left:idx*-520},500,function(){
if(idx>num-1){
idx=0;
$unit.css("left",0);
}
});
var i=idx <= num - 1 ? idx : 0;
$tpboxLis.eq(i).addClass("cur").siblings().removeClass("cur");
}
$leftBtn.click(function(){
if($unit.is(":animated")){
return;
}
idx--;
if(idx<0){
idx=num-1;
$unit.css("left",num*-520);
}
$unit.animate({left:idx*-520},500);
$tpboxLis.eq(idx).addClass("cur").siblings().removeClass("cur");
});
$tpboxLis.mouseenter(function(){
idx=$(this).index();
$unit.stop(true).animate({"left":idx * -520},500);
$tpboxLis.eq(idx).addClass("cur").siblings().removeClass("cur");
});//第一个轮播
</script>