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

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 div#hovertreeimgcontent); h_hovertreeimgcontent.hide(); var h_hovertreeimgcurrent = h_hovertreeimg.find(>a); h_hovertreeimgcurrent.wrap(
); h_replaceframe = h_hovertreeimg.find(#replaceframe).css({ width: 100%, height: 100% }); //构造圆点框 $('
').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(
); } 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));