网站横幅切换jquery 插件

最近做一个web项目，站点首页需要像百度统计页面类似的切换横幅，有兴趣的可以先看看它的效果，这样就比较容易理解为什么我单独做个插件。其实类似的 jquery 插件网上类似的多的去了，随便网上下了两做了个demo 演示一下，效果不错吗！：）我是在全屏的状态下看的，效果还行，当把屏幕切小之后问题就出来了，屏幕小了之后图片的后面部分显示不出来了，本来的效果应该是如果屏幕小了应该把图片两边不重要的部分隐藏掉，但是由于网上的插件都是直接生成的 img 元素，我的网站页面body元素固定宽度，居中的，所以出现前面说的问题。

怎么办呢，本来想在别的插件基础上改一下，后来看改动比较多，干脆自己写个算了，以后用起来也方便。

我的思路是，首先要实现上面的效果不用 img 元素，我选择了用 span 元素给它添加背景图片，显示方式为 inline-block，这样比较容易。

由于需要切换 span 定位方式为绝对定位，外面包一层 div容器定位方式为 relative 这样在切换的时候只要把要显示的 span 设置为 display: block; ，其余的全部设置为 display: none; 切换就解决了。

然后就是通用性问题，给插件留下灵活的配置项跟事件接口。想了想大概就需要几项吧。

设置项

图片切换间隔时间
动画完成时间
是否自动切换

事件接口

图片切换完成事件
切换到最后一张图片
插件加载完成

思路理清了，下面奉上插件代码：

 /*
 * 横幅切换插件
 * 作者：     封浩
 * 创建日期： 2015-04-03
 * 版本：     v1.0
 */
 (function ($) {
     var mySlider = function (element, options) {
         var settings = $.extend({}, $.fn.switchImg.defaults, options);
         var variables = {
             currentIndex: 0,
             nextIndex: 0,
             total: 0,
             paused: true, //当前切换状态是否停止
             imgHeight: 0,
             operation:"+"//控制移动方向
         };          var slider = $(element);         //图片切换容器
         var sliderContent = $('<div></div>').addClass('nivo-main').width(slider.width());
         //小圆点容器
         var controlNav = $('<div></div>').addClass('nivo-controlNav').attr("data-stop", "true");
         //左右切换按钮容器
         var btnContent = '<div class="nivo-NextContent"><a class="nivo-prevNav" data-opt="-">前进</a><a class="nivo-nextNav" data-opt="+">后退</a><div style="clear: both;"></div></div>';         var bodyWidth = $("body").width();
         var dataDiv = slider.find("div:first-child");
         var self = this;
         var images = dataDiv.find("img");
         images.each(function (i) {
             var child = $(this);
             var link = child.attr("data-link");
             var src = child.attr("src");
             var height = "0", active = "", display = 'inline-block';
             if (i == 0) {
                 variables.imgHeight = height = child.height() === 0 ? child.attr(height) : child.height();
                 active = "active";
             } else {
                 bodyWidth = 0;
                 display = "none";
             }             if ($.trim(link) != "") {
                 sliderContent.append('<a href="' + link + '" rel="external nofollow"  target="_blank"><span style=\"background-image: url(' + src + '); width: ' + bodyWidth + 'px;position: Absolute;height:' + height + 'px;display:' + display + ';" data-bgImg="' + src + '"></span></a>');
             } else {
                 sliderContent.append('<span style=\"background-image: url(' + src + '); width: ' + bodyWidth + 'px;position: Absolute;height:' + height + 'px;display:' + display + ';" data-bgImg="' + src + '"></span>');
             }
             controlNav.append('<a class="nivo-control ' + active + '" rel="' + i + '">' + i + '</a>');
             variables.total++;
         });
         dataDiv.hide();         //加载前事件
         settings.afterLoad();
         slider.append(btnContent);
         slider.append(sliderContent);
         slider.append(controlNav);         $(window).resize(function () {
             var width = $("body").width();
             slider.children('.nav-main').width(width);
             sliderContent.find("span:eq(" + variables.currentIndex + ")").css({ width: width });
         });         initEvent();
         var timer = 0;
         if (images.length > 1 && settings.autoStart) {
             initTime();
         }         var toNext = function () {
             if (variables.nextIndex < 0) {
                 variables.nextIndex = variables.total - 1;
                 settings.lastSlide();
             } else if (variables.nextIndex > variables.total - 1) {
                 variables.nextIndex = 0;
                 settings.lastSlide();
             }
             var nextImg = sliderContent.find("span:eq(" + variables.nextIndex + ")");
             var currentImg = sliderContent.find("span:eq(" + variables.currentIndex + ")");             sliderContent.find("span:eq(" + variables.nextIndex + ")").css({ height: variables.imgHeight, position: 'absolute', width: $("body").width(), top: 0, 'z-index': 4 });             currentImg.stop(true, true);
             nextImg.stop(true, true);             //淡入淡出效果
             currentImg.fadeOut(settings.animateTime);
             nextImg.fadeIn(settings.animateTime, settings.slideshowEnd);
             controlNav.find("a").removeClass("active");
             controlNav.find("a:eq(" + variables.nextIndex + ")").addClass("active");
             variables.currentIndex = variables.nextIndex;
         };         //开始切换
         var switchStart = function (operator) {
             stop();
             if (operator == "+") {
                 variables.nextIndex = variables.currentIndex + 1;
             } else if (operator == "-") {
                 variables.nextIndex = variables.currentIndex - 1;
             }
             toNext();
         }         function initEvent() {
             //小点
             $(".nivo-control", slider).mouseover(function () {
                 var index = parseInt($(this).attr("rel"));
                 variables.nextIndex = index;
                 switchStart("");
             }).mouseout(function () {
                 initTime(variables.operation);
             });             //图片
             $("span", sliderContent).mouseout(function () {
                 initTime(variables.operation);
             }).mouseover(function () {
                 stop();
             });             //上一张,下一张
             $(".nivo-NextContent a", slider).click(function () {
                 variables.operation = $(this).attr("data-opt");
                 settings.autoStart = true;
                 switchStart(variables.operation);
             }).mouseout(function () {
                 initTime(variables.operation);
             });
         }         function initTime(operator) {
             if (variables.paused && settings.autoStart){
                 timer = setInterval(function () {
                     if (operator == "-") {
                         variables.nextIndex--;
                     } else {
                         variables.nextIndex++;
                     }
                     toNext();
                 }, settings.pauseTime);
                 variables.paused = false;
             }
         }         var stop = function () {
             clearInterval(timer);
             variables.paused = true;
         };         return this;
     };     $.fn.switchImg = function (options) {
         return this.each(function () {
             var element = $(this);
             if (element.data('data-switch')) return element.data('data-switch');
             var switchObj = new mySlider(this, options);
             element.data('data-switch', switchObj);
         });
     };     $.fn.switchImg.defaults = {
         pauseTime: 3000,    //图片切换间隔时间
         animateTime: 2000,  //动画完成时间
         autoStart: true,    //是否自动滚动
         slideshowEnd: function () { }, //图片切换完成
         lastSlide: function () { },    //切换到最后一张图片
         afterLoad: function () { }     //插件加载完成
     }; })(jQuery);

调用的时候有几点需要注意的

切换横幅插件数据源必须安装下面的结构书写。
如果想给生成的横幅添加超链接，必须在 img 元素里添加 data-link 属性并指定链接地址。
如果在在 img 元素里添加 height 属性，生成的横幅高度以 height 值为准，否则以第一个图片高度为准。

　　　　<div>

</div>

页面调用示例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>    <script src="../Scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="../Scripts/switch/switch.js"></script>
    <link href="../Scripts/switch/default/default.css" rel="external nofollow"  rel="stylesheet" />
    <style type="text/css">
        .body {
            width: 961px;
            margin: auto;
        }
    </style>    <script type="text/javascript">
        $(function () {
            $("#slider").switchImg({
                pauseTime: 3000,    //图片切换间隔时间
                animateTime: 2000,  //动画完成时间
                autoStart: false,   //是否自动切换
                afterLoad: function () {
                    //alert("开始加载");
                },
                slideshowEnd: function () {//图片切换效果完成
                    //alert("切换完成");
                },
                lastSlide: function () {
                    //alert("切换到最后一张");
                }
            });
        })
    </script>
</head>
<body>     <div id="slider" class="nivoSlider">
        <div>
            <img src="../images/2_02.png" height="399" alt="" />
            <img src="../images/22.png" alt="" />
            <img src="../images/33.png" alt="" data-link="http://www.baidu.com" />
            <img src="../images/1.jpg" alt="" />
        </div>    </div></body>
</html>

插件样式

body {
    padding:;
    margin:;
}.nivoSlider {
    position: relative;
}.nivo-main {
    position: relative;
    height: 399px;
}.nivo-main span {
    background-position: center top;
    display: inline-block;
}.nivoSlider .nivo-prevNav, .nivoSlider .nivo-nextNav {
    cursor: pointer;
}.nivoSlider .nivo-controlNav {
    padding:;
    position: relative;
    text-align: center;
    top: -50px;
    z-index:;
}.nivoSlider .nivo-controlNav .nivo-control {
    background: url("bullets.png") no-repeat scroll 0 0 transparent;
    border: 0 none;
    display: inline-block;
    height: 22px;
    margin: 0 2px;
    text-indent: -9999px;
    width: 22px;
}.nivoSlider .nivo-controlNav .active {
    background: url("bullets.png") no-repeat scroll 0 -22px transparent;
}.nivoSlider .nivo-NextContent {
    position: relative;
    top: 190px;
}.nivoSlider .nivo-NextContent a {
    background: url("arrows.png") no-repeat scroll 0 0 transparent;
    border: 0 none;
    display: block;
    height: 30px;
    text-indent: -9999px;
    width: 30px;
    cursor: pointer;
    position: absolute;
    z-index:;
}.nivoSlider a.nivo-nextNav {
    background-position: 100% 50%;
    right: 20px;
    float: left;
}.nivoSlider a.nivo-prevNav {
    background-position: 0 50%;
    left: auto;
    float: right;
    left: 20px;
}

为了方便大家使用，我把源码打包放到云盘上，欢迎大家下载试用

个人收藏笔记记录

开通VIP