jQuery插件实现带圆点的焦点图片轮播切换


Posted in Javascript onJanuary 18, 2016

这次分享的代码是jQuery插件,HovertreeImg是一个图片轮播jquery插件,使用方便,可以设置大小,圆点位置等,代码简洁

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <base target="_blank" />
  <meta charset="utf-8" />
  <style>#img {width:768px;height:66px;overflow:hidden}
#img img{width:100%;height:100%;}
#img #imgcontent{display:none}a{color:blue}</style>
</head>
<body>
  <div id="img">
    <a href="/h/bjaf/hovertreeimg.htm" title="Img" target="_blank"><img src="/jq/img/img.jpg" alt="Img插件" /></a>
    <div id="imgcontent">
      <a href="/h/bjaf/easysector.htm" title="HTML5百分比饼图" target="_blank"><img src="/themes/img/easysector.gif" alt="EasySector插件" /></a>
      <a href="/texiao/game/" title="见缝插针" target="_blank"><img src="/themes/img/jfcz.gif" alt="见缝插针" /></a>
     </div>
  </div>
  <div>
    <br /><br />
</div>
   
  <script src="/ziyuan/jquery/jquery-1.12.0.min.js"></script>
  <script src="/jq/hovertreeimg/jquery.img.js"></script>
  <script>
    $("#img").hovertreeimg({
      "h_circlePosition": "",//left,right,center
      "h_width": 768,
      "h_height": 66,
      "h_borderColor":"silver",
      "h_circleWidth": 14      
    });
  </script>
</body>
</html>

jquery.img.js

/*!
* HovertreeImg(jQuery Plugin)
* version: 1.0.0
* Copyright (c) 2016 HoverTree 
*/
(function ($) {
  $.fn.hovertreeimg = function (options) {

    var settings = $.extend({
      h_time:"3000",//切换时间
      h_borderColor: "transparent",//边框颜色
      h_width: "500",//宽度
      h_height: "200",//高度
      h_circleWidth: "18",//方框边长
      h_circleColor:"silver",//圆点颜色
      h_currentCircleColor: "red",//当前圆点颜色
      h_circlePosition:"right"//圆点位置
    }, options);

    var h_hovertreeimg = $(this);
    if (h_hovertreeimg.length < 1)
      return;

    h_hovertreeimg.css({
      "position": "relative", "border":"solid 1px "+ settings.h_borderColor
      , "width": settings.h_width, "height": settings.h_height
      , "overflow": "hidden"
    })

    var h_hovertreeimgcontent = h_hovertreeimg.find(">div#hovertreeimgcontent");
    h_hovertreeimgcontent.hide();

    var h_hovertreeimgcurrent = h_hovertreeimg.find(">a");
    h_hovertreeimgcurrent.wrap("<div id='replaceframe'></div>");
    h_replaceFrame = h_hovertreeimg.find("#replaceframe").css({ "width": "100%", "height": "100%" });

    //构造圆点框
    $('<div class="hovertreeimgpoint"></div>').appendTo(h_hovertreeimg);
    var h_hovertreeimgpoint = h_hovertreeimg.find(".hovertreeimgpoint");

    h_hovertreeimgcontent.prepend(h_hovertreeimgcurrent.clone(true));//复制到总a集合
    var h_hovertreeimgitems = h_hovertreeimgcontent.children();//所有a标签集合
    var h_hovertreeimglength = h_hovertreeimgitems.length;//所有轮播项数量
    var h_isswitch = true;//是否轮播


    var h_circleWidth = parseInt(settings.h_circleWidth);

    //加边框与间隔
    var h_circleFrameWidth = (h_circleWidth + 4) * h_hovertreeimglength+2;

    
    h_hovertreeimgpoint.css({
      "height": (h_circleWidth + 4), "position": "absolute", "bottom": "0px",
      "display": "inline-block"
    })
    //设置圆点位置
    switch (settings.h_circlePosition) {
      case 'right':
        h_hovertreeimgpoint.css({
          "right": "0px"
        })
        break;
      case 'left':
        h_hovertreeimgpoint.css({
          "left": "0px"
        })
        break;
      default:
        h_hovertreeimgpoint.css({
          "left": "0px",
          "right": "0px",
          "width": h_circleFrameWidth + "px",
          "margin": "0px auto"
        })
        break;
    }

    //切换索引
    var h_hovertreeimgindex = 1;
    if (h_hovertreeimglength < 2)
      h_hovertreeimgindex = 0;

    //构造圆点
    for (var h_i = 0; h_i < h_hovertreeimglength; h_i++) {
      h_hovertreeimgpoint.append("<div hovertreeimgdata='" + h_i + "' id='hovertreeimgpoint" + h_i + "'></div>");
    }
    h_pointset = h_hovertreeimgpoint.find("div");//圆点集合
    h_pointset.css({
      "background-color": settings.h_circleColor, "width": settings.h_circleWidth
      , "height": settings.h_circleWidth
    , "border": "1px solid white"
      , "margin-left": "2px",
      "display": "inline-block",
      "border-radius": "50%"
    })
    h_pointset.eq(0).css({ "background-color": settings.h_currentCircleColor });

    
    //设置当前图片
    function imgswitch(imgindex) {
      h_replaceFrame.html(h_hovertreeimgitems.eq(imgindex));
      h_pointset.css({ "background-color": settings.h_circleColor });
      h_pointset.eq(imgindex).css({ "background-color": settings.h_currentCircleColor });
    }

    h_replaceFrame.find("img").css({
      "width": settings.h_width
      , "height": settings.h_height
    })

    //圆点操作
    h_pointset.hover(function () {
      h_isswitch = false;//光标悬停到圆点停止切换
      imgswitch($(this).attr('hovertreeimgdata'));
    }
    , function () {
      h_isswitch = true;
    }
    )

    //切换
    setInterval(function () {
      if (!h_isswitch)
        return;
      imgswitch(h_hovertreeimgindex);
      h_hovertreeimgindex = (h_hovertreeimgindex + 1) % h_hovertreeimglength;
    }, settings.h_time)

    //光标悬停到图片停止切换
    h_replaceFrame.hover(function () { h_isswitch = false; }, function () { h_isswitch = true; })

  }
}(jQuery));
Javascript 相关文章推荐
浅析document.createDocumentFragment()与js效率
Jul 08 Javascript
jQuery 复合选择器应用的几个例子
Sep 11 Javascript
js设置document.domain实现跨域的注意点分析
May 21 Javascript
js强制把网址设为默认首页
Sep 29 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
Nov 24 Javascript
易操作的jQuery表单提示插件
Dec 01 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
May 20 Javascript
jQuery中extend函数简单用法示例
Oct 11 jQuery
Angular之toDoList的实现代码示例
Dec 02 Javascript
服务端预渲染之Nuxt(使用篇)
Apr 08 Javascript
解决layui数据表格table的横向滚动条显示问题
Sep 04 Javascript
微信小程序实现购物车功能
Nov 18 Javascript
轻松实现js图片预览功能
Jan 18 #Javascript
jQuery插件Validate实现自定义表单验证
Jan 18 #Javascript
Jquery和angularjs获取check框选中的值的方法汇总
Jan 17 #Javascript
node.js+express制作网页计算器
Jan 17 #Javascript
JQuery实现网页右侧随动广告特效
Jan 17 #Javascript
Validform+layer实现漂亮的表单验证特效
Jan 17 #Javascript
javascript实现倒计时跳转页面
Jan 17 #Javascript
You might like
FCKeditor添加自定义按钮
2008/03/27 PHP
PHP如何抛出异常处理错误
2011/03/02 PHP
PHP实现数组array转换成xml的方法
2016/07/19 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
extjs 为某个事件设置拦截器
2010/01/15 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
2015/03/09 Javascript
jQuery找出网页上最高元素的方法
2015/03/20 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
2016/06/08 Javascript
jquery把int类型转换成字符串类型的方法
2016/10/07 Javascript
关于 jQuery Easyui异步加载tree的问题解析
2016/12/06 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
2017/07/24 Javascript
js中的闭包学习心得
2018/02/06 Javascript
对vue下点击事件传参和不传参的区别详解
2018/09/15 Javascript
使用Sonarqube扫描Javascript代码的示例
2018/12/26 Javascript
聊聊Vue中provide/inject的应用详解
2019/11/10 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
2020/04/20 Javascript
JS自定义右键菜单实现代码解析
2020/07/16 Javascript
详解Python之数据序列化(json、pickle、shelve)
2017/03/30 Python
Python排序搜索基本算法之堆排序实例详解
2017/12/08 Python
解决pycharm无法识别本地site-packages的问题
2018/10/13 Python
python 多线程对post请求服务器测试并发的方法
2019/06/13 Python
Python FFT合成波形的实例
2019/12/04 Python
Python3读写Excel文件(使用xlrd,xlsxwriter,openpyxl3种方式读写实例与优劣)
2020/02/13 Python
Keras模型转成tensorflow的.pb操作
2020/07/06 Python
Python lxml库的简单介绍及基本使用讲解
2020/12/22 Python
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
Java里面Pass by value和Pass by Reference是什么意思
2016/05/02 面试题
小学语文国培感言
2014/03/04 职场文书
金融学专业大学生职业生涯规划
2014/03/07 职场文书
竞赛口号大全
2014/06/16 职场文书
宣传标语大全
2014/07/01 职场文书
幼儿教师师德师风自我剖析材料
2014/09/29 职场文书
关于观后感的作文
2015/06/18 职场文书
MySQL 如何分析查询性能
2021/05/12 MySQL
php 文件上传至OSS及删除远程阿里云OSS文件
2021/07/04 PHP
MySQL创建管理KEY分区
2022/04/13 MySQL