                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /企业网站综合布局实战

焦点图会自动轮播，但是没有下面那个条状按钮

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>企业网站</title>
    <link rel="stylesheet" href="css/main.css" type="text/css" />
    <script src="js/setHomeSetFav.js" type="text/javascript" charset="gbk"></script>
    <script type="text/javascript" src="js/myfocus-2.0.1.min.js"></script><!--引入myFocus库-->
    <script type="text/javascript" src="js/mf-pattern/mF_fancy.js"></script><!--引入风格js文件-->
    <link href="js/mf-pattern/mF_fancy.css" type="text/css" /><!--引入风格css文件-->
    <script type="text/javascript">
        myFocus.set({
            id:'focus',//焦点图盒子ID
            pattern:'mF_fancy',//风格应用的名称
            time:1,//切换时间间隔(秒)
            trigger:'click',//触发切换模式:'click'(点击)/'mouseover'(悬停)
            width:1000,//设置图片区域宽度(像素)
            height:310,//设置图片区域高度(像素)
            txtHeight:'default'//文字层高度设置(像素),'default'为默认高度，0为隐藏
        });
    </script>
</head>
<body>
<div class="top">
    <div class="top_content">
        <ul>
            <li><a href="#">联系我们</a></li>
            <li><a href="#" onclick="AddFavorite(window.location,document.title)">加入收藏</a></li>
            <li><a href="#" onclick="SetHome(window.location)">设置首页</a></li>
        </ul>
    </div>
</div>
<!--top结束-->
<div class="wrap">
    <div class="logo">
        <div class="logo_left">
            <img src="images/logo.jpg" alt="慕课网">
        </div>
        <div class="logo_right">
            <img src="images/tel.jpg" alt="电话">24小时服务热线：<span>123-456-7890</span>
        </div>
    </div>
    <!--logo结束-->
    <div class="nav">
        <div class="nav_left">
            <ul>
              <li><a href="#">首页</a></li>
              <li><a href="list.html">关于慕课</a></li>
              <li><a href="list.html">新闻动态</a></li>
              <li><a href="list.html">课程中心</a></li>
              <li><a href="list.html">在线课程</a></li>
              <li><a href="list.html">人才招聘</a></li>
            </ul>
        </div>
        <div class="nav_right">
            <form action="" method="post">
                <input type="text">
            </form>
        </div>
    </div>
    <!--nav结束-->
    <div id="focus">
<!--        <div class="loading"><img src="images/loading.gif" alt="请稍候..." /></div>&lt;!&ndash;载入画面(可删除)&ndash;&gt;-->
        <div class="pic">
            <ul>
              <li><a href="#"><img src="images/ad2.jpg" thumb="" alt="" text="详细描述2" /></a></li>
              <li><a href="#"><img src="images/ad3.jpg" thumb="" alt="" text="详细描述3" /></a></li>
              <li><a href="#"><img src="images/ad4.jpg" thumb="" alt="" text="详细描述4" /></a></li>
              <li><a href="#"><img src="images/ad3.jpg" thumb="" alt="" text="详细描述5" /></a></li>
            </ul>
        </div>
    </div>
    <!--focus结束-->
</div>
<!--wrap结束-->
</body>
</html>

css文件

*{
    margin: 0;
    padding: 0;
    font-size: 12px;
}

body{
    background-color: #F5F5F5;
}

.top{
    width: 100%;
    height: 27px;
    background-image: url(../images/top_bg.jpg);
}

.top_content{
    width: 1000px;
    margin: 0 auto;
}

.top_content li{
    list-style-image: url(../images/li_bg.gif);
    float: right;
    width: 70px;
    line-height: 27px;
}

.top_content li a:link,.top_content li a:visited{
    text-decoration: none;
    color: #8E8E8E;
}

.top_content li a:hover,.top_content li a:active{
    text-decoration: none;
    color: #990000;
}

.wrap{
    width: 1000px;
    margin: 0 auto;
    background-color: #F5F5F5;
}

.wrap .logo{
    width: 100%;
    height: 80px;
    background-color: #FFFFFF;
}

.wrap .logo .logo_left{
    width: 200px;
    float: left;
}

.wrap .logo .logo_right{
    width: 300px;
    float: right;
    line-height: 80px;
    color: #8E8E8E;
}

.wrap .logo .logo_right img{
    vertical-align: middle;
}

.wrap .logo .logo_right span{
    font-size: 22px;
    font-family: 微软雅黑;
    color: #990000;
}

.nav{
    width: 100%;
    height: 40px;
    background-color: #999999;
    border-radius: 5px;
}

.nav .nav_left{
    width: 700px;
    float: left;
}

.nav .nav_left li{
    list-style: none;
    float: left;
    width: 100px;
    text-align: center;
    line-height: 40px;
}

.nav .nav_left li a{
    font: 16px 微软雅黑;
    text-decoration: none;
    color: #FFFFFF;
}

.nav .nav_right{
    width: 300px;
    float: right;
}
.nav .nav_right input{
    height: 30px;
    font: 16px 微软雅黑;
    color: #999999;
    background: url(../images/search.jpg) no-repeat right center;
    background-color: #FFFFFF;
    padding-right: 25px;
}

#focus{
    width: 1000px;
    height: 310px;
    margin: 0 auto;
    overflow: hidden;
}