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 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>

展开全部

时间： 2024-12-28 19:29:09

jQuery banner切换插件的相关文章

jQuery图片切换插件jquery.cycle.js

Cycle是一个很棒的jQuery图片切换插件,提供了很好的功能来帮助大家更简单的使用插件的幻灯功能 下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后. <head> <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> <script type="text/javascript" src

推荐几款jquery图片切换插件

一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利用静态网页的形式进行展示. 二.用到的四个免费的jquery插件 注:都是网上免费的,自己测试过了,挺好用的,顺便改了改. 1.3D Change 下载地址:https://github.com/hjzgg/picture_show/tree/master/3D_change 效果展示 2.Samp

FlexSlider是一个非常出色的jQuery滑动切换插件

FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所有初级和高级网页设计师使用.不过很多人都只是使用默认的参数,今天来说说具体的参数来给大家看看! $(window).load(function() { $('.flexslider').flexslider({ animation: "fade", //String: Select your animation type, "fade" or "sl

jquery简单切换插件

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" conte

jquery 按钮切换插件

样式: 点击第二个按钮,弹出回调函数.然后改变颜色. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="t-Switch.css"> </head> <

jquery.cycle.js图片切换插件参数详解

jquery.cycle.js是jquery的一个插件,主要用来实现千奇百怪的图片切换效果---当然,不是图片也能切换,只是它经常被用来做图片切换而已:这个插件总共有27种效果,是非常好的插件,用到手机版开发是很好的插件来的: 当然jquery.cycle.js的强大远不止于此,下面列举一些它的基本参数: fx:'fade'>值:字符串,作用:选择特效.切换效果是它的重头戏,我统计过,jquery.cycle.js支持27种切换效果,我一一进行了测试,列举在jquery.cycle.js切换特效

基于jQuery的对象切换插件：soChange 1.5 (点击下载)

http://www.jsfoot.com/jquery/demo/2011-09-20/192.html 所有参数: $(obj).soChange({     thumbObj:null, //导航对象,默认为空     botPrev:null, //按钮上一个,默认为空     botNext:null, //按钮下一个.默认为空     thumbNowClass:'now', //导航对象当前的class,默认为now     thumbOverEvent:true,//鼠标经过th

基于jQuery全屏焦点图切换插件responsiveslides

基于jQuery全屏焦点图切换插件responsiveslides是一款带左右箭头,索引按钮的自动轮播切换特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <script type="text/javascript"> $(function () { // Slideshow $("#slider").responsiveSlides({ auto: true, pager: false, nav: true, speed:

基于jquery仿天猫分类导航banner切换

分享一款基于jquery天猫分类导航banner切换.这是一款仿最新天猫商品分类导航控制banner图片切换代码.效果图如下: 在线预览   源码下载 部分代码: <div class="yHeader"> <div class="yNavIndex"> <div class="pullDown"> <h2 class="pullDownTitle"> 所有商品分类 </h