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 相关文章推荐
基于jquery插件实现常见的幻灯片效果
Nov 01 Javascript
js通过八个点 拖动改变div大小的实现方法
Mar 05 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
Dec 12 Javascript
JavaScript适配器模式详解
Oct 19 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
Jan 07 Javascript
Vue数据双向绑定原理及简单实现方法
May 18 Javascript
ios设备中angularjs无法改变页面title的解决方法
Sep 13 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
Oct 12 Javascript
vue-loader中引入模板预处理器的实现
Sep 04 Javascript
javascript实现移动端红包雨页面
Jun 23 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
Sep 17 Javascript
利用js实现简易红绿灯
Oct 15 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
DISCUZ 分页代码
2007/01/02 PHP
黑夜路人出的几道php笔试题
2009/08/04 PHP
PHP扩展开发教程(总结)
2015/11/04 PHP
phpinfo() 中 Local Value(局部变量)Master Value(主变量) 的区别
2016/02/03 PHP
Yii控制器中操作视图js的方法
2016/07/04 PHP
使用ucenter实现多站点同步登录的讲解
2019/03/21 PHP
javascript EXCEL 操作类代码
2009/07/30 Javascript
js判断字符长度及中英文数字等
2014/03/19 Javascript
让人蛋疼的JavaScript语法特性
2014/09/30 Javascript
jQuery中appendTo()方法用法实例
2015/01/08 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
2015/08/08 Javascript
jquery动态增加删减表格行特效
2015/11/20 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
2015/11/25 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
浅谈原型对象的常用开发模式
2017/07/22 Javascript
微信小程序实现图片上传放大预览删除代码
2020/06/28 Javascript
微信小程序实现多选删除列表数据功能示例
2019/01/15 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
2019/01/23 Javascript
vue 父组件中调用子组件函数的方法
2019/06/06 Javascript
javascript 易错知识点实例小结
2020/04/25 Javascript
浅谈JS for循环中使用break和continue的区别
2020/07/21 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
2020/08/06 Javascript
微信小程序自定义modal弹窗组件的方法详解
2020/12/20 Javascript
Python中用于去除空格的三个函数的使用小结
2015/04/07 Python
不知道这5种下划线的含义,你就不算真的会Python!
2018/10/09 Python
python实现银行管理系统
2019/10/25 Python
python实现简单日志记录库glog的使用
2019/12/13 Python
手机配件第一品牌:ZAGG
2017/05/28 全球购物
《雪儿》教学反思
2014/04/17 职场文书
岗位说明书怎么写
2014/07/30 职场文书
党支部三严三实对照检查材料思想汇报
2014/09/29 职场文书
关于运动会广播稿300字
2014/10/05 职场文书
2014年度培训工作总结
2014/11/27 职场文书
2015年社区工会工作总结
2015/05/26 职场文书
营销策划分析:怎么策划才能更好销量产品?
2019/09/04 职场文书
如何Tomcat中使用ipv6地址
2022/05/06 Servers