myFocus焦點圖插件

注意

1.焦點圖初始化ID和圖片最外層ID保持一致

2.圖片列表外面必須包裹一個div，且id必須爲pic

http://demo.jb51.net/js/myfocus/tutorials.html

http://demo.jb51.net/js/myfocus/api.html

 

<script src="js/myfocus-2.0.1.min.js"></script>
<script src="js/mf-pattern/mF_YSlider.js"></script>
<link href="js/mf-pattern/mF_YSlider.css" rel="stylesheet" type="text/css">

<script>
　　myFocus.set({
　　　　id:'picBox'
　　　　pattern:'mF_YSlider'//樣式

　　})
</script>

<div class="ad" id="picBox">

　　<div class="loading">
　　　　<img src="images/loading.gif">
　　</div>

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

 

ps：樣式設計的時候要把多餘的部分隱藏

使用overflow的時候要設置寬度

.ad{ 　　height: 280px; 　　width: 100%; 　　overflow: hidden;}