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 相关文章推荐
Javascript 二维数组
Nov 26 Javascript
关于jQuery中的end()使用方法
Jul 10 Javascript
jquery模拟按下回车实现代码
Sep 20 Javascript
jquery控制display属性为none或block
Mar 31 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
Aug 27 Javascript
js实现图片无缝滚动
Dec 23 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
Jan 23 Javascript
Vue插槽原理与用法详解
Mar 05 Javascript
vue cli4下环境变量和模式示例详解
Apr 09 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 Javascript
JavaScript进阶(一)变量声明提升实例分析
May 09 Javascript
javascript实现前端成语点击验证优化
Jun 24 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 数组遍历方法大全(foreach,list,each)
2010/06/30 PHP
解析MySql与Java的时间类型
2013/06/22 PHP
Smarty中调用FCKeditor的方法
2014/10/27 PHP
WordPress中登陆后关闭登陆页面及设置用户不可见栏目
2015/12/31 PHP
PHP删除二维数组中相同元素及数组重复值的方法示例
2017/05/05 PHP
form表单中去掉默认的enter键提交并绑定js方法实现代码
2013/04/01 Javascript
javascript中比较字符串是否相等的方法
2013/07/23 Javascript
自己使用jquery写的一个无缝滚动的插件
2014/04/30 Javascript
JavaScript 经典实例日常收集整理(常用经典)
2016/03/30 Javascript
基于Javascript倒计时效果
2016/12/22 Javascript
微信小程序 tabs选项卡效果的实现
2017/01/05 Javascript
js实现滑动到页面底部自动加载更多功能
2017/02/15 Javascript
分享十三个最佳JavaScript数据网格库
2017/04/07 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
Javascript实现页面滚动时导航智能定位
2017/05/06 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
2017/05/25 Javascript
JS实现图片预览的两种方式
2017/06/27 Javascript
vue-router动态设置页面title的实例讲解
2018/08/30 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
2019/05/09 Javascript
node使用request请求的方法
2019/12/20 Javascript
jquery实现进度条状态展示
2020/03/26 jQuery
Javascript异步编程async实现过程详解
2020/04/02 Javascript
Python实现爬虫爬取NBA数据功能示例
2018/05/28 Python
Python使用Selenium模块模拟浏览器抓取斗鱼直播间信息示例
2018/07/18 Python
解决python3读取Python2存储的pickle文件问题
2018/10/25 Python
python 获取一个值在某个区间的指定倍数的值方法
2018/11/12 Python
Django 源码WSGI剖析过程详解
2019/08/05 Python
pycharm 安装JPype的教程
2019/08/08 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
Django REST Framework 分页(Pagination)详解
2020/11/30 Python
CSS3动画效果回调处理详解
2014/12/10 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
2014/06/16 HTML / CSS
十岁生日答谢词
2015/01/05 职场文书
数学考试作弊检讨书300字
2015/02/16 职场文书
使用Oracle命令进行数据库备份与还原
2021/12/06 Oracle
你知道Java Spring的两种事务吗
2022/03/16 Java/Android