/*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. MySQL for Windows 解压缩版安装 和 多实例安装

    MySQL 5.6 for Windows 解压缩版配置安装 http://jingyan.baidu.com/album/f3ad7d0ffc061a09c3345bf0.html?picindex ...

  2. MySQL for Visual Studio Version

    MySQL for Visual Studio Version Connector/Net Version Supported Visual Studio Version Supported MySQ ...

  3. python之路-Mysql&&ORM

    1. 数据库介绍 什么是数据库? 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库, 每个数据库都有一个或多个不同的API用于创建,访问,管理,搜索和复制所保存的数据. 我们也可以 ...

  4. Slyx_SerAddGet

    ##通道##119.29.192.206:12002## ##通道##58.221.49.24:12002##

  5. 在CentOS上搭建Storm集群

    Here's a summary of the steps for setting up a Storm cluster: Set up a Zookeeper clusterInstall depe ...

  6. Apache伪静态在网站目录没有反斜杠后自动添加反斜杠

    第一步:确认网站开启REWRITE规则 一般有两种情况: i.apache安装的时候已经包含rewrite功能 ii.后续配置的时候新添加mod_rewrite.so.这种情况需要在httpd.con ...

  7. StringUtils方法全集

    org.apache.commons.lang.StringUtils中方法的操作对象是java.lang.String类型的对象,是JDK提供的String类型操作方法的补充,并且是null安全的( ...

  8. Web应用定时任务实现

    一.需求: 项目上有时需要执行一些定时任务,比如:超过2天未处理的问题,邮件自动通知客服.对接人:3天未处理的问题,邮件自动通知客服.对接人和项目经理,同时标为‘紧急’状态:5天未处理的问题,邮件自动 ...

  9. 第一章 删掉centos原有的openjdk并安装sun jdk

    一.卸载原有openjdk rpm -qa | grep java 之后,将展示出来的全部卸载掉,我这里是5个 rpm -e --nodeps java-1.7.0-openjdk-1.7.0.111 ...

  10. DBCP数据源连接池实现原理分析

    前些天在调试公司系统的时候发现这样的一个问题:mysql数据库服务停止一段时间后再次重启后吗,tomcat服务无法请求数据库服务,调试了半天对这个问题进行定位解决,期间也搞了很多有关mysql数据库的 ...