问答详情
源自:3-8 企业网站制作之焦点图制作

轮播图只会显示第一张图片,没有切换效果

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Document</title>

<link rel="stylesheet" type="text/css" href="css/main.css">

<link rel="stylesheet" type="text/css" href="css/reset.css">

<script src="js/setHomeSetFav.js" type="text/javascript" charset="gb2312"></script>

<script src="js/myfocus-2.0.1.min.js" type="text/javascript"></script>

<script src="js/mf-pattern/mF_YSlider.js" type="text/javascript"></script>

<link href="js/mf-pattern/mF_YSlider.css" rel="stylesheet" type="text/css" >

<script type="text/javascript">

myFoucus.set({

id:'picBox',

})

</script>

</head>

<body>

<div>

<div>

<ul>

<li><a href="#">联系我们</a></li>

<li><a href="#" onclick="AddFavorite(window.location,document.title)">加入收藏</a></li>

<li><a href="#" onclick="setHomeSet(window.location)"> 设为首页</a></li>

</ul>

</div>

</div>


<div>

<div>

<div>

<img src="img/logo.jpg" alt="慕课网">

</div>

<div>

<img src="img/tel.jpg" alt="服务热线">24小时服务热线:<span>010-123-456</span>

</div>

</div><!--logo结束-->

<div>

<div></div>

<div>

<div>

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

<form action="" method="post">

<input type="text" />

</form>

</div>

</div><!--nav_mid结束-->

<div></div>

</div><!--nav结束-->

<div id="picBox">

   <div>

  <ul>

 <li><img src="img/ad2.jpg"></li>

 <li><img src="img/ad3.jpg"></li>

 <li><img src="img/ad4.jpg"></li>

  </ul>

</div>

</div>

</div>

</body>

</html>





body{margin: 0;font: 14px/1.5 arial,"Microsoft Yahei","Hiragino Sans GB",sans-serif;}

ul,h3,p,input,form,dl,dt,dd{margin: 0;padding: 0;}

li{list-style: none ;}

a{text-decoration: none ;color: #333;display: inline-block;}

i,em{display: inline-block;}

img{border: none ;vertical-align: top;}

input{border: none ;outline: none;background:#fff; }

.fl{float: left;}

.fr{float: right;}

.clear{zoom:1;}

.clear::after{content: "";display: block;clear: both;}

{background-color: #f5f5f5;}

.top

{

width: 100%;

height: 27px;

background: url(../img/top_bg.jpg)repeat-x;

}

.top_content

{

width: 1000px;

margin:0 auto;

}

.top_content li

{

list-style-image: url(../img/li_bg.gif);

float: right;

font-size: 12px;

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;

}

.wrap

{

width: 1000px;

margin: 0 auto;

}

.logo_left

{

width: 200px;

float: left;

}

.logo_right

{

width: 300px;

float: right;

height: 28px;

margin-top: 30px;

color: #8e8e8e;

}   

.logo

{

height: 80px;

background-color: #fff;

}

.logo_right img

{

vertical-align: middle;

margin-right: 4px;

}

.logo_right span

{font-family: "微软雅黑";font-size: 16px;color: red;}

.nav

{

clear: both;

height: 40px;

}

.nav_left

{

width: 10px;

background: url(../img/nav_left.jpg) no-repeat;

}

.nav_mid

{

width: 980px;

background: url(../img/nav_bg.jpg)repeat-x;

}

.nav_right

{

width: 10px;

background: url(../img/nav_right.jpg) no-repeat;

}

.nav_left,.nav_mid,.nav_right

{

float: left;

height: 40px;

}

.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

{

color: #fff;

}

.nav_mid_left a:hover

{

color: yellow;

}

.search_text

{

width: 190px;

height: 28px;

margin-top: 5px;

background: url(../img/search.jpg) no-repeat right center;

background-color: #fff;

padding-right: 25px;

border: 1px solid #fff;

}

.ad

{

height: 310px;

overflow: hidden;

}



提问者:红色恩慈 2017-05-26 00:32

个回答

  • 慕粉4016800
    2017-05-26 16:49:20

    应该是少了一个class为pic的div