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="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焦点图插件的更多相关文章
- Jquery插件使用 焦点图插件 MyFocus ,另外记录一款插件 KinMaxShow大背景图插件。
以前用flash做首页图片轮播.最近的网站里用到一个插件MyFocus插件焦点图插件 用法如下: <script type="text/javascript"> ...
- 基于jQuery的宽屏可左右切换的焦点图插件
之前分享了很多实用的jQuery焦点图插件,大家可以看看.今天要继续为大家分享一款很不错的jQuery焦点图插件,它是宽屏展示的,而且有两个大气的按钮用来左右切换图片.效果图如下: 在线预览 源码 ...
- 一款基于jQuery多图切换焦点图插件
这次要给大家分享的也是一款jQuery图片滑块插件,之前有介绍过不少实用的jQuery焦点图插件和jQuery图片滑块插件,比如jQuery左侧Tab切换的图片滑块插件.它的特点是可以同时切换多张图片 ...
- 基于jQuery的美食时间轴焦点图插件
这是一款非常炫酷的jQuery焦点图插件,这款jQuery焦点图的特点是有一个时间轴,点击切换按钮时,时间轴会逐渐移动,时间轴上的图片也会逐渐切换.另外,在图片上方也可以放置自定义样式的文字. 在线预 ...
- 分享10款常用的jQuery焦点图插件
爱编程一直在收集整理编程相关的知识和解决方案,今天小编为大家带来10款非常常用的jquery焦点图插件. 1.jQuery可自动播放动画的焦点图插件 之前我们已经分享过很多非常实用的jQuery焦点图 ...
- 一款基于jQuery的图片分组切换焦点图插件
这是一款基于jQuery的图片切换焦点图插件,这款jQuery焦点图插件的特点是图片可以分组切换,也就是说一次可以切换多张图片,相比其他焦点图插件,它能节省更多的空间,可以向用户展示更多的图片,非常实 ...
- 分享8个常用的jQuery焦点图插件
现在web网页jquery应用越来越广泛,目前几乎每一个WEB项目都在使用jQuery,因为jQuery插件实在太丰富,尤其是一些图片滑块插件和jQuery焦点图插件,更是多如牛毛,很多初学者只需稍微 ...
- 一款基于的jQuery仿苹果样式焦点图插件
这次我们要分享的这款jQuery焦点图非常特别,它的外观特别简单,但是又相当大气.焦点图的整体样式是仿苹果样式的,由于jQuery的运用,我们只要点击图片下方的缩略图即可达到图片切换的焦点图特效,这款 ...
- 一款基于jQuery的图片下滑切换焦点图插件
之前为大家分享了好多款jquery插件,今天我们要分享的一款jQuery插件也比较实用,是一款jQuery焦点图插件.焦点图相当普通,一共可以循环播放4张图片,并且每一张图片在切换的时候都是向下滑动的 ...
随机推荐
- angular启动过程分析
启动过程 步骤一 用自执行函数在代码完成加载后立即执行 function(window, document, undefined) 在window上暴露一个唯一的全局对象angular,Line250 ...
- ES6-2
向ES6看齐,用更好的JavaScript(二) 上一篇 中介绍了关于变量部分的新特性,本篇将从现有对象的拓展来展开介绍 1 增加了模板字符串 先看一下,ES6之前我们是如何实现输出模板的: do ...
- javaWeb实现使用邮箱邮件找回密码功能
JSP+Jmail+JavaBean 发邮件(转)2010-08-23 18:052007年04月14日 14:32/* * SendMail.java * * Created on 2007年3月3 ...
- 标签 Attribute
在一个类上面放一个标签,可以用来表示一些特定规则,比如某个对象的某个属性不想被json化,那么我们在它头上放个标签就行了,或是做ORM时指定某个Class对应的table名字等. 最后标签是通过反射来 ...
- mysql主从复制错误:Last_SQL_Error: Error 'Duplicate entry '327' for key 'PRIMARY'' on query. Default database: 'xxx'. Query: 'insert into
这个算不算解决,我都不太清楚,因为我感觉网上的说法,只是把错误忽略了,不表示以后用从库时不会出问题!!! 解决的办法是在从库上执行: mysql> slave stop; mysql> s ...
- sql Sever 修改表中的列名
EXEC SP_RENAME 'LeInterface.iYear','iLeYear','COLUMN' EXEC SP_RENAME 'LeInterface.imonth','iLemonth' ...
- HDU_2057——64位无符号16进制数的运算
Problem Description There must be many A + B problems in our HDOJ , now a new one is coming. Give yo ...
- 在JavaScript函数式编程里使用Map和Reduce方法
所有人都谈论道workflows支持ECMAScript6里出现的令人吃惊的新特性,因此我们很容易忘掉ECMAScript5带给我们一些很棒的工具方法来支持在JavaScript里进行函数编程,这些工 ...
- Spark standalone安装(最小化集群部署)
Spark standalone安装-最小化集群部署(Spark官方建议使用Standalone模式) 集群规划: 主机 IP ...
- Shell脚本常用命令简介
格式化日期yyyy-mm-dd hh:mm:ss显示 date "+%Y-%m-%d %H:%M:%S" 将内容写入到新文件 echo "hello">a ...