jQuery组图轮播插件

最新推荐文章于 2023-02-13 14:42:51 发布

千影

最新推荐文章于 2023-02-13 14:42:51 发布

阅读量1.1k

点赞数

分类专栏： Jquery 文章标签： jQuery 组图轮播

本文链接：https://blog.csdn.net/yo548720570/article/details/11079527

版权

Jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

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"             //下一页按钮名称
            });
        });

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

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

鄙人就只抛砖引玉下了

千影

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery组图轮播插件

从来没写过插件，自己随便写的一个，可能不太规范，仅供参考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
复制链接

扫一扫

专栏目录