這次分享的代碼是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"http://圓點位置 }, 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));新聞熱點
疑難解答
