焦点图会自动轮播，但是没有下面那个条状按钮
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><!–载入画面(可删除)–>-->
<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;
}
