焦点图不能滚动
来源：3-8 企业网站制作之焦点图制作
Virture
2015-10-04 00:12
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>标题</title>
<link href="css/main2.css" rel="stylesheet" type="text/css"/>
<script src="js/setHomeSetFav.js" type="text/javascript" charset="gb2312"></script>
<!--js/setHomeSetFav.js为实现设为首页等功能的脚本文件路径；设置charset="gb2312"防止网页乱码-->
<script src="js/myfocus-2.0.1.min.js" type="text/javascript" charset="utf-8"></script>
<!--<script src="js/mf-pattern/mF_fancy.js" type="text/javascript"></script>
<link href="js/mf-pattern/mF_fancy.css" rel="stylesheet" type="text/css"/>-->
<!--下载myfocus的demo演示打包后，关联相关文件，准备焦点图制作-->
<script type="text/javascript">
myFocus.set({
id:'picbox',
pattern:'mF_fancy',风格应用的名称
time:3,//切换时间间隔(秒)
trigger:'click',//触发切换模式:'click'(点击)/'mouseover'(悬停)
width:1000,//设置图片区域宽度(像素)
height:310,//设置图片区域高度(像素)
txtHeight:'default'//文字层高度设置(像素),'default'为默认高度，0为隐藏
});
</script>
<!--myFocus初始化，ID要一致，列表要加div-->
</head>
<body>
<div class="top">
<div class="top_content">
<ul>
<li>联系我们</li>
<li><a href="#" onclick="AddFavorite(window.location,docunment.title)">加入收藏</a></li>
<li><a href="#" onclick="SetHome(window.location)">设为首页</a></li>
<!--onclick="SetHome(window.location)"调用js脚本函数；href="#"暂时设为空链接-->
</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="服务热线" width="28" height="28" />24小时服务热线：<span class="tel">123-456-7890</span>
</div>
</div><!--logo结束-->
<!--页面头部结束-->
<div class="nav">
<div class="nav_left">
</div>
<div class="nav_mid">
<div class="nav_mid_left">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于慕课</a></li>
</ul>
</div>
<div class="nav_mid_right">
<form action="" method="post">
<input type="text" class="search_text"/>
</form>
</div>
</div><!--nav_mid结束-->
<div class="nav_right">
</div><!--navright结束-->
</div><!--nav结束-->
<div class="ad">
<div id="picBox">
<div class="loading"><img src="images/loading.gif" alt="图片加载中"/></div>
<div class="pic">
<ul>
<li><img src="images/ad.jpg"/></li>
<li><img src="images/ad2.jpg"/></li>
<li><img src="images/ad3.jpg"/></li>
<li><img src="images/ad4.jpg"/></li>
</ul>
</div>
</div>
</div><!--ad结束-->
<div class="main">
<div class="news">
<div class="title">
<h2 class="title_left">新闻中心</h2><span class="title_right"><a href="news.html">More>></a></span>
</div><!--title结束-->
<div class="pic_news">
<img src="news.jpg"/><h2>内容</h2><p>一段话<br/>2<br/>3</p>
</div><!--pic_news结束-->
<div class="news_list">
<ul>
<li><a href="#">屌丝在路上</a><span>2014-06-01</span></li>
<li><a href="#">屌丝在路上</a><span>2014-06-01</span></li>
<li><a href="#">屌丝在路上</a><span>2014-06-01</span></li>
<li><a href="#">屌丝在路上</a><span>2014-06-01</span></li>
</ul>
</div><!--news_list结束-->
</div><!--news结束-->
<div class="course"></div><!--course结束-->
<div class="sidebar"></div><!--sidebar结束-->
</div><!--main结束-->
</div><!--wrap结束-->
</body>@charset "gb2312";
/*CSS Document*/
*
{
margin:0;
padding:0;
font-size:12px;
}
body
{
background-color:#F5F5F5;
}
.top
{
width:100%;
height:27px;
background:url(../images/top_bg.jpg)repeat-x;/*将images下的背景图片设为背景*/
}
.top_content
{
width:1000px;
margin:0 auto;/*上下间距为0，左右为自动*/
line-height: 27px;
}
.top_content li /*定义了top_content类下面的li*/
{
list-style-image:url(../images/li_bg.gif);
float:right;/*设置右浮动*/
width:70px;
line-height:27px;
/*想让li在盒子中垂直居中，就把li的行高设置和盒子即top的行高一样*/
}
.top_content a:link,.top_content a:visited/*超链接的初始状态和访问状态*/
{
color:#8E8E8E;/*链接颜色*/
text-decoration:none;/*文字是否有下划线*/
}
.top_content a:hover,.top_content a:active/*鼠标经过和点击的状态*/
{
color:#900;
text-decoration:none;
}
.wrap
{
width:1000px;
margin:0 auto;
}
.logo
{
height:80px;
background-color:#FFF;/*设置logo区域背景为白色*/
}
.logo_left
{
width:200px;
float:left;
}
.logo_right
{
width:300px;
float:right;
height:28px;
margin-top:30px;
color:#8E8E8E;
}
.logo_right img
{
vertical-align:middle;
margin-right:10px;
}
.tel
{
font-family:"微软雅黑";
font-size:16px;
color:#C00;
}
/*页面头部结束*/
.nav
{
height:40px;
}
.nav_left
{
width:10px;
background:url(../images/nav_left.jpg) no-repeat;
/*连写，等同：
background-image:url(../images/nav_left.jpg);
background-repeat:no-repeat;
float:left;
height:40px;*/
}
.nav_mid
{
width:980px;
background:url(../images/nav_bg.jpg) repeat-x;
line-height: 40px;
/*float:left;*/
}
.nav_right
{
width:10px;
background:url(../images/nav_right.jpg) no-repeat;
/*float:left;
height:40px;*/
}
.nav_left,.nav_mid,.nav_right{
float:left;
height:40px;
display: inline;
/*各类有相同代码，可这样连写*/
}
.nav_mid_left,.nav_mid_right
{
float:left;
}
.nav_mid_left
{
width:680px;
}
.nav_mid_right
{
width:300px;
}
.nav_mid_left li
{
float:left;
list-style-type:none;/*清除项目符号*/
width:100px;
text-align:center;
line-height:40px;
}
.nav_mid_left a:link,.nav_mid_left a:visited
{
text-decoration:none;
color:black;
font-size:16px;
font-family:"微软雅黑";
}
.nav_mid_left a:hover,.nav_mid_left a:active
{
text-decoration:none;
color:#FF0;
font-size:16px;
font-family:"微软雅黑";
}
.search_text
{
float: left;
width:190px;
height:25px;
margin-top:5px;
background:url(../images/search.jpg) no-repeat right center;
/*连写，等同：
background-image:url(../images/nav_left.jpg);
background-repeat:no-repeat;
background-position:right center;*/
background-color:#FFF;
padding-right:25px;
border:1px solid #FFF;
}
/*在CSS中没有a和d选项中的属性，list-style-image可以把图像设置为列表中的项目符号；
list-style-type可以设置列表项目符号的不同样式，如：none表示无项目符号，
disc表示实心圆（默认值），circle表示空心圆，square表示实心方块等。*/
.ad
{
height:320px;
margin-top: 5px;
overflow:hidden;/*溢出div就隐藏掉*/
}
.main
{
height:250px;
background-color:#FFF;
margin-top:5px;
}
.news
{
width:340px;
border:1px solid #E8E8E8;
background-color:#9FC;
}
.course
{
width:410px;
border:1px solid #E8E8E8;
background-color:#FF6;
margin:0 7px;
}
.sidebar
{
width:230px;
background-color:#09F;
}
.news,.course,.sidebar{
height:250px;
float:left;
}
.title
{
height:35px;
border-bottom:2px solid #E8E8E8;
}
.title_left
{
width:70%;
font-family:"微软雅黑";
font-size:14px;
font-weight:bold;
color:#786F66;
float:left;
line-height:35px;
padding-left:20px;
}
.title_right
{
width:20%;
float:right;
line-height:35px;
}
.title_right a
{
text-decoration:none;
color:#999999;
}
以上是html和Css文件的代码，图片为效果，希望老师或者同学帮帮忙，谢谢。
写回答
关注
1回答
-
- pardon110
- 2015-10-08 15:34:55
大概看了一下你的js代码，发现一去明显语法错误,标粗如下
myFocus.set({
id:'picbox',
pattern:'mF_fancy',风格应用的名称
time:3,//切换时间间隔(秒)
trigger:'click',//触发切换模式:'click'(点击)/'mouseover'(悬停)
width:1000,//设置图片区域宽度(像素)
height:310,//设置图片区域高度(像素)
txtHeight:'default'//文字层高度设置(像素),'default'为默认高度，0为隐藏
});
</script>
企业网站综合布局实战
本课程重点介绍HTML/CSS实现常见企业网站布局的方法
157081 学习 · 2157 问题
相似问题