焦点图的图片切换问题
Dove_1227
2014-12-17 14:41
老师你好，我制作好的网页，按老师讲的应用myFocus，为什么在Google和猎豹浏览器上不能显示切换？我想是不是浏览器上Flash不兼容问题。附上图片，请老指点一下。
部分代码：
<script src="js/myfocus-2.0.1.min.js" type="text/javascript"></script>
<script src="js/mf-pattern/mF_fancy.js" type="text/javascript"></script>
<link href="js/mf-pattern/mF_fancy.css" rel="stylesheet" style="text/css"/>
<script type="text/javascript">
myFocus.set({id:'picBox'});
</script>
8回答
-
- 慕用7077196
- 2015-02-25 11:09:45
另外一个问题就是你的图片不是放在同一个文件夹里的吗？有的写的是images有的写的是imgs
-
- 慕用7077196
- 2015-02-25 11:07:58
link中不是style="text/css"而是type="text/css"
加入收藏：<a href="#" onclick="AddFavorite(windows.location document.title )">加入收藏</a>中间少了“,”
html中，外层div你给了<div class="wrape">
css中，你却写的是.wrap{}
你在调用myFocus.set()时只给了一个盒子的id名，没有设置盒子的宽高
myFocus.set({
id:'picBox',
width:1000,
height:310
});
其他参数：
myFocus.set({
id:'picBox',//焦点图盒子ID
pattern:'mF_fancy',//风格应用的名称
time:3,//切换时间间隔(秒)
trigger:'click',//触发切换模式:'click'(点击)/'mouseover'(悬停)
width:1000,//设置图片区域宽度(像素)
height:310,//设置图片区域高度(像素)
txtHeight:'default'//文字层高度设置(像素),'default'为默认高度，0为隐藏
});
-
- Dove_1227
- 2014-12-17 23:05:20
图片是和老师讲的一样
-
- Dove_1227
- 2014-12-17 23:04:08
CSS代码：
@charset "utf-8";
/* CSS Document */
*{
margin:0;
padding:0;
font-size:12px;
}
body{
background-color:#f5f5f5;
}
.top{
width:100%;
height:27px;
background: url(../imgs/top_bg.jpg) repeat-x;
}
.top-content{
width:1000px;
margin:0 auto;
}
.top-content li{
list-style-image:url(../imgs/li_bg.gif);
float:right;
width:70px;
line-height:27px;
}
.top-content a:link,.top-content a:visited{
color:#8e8e8e;
text-decoration:none;
}
.top-content a:hover,.top-content a:active{
color:red;
}
.all{
width:100%;
margin:0 auto;
background-color:#e8e8e8;
/*padding-top:27px;*/}
.wrap{
width:1000px;
margin:0 auto;
/*background-color:#e8e8e8;*/
}
.logo{
height:80px;
background:#fff;
}
.logo-left{
float:left;
width:200px;
}
.logo-right{
float:right;
width:300px;
height:30px;
margin-top:26px;
color:#8e8e8e;
}
.logo-right img{
vertical-align:middle;
margin-right:10px;
}
.tel{
font-family:"microsoft Yahei";
font-size:12px;
color:#F00;
}
.nav{
height:40px;
}
.nav-left{
width:10px;
background:url(../imgs/nav_left.jpg) no-repeat;
float:left;
height:40px;
}
.nav-middle{
width:980px;
background:url(../imgs/nav_bg.jpg) repeat-x;
float:left;
}
.nav-right{
width:10px;
background:url(../imgs/nav_right.jpg) no-repeat;
float:left;
height:40px;
}
.nav-middle-left,.nav-middle-right{
float:left;
}
.nav-middle-left{
width:680px;
}
.nav-middle-right{
width:300px;
/*margin-top:5px;*/
}
.nav-middle-left li{
float:left;
list-style-type:none;
width:100px;
text-align:center;
line-height:40px;/*行高设为盒子的高度，就可使文字为正中间位置*/
}
/*设置超链接的四种状态*/
.nav-middle-left a:link,.nav-middle-left a:visited{
text-decoration:none;
color:#fff;
font-size:16px;
font-family:"microsoft Yahei";
}
.nav-middle-left a:hover,.nav-middle-left a:active{
text-decoration:none;
color:#ff0;
font-size:16px;
font-family:"microsoft Yahei";
}
.search{
width:190px;
height:25px;
margin-top:8px;
background:url(../imgs/search.jpg) no-repeat right center;
background-color:#FFF;
padding-right:25px;
border:1px solid #FFF;
}
.ad{
height:310px;
overflow:hidden;
}
.main{
height:250px;
background-color:#FFF;
margin-top:5px;
}
.news{
width:340px;
border:1px solid #e8e8e8;
/*background-color:#3CC;*/
}
.course{
width:410px;
border:1px solid #e8e8e8;
/*background-color:#9C9;*/
margin:0 7px;
}
.sidebar{
width:230px;
/*background-color:#3CC;*/
}
.news,.course,.sidebar{
height:250px;
float:left;
}
.title{
height:35px;
border-bottom:2px solid #e8e8e8;
}
.title-left{
width:70%;
font-family:"microsoft Yahei";
font-size:14px;
font-weight:bold;
color:#786f66;
float:left;
line-height:35px;
padding-left:20px;
}
.title-right{
width:20%;
line-height:35px;
text-decoration:none;
font-size:16px;
float:right;
}
.title-right a{
color:#999999;
}
.pic-news{
height:80px;
margin-top:10px;
line-height:22px;
}
.pic-news img,.course-pic img{
float:left;
margin:0 8px;
}
.pic-news a,.course-pic a{
color:#c00;
text-decoration:none;
}
.news-list,.course-type{
margin-top:20px;
}
.news-list li{
list-style-type:none;
background:url(../imgs/list.jpg) no-repeat;
padding-left:10px;
margin:8px 8px;
border-bottom:1px dotted #ccc;
/*font-size:36px;*/
}
.news-list a:link,.news-list a:visited{
font-size:14px;
text-decoration:none;
color:#000;
}
.news-list a:hover,.news-list a:active{
font-size:14px;
text-decoration:none;
color:#F00;
}
.date{
/*padding-left:10px;*/
float:right;
color:#999;
}
.course-pic{
height:120px;
margin-top:10px;
line-height:22px;
}
.course-type{
width:372px;
height:72px;
margin:20px auto;
background:url(../imgs/product_type_bg.jpg) no-repeat;
}
.course-type li{
float:left;
list-style-type:none;
line-height:37px;
margin:0 15px;
}
.course-type a:link,.course-type a:visited{
font-size:18px;
text-decoration:none;
color:#000;
}
.course-type a:hover,.course-type a:active{
font-size:20px;
text-decoration:none;
color:#F00;
}
.video{
height:150px;
border:1px solid #e8e8e8;
}
.video-cont{
height:150px;
}
.sidebar-ad{
height:55px;
border:1px solid #e8e8e8;
margin-top:35px;
}
.copyright{
width:100%;
height:200px;
background-color:#e8e8e8;
margin-top:2px;
clear:both;
}
.copyright-cont{
width:1000px;
margin:0 auto;
padding-top:20px;
}
.copyright-cont li{
list-style-type:none;
float:left;
width:200px;
background:url(../imgs/line.png) no-repeat right center;
text-align:center;
line-height:30px;
font-family:"microsoft Yahei";
}
.copyright-cont a{
text-decoration:none;
font-size:19px;
color:#996;
}
.copyright-cont li ul li a{
font-size:14px;
}
.picture{
border:1px solid #e8e8e8;
}
.ap{
height:310px;
/*overflow:hidden;*/
}
.news-list-main{
min-height:350px;
_height:350;
/*margin: 0 auto;*/
background-color:#fff;
margin-top:10px;
}
.news-type{
width:220px;
height:350px;
border:1px solid #e8e8e8;
/*background-color:#039;*/
float:left;
}
.news-box{
width:770px;
min-height:350px;
_height:350px;
border:1px solid #e8e8e8;
/*background-color:#FCF;*/
float:right;
}
.news-type h2{
height:35px;
line-height:35px;
font-size:16px;
font-family:"microsoft Yahei";
color:#C03;
padding-left:20px;
background:url(../imgs/titile_bg.gif) repeat-x;
}
.news-type-cont{
height:365px;
background:url(../imgs/content_bg.gif) repeat-x;
}
.news-type-cont li{
list-style-type:none;
height:30px;
line-height:30px;
text-shadow:#6C3;
border-bottom:1px dotted #C9C;
}
.news-type-cont li a{
color:#0C3;
text-decoration:none;
background:url(../imgs/li_bg.gif) no-repeat left center;
padding-left:10px;
display:block;
font-size:13px;
font-family:"microsoft Yahei";
}
.news-type-cont li a:hover{
color:blue;
background:url(../imgs/li_bg2.gif) no-repeat left center;
background-color:#f2f2f2;
}
.news-box h2{
height:35px;
line-height:35px;
font-size:14px;
font-family:"microsoft Yahei";
color:#666;
padding-left:20px;
background:url(../imgs/type_bg.png) repeat-x;
}
-
- Dove_1227
- 2014-12-17 23:01:54
</div>
<div class="all">
<div class="wrape">
<div class="logo">
<div class="logo-left">
<img src="imgs/logo_meitu_1.jpg" alt="科技"/>
</div>
<div class="logo-right">
<img src="imgs/tel.jpg" alt="时间"/>：近段时间<span class="tel">182-7071-6335</span>
</div>
</div>
-
- Dove_1227
- 2014-12-17 22:55:45
<body>
<div class="top">
<div class="top-content">
<ul>
<li><a href="#">联系我们</a></li>
<li><a href="#" onclick="AddFavorite(windows.location document.title )">加入收藏</a></li>
<li><a href="#" onclick="SetHome(windows.location)">设为主页</a></li>
</ul>
</div>
-
- Dove_1227
- 2014-12-17 22:53:26
全部代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>科技</title>
<link href="css/main.css" rel="stylesheet" style="text/css"/>
<script type="text/javascript" src="js/setHomeSetFav.js" charset="gb2312"></script>
<script src="js/myfocus-2.0.1.min.js" type="text/javascript"></script>
<script src="js/mf-pattern/mF_fancy.js" type="text/javascript"></script>
<link href="js/mf-pattern/mF_fancy.css" rel="stylesheet" style="text/css"/>
<script type="text/javascript">
myFocus.set({id:'picBox'});
</script>
</head>
IE10上有时可以用，好奇怪，Google和猎豹两个浏览器不行。弄了好久，好烦啊，谢谢你啊！
-
- 赵小布
- 2014-12-17 15:37:21
贴上全部的代码，我可以帮你调试。
企业网站综合布局实战
157042 学习 · 1984 问题
相似问题