注意

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="data:images/loading.gif">
  </div>

  <div class="pic">
    <ul>
      <li><img src="data:images/ad2.jpg"></li>
      <li><img src="data:images/ad3.jpg"></li>
      <li><img src="data:images/ad4.jpg"></li>
    </ul>
  </div>
</div><!--ad-->

ps:样式设计的时候要把多余的部分隐藏

使用overflow的时候要设置宽度

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

myFocus焦点图插件的更多相关文章

  1. Jquery插件使用 焦点图插件 MyFocus ,另外记录一款插件 KinMaxShow大背景图插件。

    以前用flash做首页图片轮播.最近的网站里用到一个插件MyFocus插件焦点图插件 用法如下: <script type="text/javascript">     ...

  2. 基于jQuery的宽屏可左右切换的焦点图插件

    之前分享了很多实用的jQuery焦点图插件,大家可以看看.今天要继续为大家分享一款很不错的jQuery焦点图插件,它是宽屏展示的,而且有两个大气的按钮用来左右切换图片.效果图如下: 在线预览   源码 ...

  3. 一款基于jQuery多图切换焦点图插件

    这次要给大家分享的也是一款jQuery图片滑块插件,之前有介绍过不少实用的jQuery焦点图插件和jQuery图片滑块插件,比如jQuery左侧Tab切换的图片滑块插件.它的特点是可以同时切换多张图片 ...

  4. 基于jQuery的美食时间轴焦点图插件

    这是一款非常炫酷的jQuery焦点图插件,这款jQuery焦点图的特点是有一个时间轴,点击切换按钮时,时间轴会逐渐移动,时间轴上的图片也会逐渐切换.另外,在图片上方也可以放置自定义样式的文字. 在线预 ...

  5. 分享10款常用的jQuery焦点图插件

    爱编程一直在收集整理编程相关的知识和解决方案,今天小编为大家带来10款非常常用的jquery焦点图插件. 1.jQuery可自动播放动画的焦点图插件 之前我们已经分享过很多非常实用的jQuery焦点图 ...

  6. 一款基于jQuery的图片分组切换焦点图插件

    这是一款基于jQuery的图片切换焦点图插件,这款jQuery焦点图插件的特点是图片可以分组切换,也就是说一次可以切换多张图片,相比其他焦点图插件,它能节省更多的空间,可以向用户展示更多的图片,非常实 ...

  7. 分享8个常用的jQuery焦点图插件

    现在web网页jquery应用越来越广泛,目前几乎每一个WEB项目都在使用jQuery,因为jQuery插件实在太丰富,尤其是一些图片滑块插件和jQuery焦点图插件,更是多如牛毛,很多初学者只需稍微 ...

  8. 一款基于的jQuery仿苹果样式焦点图插件

    这次我们要分享的这款jQuery焦点图非常特别,它的外观特别简单,但是又相当大气.焦点图的整体样式是仿苹果样式的,由于jQuery的运用,我们只要点击图片下方的缩略图即可达到图片切换的焦点图特效,这款 ...

  9. 一款基于jQuery的图片下滑切换焦点图插件

    之前为大家分享了好多款jquery插件,今天我们要分享的一款jQuery插件也比较实用,是一款jQuery焦点图插件.焦点图相当普通,一共可以循环播放4张图片,并且每一张图片在切换的时候都是向下滑动的 ...

随机推荐

  1. jdk与cglib的动态代理

    JDK动态代理中包含一个类和一个接口: InvocationHandler接口: public interface InvocationHandler { public Object invoke(O ...

  2. R for installing package 'omg'

    The time i have tried to install the package named 'PODBC'  and it worked. But now i meet a problem ...

  3. MVC 中集成 AngularJS1

    在 ASP.NET MVC 中集成 AngularJS(1)   介绍 当涉及到计算机软件的开发时,我想运用所有的最新技术.例如,前端使用最新的 JavaScript 技术,服务器端使用最新的基于 R ...

  4. Jsonp 解决跨域问题

    话不多说直接贴代码: $.ajax({ async: false, url: 'http://****.****.com/Handler.ashx?vueId=iwNavpicS2', type: & ...

  5. oldboy第二天学习

    一.上课体验及感受 第二天上课了,从循环到队列,感觉都可以接受,但是当循环遇到队列之后感觉脑袋就有点不够用了.不知道是因为萌新的问题.每个人都这样,还是个人能力不行.总而言之加油努力吧!! 二.循环, ...

  6. QT文档如何使用

    http://blog.csdn.net/chenlong12580/article/details/7389588

  7. 【C++基础之十一】虚函数的用法

    虚函数的作用和意义,就不进行说明了,这里主要讨论下虚函数的用法. 1.典型的虚函数用法 可以看到,只有标识为virtual的函数才会产生多态的效果,而且是编译多态.它只能借助指针或者引用来达到多态的效 ...

  8. tarjan缩点

    整理了下模板... #include<iostream> #include<cstdio> #include<cmath> #include<algorith ...

  9. 华为u8800+ root 还是不能删除自带软件

    下载个RE文件管理器 进入RE文件管理器后把上面的只读改成读写(ROOT过的点一下上面的只读就可以了) 再进入cust文件夹然后f---/cn/app 在这个文件夹里长按你要删除的定制软件 出来有个删 ...

  10. HDU_2030——统计文本中汉字的个数

    Problem Description 统计给定文本文件中汉字的个数.   Input 输入文件首先包含一个整数n,表示测试实例的个数,然后是n段文本.   Output 对于每一段文本,输出其中的汉 ...