焦點圖不能滾動
<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文件的代碼，圖片為效果，希望老師或者同學幫幫忙，謝謝。
2015-10-08
大概看了一下你的js代碼，發現一去明顯語法錯誤,標粗如下
myFocus.set({
????id:'picbox',
????pattern:'mF_fancy',風格應用的名稱
????time:3,//切換時間間隔(秒)
????trigger:'click',//觸發切換模式:'click'(點擊)/'mouseover'(懸停)
????width:1000,//設置圖片區域寬度(像素)
????height:310,//設置圖片區域高度(像素)
????txtHeight:'default'//文字層高度設置(像素),'default'為默認高度，0為隱藏
????});
</script>