/*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效果做的简单焦点图的更多相关文章

  1. react.js+easyui 做一个简单的商品表

    效果图:     import React from 'react'; import { Form, FormField, Layout,DataList,LayoutPanel,Panel, Lab ...

  2. 【 D3.js 入门系列 --- 3 】 做一个简单的图表!

    前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...

  3. 基于jQuery标题有打字效果的焦点图

    给大家分享一款基于jQuery标题有打字效果的焦点图.之前为大家分享了好多jquery的焦点图.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗 ...

  4. 【 D3.js 入门系列 — 3 】 做一个简单的图表!

    图1. 柱形图 1. 柱形图 前几章的例子,都是对文字进行处理.本章中将用 D3 做一个简单的柱形图.制作柱形图有很多种方法,比如用 HTML 的 <div> 标签,或在 SVG 上绘制 ...

  5. JS - 焦点图

    下载地址:http://www.lanrentuku.com/js/jiaodiantu-1076.html 修改焦点图: CSS代码: /* 懒人图库 搜集整理 www.lanrentuku.com ...

  6. jQuery 焦点图,图像文件js档

    jQuery 焦点图,图片文件在js文件里 演示 XML/HTML Code <div id="photo_container"></div> JavaSc ...

  7. 移动web:图片切换(焦点图)

    在web页面上图片切换(焦点图)效果实在是太常见了,PC端.移动端到处都有它的身影. 上次写了个tab选项卡的效果,在这里延续一下,改成图片切换的效果. 如果不需要自动播放,稍微修改下html标签.和 ...

  8. 首页焦点图myFocus插件

    首页焦点图myFocus插件   myFocus特性 小巧却高效强大 myFocus v2.0.min版只有9.89KB,却能使你的网页上可以运行超过30款风格各异的焦点图,在互联网独一无二哦~ 极其 ...

  9. 基于jQuery仿Flash横向切换焦点图

    给各网友分享一款基于jQuery仿Flash横向切换焦点图.利用Flash可以制作很多漂亮的图片相册应用,今天我们要用jQuery来实现这样的效果.它是一款仿Flash的横向图片切换焦点图插件,可以自 ...

随机推荐

  1. DataSnap 2009 系列之三 (生命周期篇)

    DataSnap 2009 系列之三 (生命周期篇) DataSnap 2009的服务器对象的生命周期依赖于DSServerClass组件的设置 当DSServer启动时从DSServerClass组 ...

  2. egrep 及扩展正则表达式

    grep -E 表示支持扩展的正则表达式 grep -E = egrep 一.字符匹配: 扩展模式下的字符匹配与基本正则表达式的字符匹配相同,如: . 表示任意单个字符 [] 表示范围内人任意单个字符 ...

  3. Delphi 完整的Bug决议工具EurekaLog的使用

     http://blog.csdn.net/akof1314/article/details/6968587 Delphi 完整的Bug决议工具EurekaLog的使用 标签: delphi工具ftp ...

  4. Android菜鸟成长记7 -- Android的五大布局

    Android五大布局,相信android的都了解过,今天我根据自己的学习整理一下五大布局,主要介绍的是线性布局(LiearLayout),因为,其他的布局使用率不是很高. Android的五大布局 ...

  5. 数据库imp导表dmp的方法

    1>sqlplus / as sysdba 进入sqlplus 2>drop user USER cascade 3>create user USER IDENTIFIED BY P ...

  6. JSP(include指令)页面

    <%@ page language= "java" contentType="text/html;charset=UTF-8" %><html ...

  7. JavaScript 数组冒泡排序练习

    12.29下午主要讲的是简单的一维数组 和数组中利用冒泡排序排列大小 比如有 数字 0.5  20   1   5   4   3   6   利用冒泡排序按照从小到大的顺序排列 var arr=ne ...

  8. SQL Server 通用分页存储过程

    create proc commonPagination ), --要显示的列名,用逗号隔开 ), --要查询的表名 ), --排序的列名 ), --排序的方式,升序为asc,降序为 desc ), ...

  9. NGUI 灰化按钮或图标

    在游戏中某些地方可能需要对按钮进行灰化显示,从而表示不能点击!在网上找了一下有些方法是直接用UITexture+灰化shader去做这件事!另外有些方案写的不太清楚,看不懂!不过也基本都是要使用灰化s ...

  10. Ajax 知识点

    AJAX 即"Asynchronous Javascript And XML"(异步JavaScript和XML) Ajax 不是某种编程语言,只是一种在无需重新加载整个网页的情况 ...