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 相关文章推荐
js的event详解。
Sep 06 Javascript
javascript基础的动画教程,直观易懂
Jan 10 Javascript
修改发贴的编辑功能
Mar 07 Javascript
JS 强制设为首页的代码
Jan 31 Javascript
js最简单的拖拽效果实现代码
Sep 24 Javascript
Knockout text绑定DOM的使用方法
Nov 15 Javascript
JavaScript实现MIPS乘法模拟的方法
Apr 17 Javascript
javascript中判断json的方法总结
Aug 27 Javascript
Bootstrap CSS布局之图像
Dec 17 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
Apr 13 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
Aug 23 Javascript
JavaScript setInterval()与setTimeout()计时器
Dec 27 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开发文档 会员收费1期
2012/08/14 PHP
php+ajax实现文章自动保存的方法
2014/12/30 PHP
php对关联数组循环遍历的实现方法
2015/03/13 PHP
PHP中使用substr()截取字符串出现中文乱码问题该怎么办
2015/10/21 PHP
php基于jquery的ajax技术传递json数据简单实例
2016/04/15 PHP
PHP记录和读取JSON格式日志文件
2016/07/07 PHP
javascript制作loading动画效果 loading效果
2014/01/14 Javascript
Javascript实现飞动广告效果的方法
2015/05/25 Javascript
javascript获取重复次数最多的字符
2015/07/08 Javascript
微信企业号开发之微信考勤百度地图定位
2015/09/11 Javascript
详解Angularjs中的依赖注入
2016/03/11 Javascript
JavaScript解八皇后问题的方法总结
2016/06/12 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
2016/09/16 Javascript
webpack配置文件和常用配置项介绍
2017/04/28 Javascript
js实现点击切换checkbox背景图片的简单实例
2017/05/08 Javascript
Vue.js学习笔记之常用模板语法详解
2017/07/25 Javascript
js单页hash路由原理与应用实战详解
2017/08/14 Javascript
JavaScript基础之this和箭头函数详析
2019/09/05 Javascript
JS如何把字符串转换成json
2020/02/21 Javascript
[26:50]2018完美盛典DOTA2表演赛
2018/12/17 DOTA
详解在Python和IPython中使用Docker
2015/04/28 Python
图文讲解选择排序算法的原理及在Python中的实现
2016/05/04 Python
Python算法之求n个节点不同二叉树个数
2017/10/27 Python
Python设计模式之命令模式简单示例
2018/01/10 Python
python3爬取数据至mysql的方法
2018/06/26 Python
python实现ssh及sftp功能(实例代码)
2020/03/16 Python
python实现npy格式文件转换为txt文件操作
2020/07/01 Python
Python常用模块函数代码汇总解析
2020/08/31 Python
爱他美官方海外旗舰店:Aptamil奶粉
2017/12/22 全球购物
日本最大的旅游网站:Rakuten Travel(乐天旅游)
2018/08/02 全球购物
Lungolivigno Fashion官网:高级时装在线购物
2020/10/17 全球购物
全国优秀教师事迹材料
2014/08/26 职场文书
2014年班组工作总结
2014/11/20 职场文书
五一劳动节慰问信
2015/02/14 职场文书
中小学教师继续教育心得体会
2016/01/19 职场文书
导游词之桂林
2019/08/20 职场文书