焦點圖制作部分---沒有實現(xiàn)圖片輪換
引入的js和css部分:
<script src="setHomeSetFav.js" type="text/javascript" charset="GB2312"></script>
<script src="myfocus-2.0.1.min.js" type="text/javasctipt"></script>
<script src="mf-pattern/mF_fancy.js" type="text/javascript"></script>
<link href="mf-pattern/mF_fancy.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
? ?myFocus.set({
? ? ? ?id:'picBox'
? ?})
</script>
html部分:
<div class="ad" id="picBox">
? ?<div class="pic"></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>
完全是按照老師說的來的,但是結(jié)果只實現(xiàn)了圖片的中下方出現(xiàn)了三個小圓圈,并沒有實現(xiàn)圖片的輪換
2016-08-05
class="pic"的div是要將ul包裹起來,不是單獨放著
2016-08-05
<!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>
<title></title>
<style type="text/css">
.ad {
height: 320px;
margin-top: 5px;
overflow: hidden;
}
</style>
<script type="text/javascript" src="js/myfocus-2.0.1.min.js" 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"/>
<script type="text/javascript">
myFocus.set({
? ? id:'picBox',//焦點圖盒子ID
? ??
});
</script>
</head>
<body>
? ? <div class="ad" id="picBox">
? ? ?
? ? ? <div class="pic">
? ? ? ? <ul>
? ? ? ? ? <li><img src="images/ad2.jpg"/></li>
? ? ? ? ? <li><img src="images/ad3.jpg" /></li>
? ? ? ? ? <li><img src="images/ad4.jpg" /></li>
? ? ? ? </ul>
? ? ? </div>
? </div>
</body>
</html>