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 相关文章推荐
飞鱼(shqlsl) javascript作品集
Dec 16 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
Feb 05 Javascript
在ASP.NET中使用JavaScript脚本的方法
Nov 12 Javascript
点击button获取text内容并改变样式的js实现
Sep 09 Javascript
JavaScript 里的类数组对象
Apr 08 Javascript
js实现鼠标滑过文字链接色彩变化的效果
May 06 Javascript
jquery带下拉菜单和焦点图代码分享
Aug 24 Javascript
JQuery Ajax WebService传递参数的简单实例
Nov 02 Javascript
bootstrap选项卡扩展功能详解
Jun 14 Javascript
vue2.x select2 指令封装详解
Oct 12 Javascript
JS实现非首屏图片延迟加载的示例
Jan 06 Javascript
vue结合Echarts实现点击高亮效果的示例
Mar 17 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
如何在PHP中使用Oracle数据库(1)
2006/10/09 PHP
特详细的PHPMYADMIN简明安装教程
2008/08/01 PHP
PHP中通过加号合并数组的一个简单方法分享
2011/01/27 PHP
3款值得推荐的微信开发开源框架
2014/10/28 PHP
分享一则PHP定义函数代码
2015/02/26 PHP
twig模板常用语句实例小结
2016/02/04 PHP
Ajax实现对静态页面的文章访问统计功能示例
2016/10/10 PHP
Yii 2.0自带的验证码使用经验分享
2017/06/19 PHP
ThinkPHP删除栏目(实现批量删除栏目)
2017/06/21 PHP
laravel5实现微信第三方登录功能
2018/12/06 PHP
关于JavaScript命名空间的一些心得
2014/06/07 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
2016/03/18 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
2017/07/12 jQuery
javascript计算对象长度的方法
2017/10/25 Javascript
vue-cli配置文件——config篇
2018/01/04 Javascript
JavaScript指定断点操作实例教程
2018/09/18 Javascript
深入理解vue中的slot与slot-scope
2019/04/22 Javascript
vue不操作dom实现图片轮播的示例代码
2019/12/18 Javascript
原生js实现点击轮播切换图片
2020/02/11 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
2020/08/13 Javascript
基于elementUI竖向表格、和并列的案例
2020/10/26 Javascript
[02:05]DOTA2完美大师赛趣味视频之看我表演
2017/11/18 DOTA
Python模拟百度登录实例详解
2016/01/20 Python
用Python批量把文件复制到另一个文件夹的实现方法
2019/08/16 Python
keras实现基于孪生网络的图片相似度计算方式
2020/06/11 Python
python处理写入数据代码讲解
2020/10/22 Python
ParcelABC西班牙:包裹运送和快递服务
2019/12/24 全球购物
自荐书格式
2013/12/01 职场文书
大学迎新晚会主持词
2014/03/24 职场文书
团队激励口号
2014/06/06 职场文书
公司授权委托书
2014/10/17 职场文书
信息技术国培研修日志
2015/11/13 职场文书
工作建议书范文
2019/07/08 职场文书
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL
Kubernetes关键组件与结构组成介绍
2022/03/31 Servers