myfocus,焦点图

<div id="boxID"><!--焦点图盒子-->
      <div class="loading"><img src="images/loading.gif" alt="请稍候..." /></div>
      <!--载入画面(可删除)-->
      <div class="pic"><!--内容列表(li数目可随意增减)-->
        <ul>
          <li><a href="#"><img src="images/ad2.jpg" thumb="" text="详细描述2" /></a></li>
          <li><a href="#"><img src="images/ad3.jpg" thumb="" text="详细描述3" /></a></li>
          <li><a href="#"><img src="images/ad4.jpg" thumb="" text="详细描述4" /></a></li>
          <li><a href="#"><img src="images/ad3.jpg" thumb="" text="详细描述5" /></a></li>
        </ul>
      </div>
    </div>

///////////////////////

<script type="text/javascript">
myFocus.set({
    id:‘boxID‘,//焦点图盒子ID
    pattern:‘mF_fancy‘,//风格应用的名称
    time:3,//切换时间间隔(秒)
    trigger:‘click‘,//触发切换模式:‘click‘(点击)/‘mouseover‘(悬停)
    width:1000,//设置图片区域宽度(像素)
    height:310,//设置图片区域高度(像素)
    txtHeight:‘default‘//文字层高度设置(像素),‘default‘为默认高度,0为隐藏
});
</script>

时间: 2024-10-11 15:01:42

myfocus,焦点图的相关文章

基于jQuery带标题的图片3D切换焦点图

今天给大家分享一款基于jQuery带标题的图片3D切换焦点图.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 在线预览   源码下载 实现的代码. html代码: <div id="wowslider-container"> <div class="ws_images"> <ul> <li><a href="#"> &

一款基于jQuery的支持鼠标拖拽滑动焦点图

记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错.今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即可切换图片. 在线预览   源码下载 实现的代码. html代码: <div class="main_visual"> <div class="flicking_con"> <a class="on" href=&quo

分享大麦UWP版本开发历程-01.响应式轮播顶部焦点图

话说有一天,临近下班无心工作,在网上看各种文章,阅读到了一篇名为<聊聊大麦网UWP版的首页顶部图片联动效果的实现方法>(传递:http://www.cnblogs.com/hippieZhou/p/4755290.html),看到别人评论自己做的产品,顿时来了兴趣,阅读过后,hippieZhou童鞋基本把这个自动轮播控件的原理精髓都讲到了,我就在这里,顺着Zhou同学的文章,接着分享一下更细节一点的东西. 今天要跟大家分享的,就是这个简单的控件,在响应式布局里面做的工作.其中有用过微软提供的X

JS - 焦点图

下载地址:http://www.lanrentuku.com/js/jiaodiantu-1076.html 修改焦点图: CSS代码: /* 懒人图库 搜集整理 www.lanrentuku.com */ /*焦点图*/ /*-------------------------------此处修改整体的大小(width:960px; height:500px;)-----------------------------------*/ .focus{ position:relative; wid

基于jq流畅度非常好的图片左右切换焦点图

今天给大家分享一款基于jq流畅度非常好的图片左右切换焦点图.这是一款基于jQuery实现的支持鼠标拖动切换jQuery特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="filters hidden"> <defs> <filter id="blur"

基于jquery左侧带选项卡切换的焦点图

今天给大家分享一款基于jquery左侧带选项卡切换的焦点图.这款焦点图左侧有短标题,单击切换并显示长标题.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="film_focus"> <div class="film_focus_desc"> <h3> 标题1</h3> <ul class="film_focus_nav"> <li clas

jquery可播放视频的焦点图

jquery可播放视频的焦点图,设计简洁优雅,支持左右翻页,支持暂停焦点图,焦点图左上角的标题可替换.视频支持全屏播放和静音.JS代码 源于:http://www.huiyi8.com/js/jiaodiantu/

jquery自动焦点图

效果预览:http://runjs.cn/detail/vydinibc  带左右箭头的自动焦点图:http://runjs.cn/detail/wr1d1keh html: <div class="recommend"> <div class="pic" id="fade"> <ul> <li><a href="#"><img src="http:/

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

给各网友分享一款基于jQuery仿Flash横向切换焦点图.利用Flash可以制作很多漂亮的图片相册应用,今天我们要用jQuery来实现这样的效果.它是一款仿Flash的横向图片切换焦点图插件,可以自动切换图片,也可以点击导航按钮来切换至指定的图片.该jQuery焦点图使用非常简单,而且切换效果也相当流畅.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="slide-holder"> <div id="slide-runn