用js效果做的简单焦点图
/*js代码*/
<script src="js/js/myfocus-2.0.1.min.js" type="text/javascript"></script>
/*选择需要的效果*/
<script src="js/js/mf-pattern/mF_YSlider.js" type="text/javascript"></script>
<link href="js/js/mf-pattern/mF_YSlider.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
myFocus.set({id:'picBox'}) /*调用焦点图中的id*/
pattern:'mF_fancy'; //对应的风格
time:3;//切换图片的时间
width:1000;
height:600;
txtHeight:'default'//文字层高度设置:'default'为默认高度:0为隐藏
</script>
/*html代码*/
<div class="ad" id="picBox">
<div class="loading"><img src="img/loading.gif" alt="图片加载中" /></div>
<div class="pic">
<ul>
<li><a><img src="img/ad2.jpg"/></a></li>
<li><img src="img/ad3.jpg"/></li>
<li><img src="img/ad4.jpg"/></li>
</ul>
</div>
</div>
</div>
/*css代码*/
.ad{height: 310px;
overflow: hidden;
}
myfocus文件中可下载
用js效果做的简单焦点图的更多相关文章
- react.js+easyui 做一个简单的商品表
效果图: import React from 'react'; import { Form, FormField, Layout,DataList,LayoutPanel,Panel, Lab ...
- 【 D3.js 入门系列 --- 3 】 做一个简单的图表!
前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...
- 基于jQuery标题有打字效果的焦点图
给大家分享一款基于jQuery标题有打字效果的焦点图.之前为大家分享了好多jquery的焦点图.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗 ...
- 【 D3.js 入门系列 — 3 】 做一个简单的图表!
图1. 柱形图 1. 柱形图 前几章的例子,都是对文字进行处理.本章中将用 D3 做一个简单的柱形图.制作柱形图有很多种方法,比如用 HTML 的 <div> 标签,或在 SVG 上绘制 ...
- JS - 焦点图
下载地址:http://www.lanrentuku.com/js/jiaodiantu-1076.html 修改焦点图: CSS代码: /* 懒人图库 搜集整理 www.lanrentuku.com ...
- jQuery 焦点图,图像文件js档
jQuery 焦点图,图片文件在js文件里 演示 XML/HTML Code <div id="photo_container"></div> JavaSc ...
- 移动web:图片切换(焦点图)
在web页面上图片切换(焦点图)效果实在是太常见了,PC端.移动端到处都有它的身影. 上次写了个tab选项卡的效果,在这里延续一下,改成图片切换的效果. 如果不需要自动播放,稍微修改下html标签.和 ...
- 首页焦点图myFocus插件
首页焦点图myFocus插件 myFocus特性 小巧却高效强大 myFocus v2.0.min版只有9.89KB,却能使你的网页上可以运行超过30款风格各异的焦点图,在互联网独一无二哦~ 极其 ...
- 基于jQuery仿Flash横向切换焦点图
给各网友分享一款基于jQuery仿Flash横向切换焦点图.利用Flash可以制作很多漂亮的图片相册应用,今天我们要用jQuery来实现这样的效果.它是一款仿Flash的横向图片切换焦点图插件,可以自 ...
随机推荐
- reference
z@z:~$ g++ -std=c++11 ref.cpp ref.cpp:7:10: error: invalid conversion from 'int' to 'int*' [-fpermis ...
- 更改XAMPP中MySQL数据库的端口号
更改XAMPP中MySQL数据库的端口号 如果电脑上已安装MySql数据库,还想用XAMPP中自带的数据库就需要更改XAMPP中数据库的端口号,避免和已安装的数据库冲突.本例以更改为3307端口号为例 ...
- 图解 classpath
先引用几句网上流传的话: 首先 classpath是指 WEB-INF文件夹下的classes目录 classpath 和 classpath* 区别: classpath:只会到你指定的class路 ...
- Android之设置横屏竖屏
方案一:在AndroidManifest.xml中配置 在项目的AndroidManifest.xml中找到你所指定的activity中加上Android:screenOrientation属性,它有 ...
- 串口控RGB三色灯
本文由博主原创,如有不对之处请指明,转载请说明出处. /********************************* 代码功能:串口控RGB三色灯 使用函数: Serial.flush(); / ...
- sql server中自连接的使用
一.用SQL自连接查询处理列之间的关系 SQL自身连接,可以解决很多问题.下面举的一个例子,就是使用了SQL自身连接,它解决了列与列之间的逻辑关系问题,准确的讲是列与列之间的层次关系.SQL代码如下: ...
- ArcMap中地图输出(Options)选项显示不完整
首先,我开始遇到的时候,认为是高分辨屏幕的问题,所以修改了屏幕的分辨率,结果并没有改变. 然后,认为是对话窗口的显示,修改字体大小,也没有显示完整. 最后,是修改了ArcGIS的注册表才解决.解决方式 ...
- 【转】Oracle Database PSU/CPU
转自: http://www.cnblogs.com/ebs-blog/archive/2011/07/28/2167232.html 1. 什么是PSU/CPU?CPU: Critical Patc ...
- 应用程序缓存--manifest
应用程序缓存(Application Cache)为应用带来三个优势: 离线浏览 - 用户可在应用离线时使用它们 速度 - 已缓存资源加载得更快 减少服务器负载 - 浏览器将只从服务器下载更新过或更改 ...
- Objective-C 变量和基本的数据类型
转自:http://blog.csdn.net/mengxiangyue/article/details/11369679 OC中有如下基本数据类型: int:声明整型变量 double:声明双精度变 ...