为了账号安全,请及时绑定邮箱和手机立即绑定

焦点图的图片切换问题

老师你好,我制作好的网页,按老师讲的应用myFocus,为什么在Google和猎豹浏览器上不能显示切换?我想是不是浏览器上Flash不兼容问题。附上图片,请老指点一下。549125520001a71a05000256.jpg

部分代码:

<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 回答

另外一个问题就是你的图片不是放在同一个文件夹里的吗?有的写的是images有的写的是imgs

0 回复 有任何疑惑可以回复我~
#1

慕用7077196

这个忽略,我看错了,你是改了几张图片的名字
2015-02-25 回复 有任何疑惑可以回复我~
  1. link中不是style="text/css"而是type="text/css"

  2. 加入收藏:<a href="#" onclick="AddFavorite(windows.location document.title )">加入收藏</a>中间少了“,”

  3. html中,外层div你给了<div class="wrape">

    css中,你却写的是.wrap{}

  4. 你在调用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为隐藏

    });

1 回复 有任何疑惑可以回复我~

图片是和老师讲的一样

0 回复 有任何疑惑可以回复我~

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;

}





0 回复 有任何疑惑可以回复我~

</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>


0 回复 有任何疑惑可以回复我~

<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>


      

0 回复 有任何疑惑可以回复我~

全部代码:

<!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和猎豹两个浏览器不行。弄了好久,好烦啊,谢谢你啊!



0 回复 有任何疑惑可以回复我~

贴上全部的代码,我可以帮你调试。

0 回复 有任何疑惑可以回复我~
#1

Dove_1227 提问者

看看我的问题,已经附上代码了,忘了附在这上面了,谢谢你帮我解答啊
2014-12-17 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

焦点图的图片切换问题

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信