jquery Plugin realizes focus picture Carousel switching _jquery with dots

This share of the code is a jquery plug-in, Hovertreeimg is a picture Carousel jquery plug-in, easy to use, can set the size, dot location, etc., Code concise

<! DOCTYPE html>  

Jquery.img.js

/*! * HOVERTREEIMG (jQuery Plugin) * version:1.0.0 * Copyright (c) 2016 Hovertree * * (function ($) {$.fn.hovertreeimg = Fu
      Nction (options) {var settings = $.extend ({h_time: "3000",//Toggle time H_bordercolor: "Transparent",//Border color
      H_width: "500",//Width h_height: "200",//Height H_circlewidth: "18",//Box side length H_circlecolor: "Silver",//DOT Color

    H_currentcirclecolor: "Red",//Current dot color h_circleposition: "Right"//Dot position}, 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%"});
    Construct the Dot box $ (' <div class= ' hovertreeimgpoint ' ></div> '). Appendto (H_HOVERTREEIMG);

    var h_hovertreeimgpoint = H_hovertreeimg.find (". Hovertreeimgpoint"); H_hovertreeimgcontent.prepend (H_hovertreeimgcurrent.clone (True));//Copy to total a set var H_hovertreeimgitems = H_ Hovertreeimgcontent.children ()///all A-tag set var h_hovertreeimglength = h_hovertreeimgitems.length;//All number of carousel items var H_iss

    Witch = true;//whether the var h_circlewidth = parseint (settings.h_circlewidth) is being carousel;

    
    Plus border and interval var h_circleframewidth = (h_circlewidth + 4) * H_HOVERTREEIMGLENGTH+2; H_hovertreeimgpoint.css ({"Height": (h_circlewidth + 4), "position": "Absolute", "bottom": "0px", "Display": " Inline-block "}"//Set dot position 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_circlef
    Ramewidth + "px", "margin": "0px Auto"}) break;
    }//Toggle index var h_hovertreeimgindex = 1;

    if (H_hovertreeimglength < 2) H_hovertreeimgindex = 0; Constructs a dot for (var h_i = 0; h_i < h_hovertreeimglength; h_i++) {h_hovertreeimgpoint.append ("<div Hovertreeim
    Gdata= ' "+ h_i +" ' id= ' hovertreeimgpoint "+ h_i +" ' ></div> "); } H_pointset = H_hovertreeimgpoint.find ("div");//Dot collection h_pointset.css ({"Background-color": settings.h_circle Color, "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 ({"BAC KgrouNd-color ": Settings.h_currentcirclecolor});
      Sets the current picture 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})// The dot Operation H_pointset.hover (function () {H_isswitch = false;//cursor hovers over the dot stops switching Imgswitch (this). attr (' HOVERTREEIMGD
    ATA '));
    The function () {H_isswitch = true;
      }//Toggle SetInterval (function () {if (!h_isswitch) return;
      Imgswitch (H_hovertreeimgindex);
    H_hovertreeimgindex = (h_hovertreeimgindex + 1)% H_hovertreeimglength; }, Settings.h_time//cursor hover to Picture stop toggle H_replaceframe.hover (function () {H_isswitch = false;}, function () {H_ISSWI TCH = true;
 }}} (JQuery));