myFocus焦点图插件

注意css

1.焦点图初始化ID和图片最外层ID保持一致html

2.图片列表外面必须包裹一个div,且id必须为picapi

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

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

 

<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">.net

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

  })
</script>

htm

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

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

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

相关文章
相关标签/搜索