码迷，mamicode.com
首页 > Web开发 > 详细

jQuery banner切换插件

时间：2015-01-05 21:55:43      阅读：281      评论：0      收藏：0      [点我收藏+]

标签：

今天学写了一个基于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 cut
            if(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 cut
            if(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 auto
        function 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 cut
        function 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 init
        function 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: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>


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

<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 cut
            if(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 cut
            if(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 auto
        function 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 cut
        function 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 init
        function 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>

</body>
</html>
展开全部

 

jQuery banner切换插件

标签：

原文地址：http://www.cnblogs.com/cymmint/p/4204592.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！