jQuery组图轮播插件

来源：互联网发布：python数字识别编辑：程序博客网时间：2024/06/05 02:23

从来没写过插件，自己随便写的一个，可能不太规范，仅供参考

CSS：

@charset "utf-8";body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, table, th, td, tr,a{    margin: 0;    padding: 0;  }.top { width:100%; height:60px; background-color:#FFF; }.content { width:100%; height:600px; position:relative; overflow:hidden;}.ban_z { width:100%; height:600px; overflow:hidden; position:relative;  }.ban_z li { width:100%; height:600px; float:left; text-align:center; line-height:600px; font-size:96px; list-style:none;}.bg_01 { background:#8B3F5D; background-position:center; background-repeat:no-repeat; }.bg_02 { background:#5F3E8D; background-position:center; background-repeat:no-repeat; }.bg_03 { background:#43C6E2; background-position:center; background-repeat:no-repeat; }.bg_04 { background:#BFB62B; background-position:center; background-repeat:no-repeat; }.bg_05 { background:#4D7E2C; background-position:center; background-repeat:no-repeat; }.prev { position: absolute; left: 100px; top: 50%; cursor: pointer; }.next { position: absolute; right: 100px; top: 50%; cursor: pointer; }

HTML：

<body>    <!--top-->    <div class="top">    </div>    <!--banner-->    <div class="content">        <ul class="ban_z">            <li class="bg_01">1</li>            <li class="bg_02">2</li>            <li class="bg_03">3</li>            <li class="bg_04">4</li>            <li class="bg_05">5</li>        </ul>        <img src="image/arrow2.png" class="prev" alt="上一页" />        <img src="image/arrow1.png" class="next" alt="下一页" />    </div></body>

JS:

(function ($) {            $.fn.defaultOptions = {                "mode": "scroll",                "isAutomaticSwitching": true,                "intervalTime": 3000,                "animateSpeed": 400,                "prevClass": "prev",                "nextClass": "next"            };            $.fn.controlsMove = function (options) {                var opts = $.extend({}, $.fn.defaultOptions, options);                opts.intervalTime = opts.intervalTime || $.fn.defaultOptions.intervalTime;  //为空取默认值                opts.animateSpeed = opts.animateSpeed || $.fn.defaultOptions.animateSpeed;                opts.prevClass = opts.prevClass || $.fn.defaultOptions.prevClass;                opts.nextClass = opts.nextClass || $.fn.defaultOptions.nextClass;                _index = 0;                var _this = this;                var $ul = $(_this).find("ul:first");    //ul对象                var $li = $ul.find("li");               //li对象                var _li_count = $li.size();             //获取li的数量                var $prev = $("." + opts.prevClass);                var $next = $("." + opts.nextClass);                var _setIntervalObj;    //计时器对象                setWidth();                jQuery(window).resize(setWidth);    //窗体大小改变  重新设置宽度和ul左偏移的坐标                //设置箭头的位置                setArrow();                _setIntervalObj = setInterval(Rotation, opts.intervalTime);                function setWidth() {                    var _nav_width = $(_this).width();  //获取显示部分的宽度                    $li.css({ "width": _nav_width });   //设置li宽度                    _li_width = $li.outerWidth(true);   //获取li的最终宽度 包括margin、边框等                    $ul.css({ "width": _li_width * _li_count, "left": -(_li_width * _index) });    //重新计算并设置ul的宽度                }                //设置箭头位置                function setArrow() {                    var _arrowTop = ($li.height() - $prev.height()) / 2;                    $prev.css({ "top": _arrowTop }).hide();                    $next.css({ "top": _arrowTop }).hide();                }                //设置箭头淡入淡出                $(this).hover(function () {                    clearInterval(_setIntervalObj);                    $prev.stop(false, true).fadeIn(300); $next.stop(false, true).fadeIn(300);                }, function () {                    $prev.stop(false, true).fadeOut(300); $next.stop(false, true).fadeOut(300);                    _setIntervalObj = setInterval(Rotation, opts.intervalTime);                });                //单击箭头切换                $prev.click(function () {                    if (_index > 0 && _index <= _li_count && !$ul.is(":animated")) {                        $ul.animate({ "left": $ul.position().left + _li_width }, opts.animateSpeed);                        _index -= 1;                    } else if (_index <= 0 && !$ul.is(":animated")) {                        _index = _li_count - 1;                        $ul.animate({ "left": -(_li_width * (_li_count - 1)) }, opts.animateSpeed);                    }                });                $next.click(function () {                    if (_index >= 0 && _index < _li_count - 1 && !$ul.is(":animated")) {                        $ul.animate({ "left": $ul.position().left - _li_width }, opts.animateSpeed);                        _index += 1;                    } else if (_index == _li_count - 1 && !$ul.is(":animated")) {                        _index = 0;                        $ul.animate({ "left": 0 }, opts.animateSpeed);                    }                });                //自动切换                function Rotation() {                    if (opts.isAutomaticSwitching) {                        $next.click()                    }                }            };        })(jQuery);

调用：

$(document).ready(function () {            $(".content").controlsMove({                "mode": "scoll",                //切换模式 scoll/fadeIn  （暂时无效）                "isAutomaticSwitching": true,   //是否自动切换                "intervalTime": 3000,           //间隔时间                "animateSpeed": 600,            //切换速度                "prevClass": "prev",            //上一页按钮名称                "nextClass": "next"             //下一页按钮名称            });        });

源码下载地址：点击打开链接

还有许多东西可以扩展的，比如显示当前是第几张、每次单击切换的几张图片等等。

鄙人就只抛砖引玉下了