jQuery banner切换插件

今天学写了一个基于jQuery焦点图切换插件，有不对的地方还请多多指教，不多说下面是代码：

 

1、引jQuery库

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

 

2、Html部分

<!--Focus Html-->
<div class="s_focus"><ul class="f_img"><li style="background-image:url(http://www.cnhippo.com/images/new_room.jpg);"><a href="#"></a></li><li style="background-image:url(http://www.cnhippo.com/images/christmas_day.jpg);"><a href="#"></a></li><li style="background-image:url(http://www.cnhippo.com/images/reg_banner.jpg);"><a href="#"></a></li></ul>
</div>

 

3、CSS部分

<style>
/*Test - Can be deleted*/
*    { margin:0; padding:0; list-style:none;}
body { padding-top:50px;}/*CSS*/
.s_focus            { position:relative; z-index:1; width:100%; min-width:940px; height:350px; padding:1px 0; border:1px solid #d9d9d9; border-width:1px 0; overflow:hidden;}
.s_focus .f_img     { display:block; position:relative; z-index:1; width:100%; height:100%;}
.s_focus .f_dot     { display:block; position:absolute; z-index:3; left:50%; bottom:15px; width:100px; height:10px; overflow:hidden;}
.s_focus .f_d_bg    { position:absolute; z-index:2; width:100%; height:40px; left:0; bottom:1px; _bottom:0; background:#FFF; filter:alpha(opacity=30); opacity:0.3; box-shadow:0 -1px 3px #999;}
.f_img li         { display:none;  position:absolute; z-index:2; top:0; left:0; width:100%; height:100%; background:#fff no-repeat center 0;}
.f_img li.on      { display:block;}
.f_img li a       { display:block; width:100%; height:100%;}
.f_dot a          { float:left; display:block; width:10px; height:100%; margin-right:10px; border-radius:50%; background:#ccc; filter:alpha(opacity=30); opacity:1; overflow:hidden;}
.f_dot a.on,
.f_dot a:hover    { background:#09f;}
.s_focus .f_prev,
.s_focus .f_next   { display:none; position:absolute; top:50%; filter:alpha(opacity=15); opacity:0.15; width:36px; height:70px; margin-top:-35px; background:#000; z-index:5; color:#fff; text-decoration:none; line-height:70px; text-align:center; font-family:"宋体"; font-size:18px;}
.s_focus .f_prev   { left:50px;}
.s_focus .f_next   { right:50px;}
.s_focus .f_next:hover,
.s_focus .f_prev:hover { filter:alpha(opacity=25); opacity:0.25;}
</style>

 

4、JS插件部分

<script>
/**** Copyright (c) 2015 http://www.cnblogs.com/cymmint/* Ver: SFocus() 0.1* Date: 2015-01-05* Author: cymmint* Function: SFocus是基本jQuery的banner(焦点图)切换插件，可以通过参数配置Box宽高，* 点的大小、位置，是否显示Prev,Next,Dot以及Dot背景条，* 首次显示等几张banner等*/
(function($){$.fn.SFocus = function(opts){var defaults = {oBoxWidth : "100%", //Silde width
            oBoxHeight: 350, //Silde heigh
            isOpenDBg : false, //open dot background bar
            isOpenDot : true, //open do
            isOpenPN  : true, //open prev/next
            dotWidth  : 10, //dot width
            dotHeight : 10, //dot heigh
            dotLeft   : "50%", //dot left offse
            dotBottom : 16, //dot bottom offse
            time      : 3500, //cut time interval
            onset     : 0, //Silde focus img onset index
            cutEvent  : "mouseenter" //Slide dot cut even
            };var opts = $.extend(defaults, opts);return this.each(function(){var obox     = $(this),img      = obox.find("ul.f_img li"),sum      = img.length,cur_id   = opts.onset >= sum ? 0 : opts.onset,new_id   = cur_id == sum-1 ? 0 : cur_id+1,T        = 0;//Html init 
            init(obox, sum, cur_id);//Dot cutif(opts.isOpenDot) {var dot = obox.find("div.f_dot a");dot.on(opts.cutEvent, function(){clearInterval(T);if ($(this).hasClass("on")) {return false;}cur_id = img.parent().find(".on").index();new_id = $(this).index();cut(cur_id, new_id, img, dot);});}//Prev&Next cutif(opts.isOpenPN) {var prev = obox.find("a.f_prev"),next = obox.find("a.f_next");prev.on("click", function(){clearInterval(T);cur_id = img.parent().find(".on").index();new_id = cur_id - 1;new_id = new_id < 0 ? sum-1 : new_id;cut(cur_id, new_id, img, dot);});next.on("click", function(){clearInterval(T);cur_id = img.parent().find(".on").index();new_id = cur_id + 1;new_id = new_id >= sum ? 0 : new_id;cut(cur_id, new_id, img, dot);});}obox.hover(function(){clearInterval(T);if(opts.isOpenPN) {prev.show();next.show();}}, function(){T = setInterval(function(){ auto(img, dot, sum);}, opts.time);if(opts.isOpenPN) {prev.hide();next.hide();}});//Slide run auto
            T = setInterval(function(){ auto(img, dot, sum);}, opts.time);});//Slide run autofunction auto(img, dot, sum){var cur_id = img.parent().find(".on").index(),new_id = cur_id + 1;new_id = new_id >= sum ? 0 : new_id;cut(cur_id, new_id, img, dot);}//Slide cutfunction cut(cur_id, new_id, img, dot){if(opts.isOpenDot) {dot.removeClass("on").eq(new_id).addClass("on");}img.eq(cur_id).stop(true, false).fadeOut(300);img.eq(new_id).stop(true, true).fadeIn(300);img.removeClass("on").eq(new_id).addClass("on");}//Html initfunction init(obox, sum, cur_id){var htm = "",dot,img;if(opts.isOpenDBg) {htm = '<div class="f_d_bg"></div>';}if(opts.isOpenDot) {htm += '<div class="f_dot">';for(var i=0; i<sum; i++) {htm += i == cur_id ? '<a class="on" href="javascript:;"></a>' : '<a href="javascript:;"></a>';}htm += '</div>';}if(opts.isOpenPN) {htm += '<a class="f_prev" href="javascript:;">&lt;</a><a class="f_next" href="javascript:;">&gt;</a>';}obox.append(htm);img = obox.find("ul.f_img");dot = obox.find("div.f_dot");if (!$.support.leadingWhitespace) {obox.find("a").attr("hidefocus", true);}obox.css({"width":opts.oBoxWidth, "height":opts.oBoxHeight});img.children().removeClass("on").eq(cur_id).addClass("on")dot.children().css({"width":opts.dotWidth, "height":opts.dotHeight});dot.css({"width":dot.children().eq(0).outerWidth(true) * sum, "height":opts.dotHeight, "left":opts.dotLeft, "bottom":opts.dotBottom, "marginLeft": -(dot.width()-10)/2});
        }}})(jQuery);
</script>

 

5、引用插件

<script>
$(function(){$("div.s_focus").SFocus({oBoxWidth : 500,oBoxHeight: 300});
});
</script>

 

6、全部代码

这是最新修改后的代码，上面的就不改了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Focus</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script></head><body><!--Focus Html-->
<div class="s_focus"><ul class="f_img"><li style="background-image:url(http://www.cnhippo.com/images/new_room.jpg);"><a href="#"></a></li><li style="background-image:url(http://www.cnhippo.com/images/christmas_day.jpg);"><a href="#"></a></li><li style="background-image:url(http://www.cnhippo.com/images/reg_banner.jpg);"><a href="#"></a></li></ul>
</div><style>
/*Test - Can be deleted*/
*    { margin:0; padding:0; list-style:none; outline:none;}
body { padding-top:50px;}/*CSS*/
.s_focus            { position:relative; z-index:1; width:100%; min-width:940px; height:350px; padding:1px 0; border:1px solid #d9d9d9; border-width:1px 0; overflow:hidden;}
.s_focus .f_img     { display:block; position:relative; z-index:1; width:100%; height:100%;}
.s_focus .f_dot     { display:block; position:absolute; z-index:3; left:50%; bottom:15px; width:100px; height:10px; overflow:hidden;}
.s_focus .f_d_bg    { position:absolute; z-index:2; width:100%; height:40px; left:0; bottom:1px; _bottom:0; background:#FFF; filter:alpha(opacity=30); opacity:0.3; box-shadow:0 -1px 3px #999;}
.f_img li         { display:none; position:absolute; z-index:1; top:0; left:0; width:100%; height:100%; background:#fff no-repeat center 0;}
.f_img li a       { display:block; width:100%; height:100%;}
.f_dot a          { float:left; display:block; width:10px; height:100%; margin-right:10px; border-radius:50%; background:#ccc; overflow:hidden;}
.f_dot a.on,
.f_dot a:hover    { background:#09f;}
.s_focus .f_prev,
.s_focus .f_next   { display:none; position:absolute; top:50%; filter:alpha(opacity=15); opacity:0.15; width:36px; height:70px; margin-top:-35px; background:#000; z-index:5; color:#fff; text-decoration:none; line-height:70px; text-align:center; font-family:"宋体"; font-size:18px;}
.s_focus .f_prev   { left:50px;}
.s_focus .f_next   { right:50px;}
.s_focus .f_next:hover,
.s_focus .f_prev:hover { filter:alpha(opacity=25); opacity:0.25;}
</style><script>
$(function(){$("div.s_focus").SFocus({oBoxWidth : 500,oBoxHeight: 300,onset : 2});
});
</script><script>
/**** Copyright (c) 2015 http://www.cnblogs.com/cymmint/* Ver: SFocus() 0.2* Date: 2015-01-06* Author: cymmint* Function: SFocus是基本jQuery的banner(焦点图)切换插件，可以通过参数配置Box宽高，* 点的大小、位置，是否显示Prev,Next,Dot以及Dot背景条，* 首次显示等几张banner等*/
(function($){$.fn.SFocus = function(opts){var defaults = {oBoxWidth : "100%", //Silde width
            oBoxHeight: 350, //Silde heigh
            isOpenDBg : false, //open dot background bar
            isOpenDot : true, //open do
            isOpenPN  : true, //open prev/next
            dotWidth  : 10, //dot width
            dotHeight : 10, //dot heigh
            dotLeft   : "50%", //dot left offse
            dotBottom : 16, //dot bottom offse
            time      : 3500, //cut time interval
            onset     : 0, //Silde focus img onset index
            cutEvent  : "mouseenter" //Slide dot cut even
            };var opts = $.extend(defaults, opts);return this.each(function(){var obox     = $(this),img      = obox.find("ul.f_img li"),sum      = img.length,cur_id   = opts.onset >= sum ? 0 : opts.onset,new_id   = cur_id == sum-1 ? 0 : cur_id+1,T        = 0;//Html init 
            init(obox, sum, cur_id);//Dot cutif(opts.isOpenDot) {var dot = obox.find("div.f_dot a");dot.on(opts.cutEvent, function(){clearInterval(T);if ($(this).hasClass("on")) {return false;}cur_id = img.parent().find(".on").index();new_id = $(this).index();cut(cur_id, new_id, img, dot);});}//Prev&Next cutif(opts.isOpenPN) {var prev = obox.find("a.f_prev"),next = obox.find("a.f_next");prev.on("click", function(){clearInterval(T);cur_id = img.parent().find(".on").index();new_id = cur_id - 1;new_id = new_id < 0 ? sum-1 : new_id;cut(cur_id, new_id, img, dot);});next.on("click", function(){clearInterval(T);cur_id = img.parent().find(".on").index();new_id = cur_id + 1;new_id = new_id >= sum ? 0 : new_id;cut(cur_id, new_id, img, dot);});}obox.hover(function(){clearInterval(T);if(opts.isOpenPN) {prev.show();next.show();}}, function(){T = setInterval(function(){ auto(img, dot, sum);}, opts.time);if(opts.isOpenPN) {prev.hide();next.hide();}});//Slide run auto
            T = setInterval(function(){ auto(img, dot, sum);}, opts.time);});//Slide run autofunction auto(img, dot, sum){var cur_id = img.parent().find(".on").index(),new_id = cur_id + 1;new_id = new_id >= sum ? 0 : new_id;cut(cur_id, new_id, img, dot);}//Slide cutfunction cut(cur_id, new_id, img, dot){if(opts.isOpenDot) {dot.removeClass("on").eq(new_id).addClass("on");}img.finish();img.removeClass("on");img.eq(cur_id).css("zIndex", 1);img.eq(new_id).addClass("on").css("zIndex",2);img.eq(new_id).stop(true, false).fadeIn(500, function(){img.eq(cur_id).hide();});}//Html initfunction init(obox, sum, cur_id){var htm = "",dot,img;if(opts.isOpenDBg) {htm = '<div class="f_d_bg"></div>';}if(opts.isOpenDot) {htm += '<div class="f_dot">';for(var i=0; i<sum; i++) {htm += i == cur_id ? '<a class="on" href="javascript:;"></a>' : '<a href="javascript:;"></a>';}htm += '</div>';}if(opts.isOpenPN) {htm += '<a class="f_prev" href="javascript:;">&lt;</a><a class="f_next" href="javascript:;">&gt;</a>';}obox.append(htm);img = obox.find("ul.f_img");dot = obox.find("div.f_dot");if (!$.support.leadingWhitespace) {obox.find("a").attr("hidefocus", true);}obox.css({"width":opts.oBoxWidth, "height":opts.oBoxHeight});img.children().eq(cur_id).addClass("on").css({"display":"list-item", "zIndex":2});dot.children().css({"width":opts.dotWidth, "height":opts.dotHeight});dot.css({"width":dot.children().eq(0).outerWidth(true) * sum, "height":opts.dotHeight, "left":opts.dotLeft, "bottom":opts.dotBottom, "marginLeft": -(dot.width()-10)/2});
        }}})(jQuery);
</script></body>
</html>