jq轮播效果地址

HTML

<div id="slider" class="slider"></div>
<script>
    $(function () {
        $('#slider').sliders({
            imgArr: ['./resource/banner1.jpg', './resource/banner2.jpg', './resource/banner3.jpg'],
            autoLoop: true,
            current: 1,
            time: 4000,
            vWidth: 824
        })
    });
</script>

css

JS代码–jq轮播

;(function ($, window, document, undefined) {

'use strict';

function Sliders(element, options) {
    this.element = element;
    this.options = {
        vWidth: options.vWidth || element.width(),
        current: options.current || 1,
        imgArr: options.imgArr,
        len: options.imgArr.length,
        autoLoop: options.autoLoop,
        time: options.time || 4000
    };
    this.init();
}

Sliders.prototype = {
    constructor: Sliders,
    init: function () {
        this.createHtml();
        this.bindEvent();
        this.hackLoop();
    },
    createHtml: function () {
        var me = this;
        var imgArr = me.options.imgArr,
            len = me.options.len,
            content = [],
            pointer = [],
            current = me.options.current;
        content.push("<button type='button' class='preBtn' id='preBtn'><</button>");
        content.push("<button type='button' class='nextBtn' id='nextBtn'>></button>");
        content.push("<ul class='sliderUl'>");
        pointer.push("<ul class='pointer'>");
        for (var i = 0; i < len; i++) {
            content.push("<li class='sliderLi'><img class='block' src=" + imgArr[i] + " title=" + imgArr[i] + "></li>")
            if ((current - 1) !== i) {
                pointer.push("<li data-index=" + (i + 1) + "></li>");
            } else {
                pointer.push("<li data-index=" + (i + 1) + " class=" + 'current' + "></li>");
            }
        }
        pointer.push("</ul>");
        content.push("<li class='sliderLi'><img class='block' src=" + imgArr[0] + " title=" + imgArr[0] + "></li></ul>");
        me.element.html((content.concat(pointer)).join(''));
    },
    bindEvent: function () {
        var me = this;
        me.element.on('mouseenter', '.sliderUl', function () {
            clearInterval(me.timer);
        });
        me.element.on('mouseleave', '.sliderUl', function () {
            me.hackLoop();
        });
        me.element.on('click', '.pointer li', function () {
            clearInterval(me.timer);
            var index = parseInt($(this).data('index'));
            me.goPage(index);
        });
        me.element.on('click', '#preBtn', function () {
            clearInterval(me.timer);
            var current = me.options.current, len = me.options.len;
            if (current === 1) {
                var vWidth = me.options.vWidth;
                var temp = (-len * vWidth);
                me.element.children('.sliderUl').css({
                    "-webkit-transform": "translateX(" + temp + "px)",
                    "transform": "translateX(" + temp + "px)",
                    "transition-duration": "none",
                    "transition-timing-function": "none",
                    "transition-property": "none"
                });
                me.options.current = len - 1;
            } else if (current === len) {
                me.options.current = len - 2;
            } else {
                me.options.current = 0;
            }
            setTimeout(function () {
                me.loop();
            }, 10);
        });
        me.element.on('click', '#nextBtn', function () {
            clearInterval(me.timer);
            var current = me.options.current, len = me.options.len;
            me.options.current = current === len ? len : current; // 20190430 15:18更改 len ? 0 : current
            me.loop();
        });
    },
    loop: function () {
        var me = this;
        var current = me.options.current, vWidth = me.options.vWidth, len = me.options.len;
        var temp = (-current * vWidth);
        var sliderUl = me.element.children('.sliderUl');
        sliderUl.css({
            "-webkit-transform": "translateX(" + temp + "px)",
            "transform": "translateX(" + temp + "px)",
            "transition-duration": "0.4s",
            "transition-timing-function": "ease-in",
            "transition-property": "transform"
        });
        var pointerLi = me.element.children('.pointer').children("li");
        pointerLi.removeClass("current");
        pointerLi.eq(current === len ? 0 : current).addClass("current");
        if (me.options.current === len) {
            setTimeout(function () {
                sliderUl.css({
                    "-webkit-transform": "translateX(0px)",
                    "transform": "translateX(0px)",
                    "transition-duration": "none",
                    "transition-timing-function": "none",
                    "transition-property": "none"
                });
                //时间必须不小于动画所需时间
            }, 500);
        }
        me.options.current = (len !== current) ? ++current : 1;
    },
    hackLoop: function () {
        var me = this;
        if (me.options.autoLoop) {
            me.timer = setInterval(function () {
                me.loop();
            }, me.options.time);
        }
    },
    goPage: function (index) {
        var me = this;
        var vWidth = me.options.vWidth;
        me.options.current = index;
        me.element.children('.sliderUl').css({
            "-webkit-transform": "translateX(" + (-(index - 1) * vWidth) + "px)",
            "transform": "translateX(" + (-(index - 1) * vWidth) + "px)",
            "transition-duration": "0.4s",
            "transition-timing-function": "ease-in",
            "transition-property": "transform"
        });
        var pointerLi = me.element.children('.pointer').children("li");
        pointerLi.removeClass("current");
        pointerLi.eq(index - 1).addClass("current");
    }
};
$.fn.sliders = function (options) {
    return new Sliders($(this), options);
}

})(jQuery, window, document);

JS代码–jq分页

效果地址
;(function ($, window, document, undefined) {

'use strict';
function Paging(element, options) {
    this.element = element;
    this.options = {
        pageNum: options.pageNum || 1, // 当前页码
        totalNum: options.totalNum, // 总页码
        totalList: options.totalList, // 数据总记录
        callback: options.callback // 回调函数
    };
    this.init();
}
Paging.prototype = {
    constructor: Paging,
    init: function () {
        this.createHtml();
        this.bindEvent();
    },
    createHtml: function () {
        var me = this;
        var content = [];
        var pageNum = me.options.pageNum;
        var totalNum = me.options.totalNum;
        var totalList = me.options.totalList;
        content.push("<button type='button' id='firstPage'>首页</button><button type='button' id='prePage'>上一页</button>");
        // 总页数大于6必显示省略号
        if (totalNum > 6) {
            // 1、当前页码小于5且总页码大于6 省略号显示后面+总页码
            if (pageNum < 5) {
                // 1与6主要看要显示多少个按钮 目前都显示5个
                for (var i = 1; i < 6; i++) {
                    if (pageNum !== i) {
                        content.push("<button type='button'>" + i + "</button>");
                    } else {
                        content.push("<button type='button' class='current'>" + i + "</button>");
                    }
                }
                content.push(". . .");
                content.push("<button type='button'>" + totalNum + "</button>");
            } else {
                // 2、当前页码接近后面 到最后页码隔3个 省略号显示后面+总页面
                if (pageNum < totalNum - 3) {
                    for (var i = pageNum - 2; i < pageNum + 3; i++) {
                        if (pageNum !== i) {
                            content.push("<button type='button'>" + i + "</button>");
                        } else {
                            content.push("<button type='button' class='current'>" + i + "</button>");
                        }
                    }
                    content.push(". . .");
                    content.push("<button type='button'>" + totalNum + "</button>");
                } else {
                    // 3、页码至少在5，最多在【totalNum - 3】的中间位置 第一页+省略号显示前面
                    content.push("<button type='button'>" + 1 + "</button>");
                    content.push(". . .");
                    for (var i = totalNum - 4; i < totalNum + 1; i++) {
                        if (pageNum !== i) {
                            content.push("<button type='button'>" + i + "</button>");
                        } else {
                            content.push("<button type='button' class='current'>" + i + "</button>");
                        }
                    }
                }
            }
        } else {
            // 总页数小于6
            for (var i = 1; i < totalNum + 1; i++) {
                if (pageNum !== i) {
                    content.push("<button type='button'>" + i + "</button>");
                } else {
                    content.push("<button type='button' class='current'>" + i + "</button>");
                }
            }
        }
        content.push("<button type='button' id='lastPage'>尾页</button><button type='button' id='nextPage'>下一页</button>");
        content.push("<span class='totalNum'> 共 " + totalNum + " 页 </span>");
        content.push("<span class='totalList'> 共 " + totalList + " 条记录 </span>");
        me.element.html(content.join(''));

        // DOM重新生成后每次调用是否禁用button
        setTimeout(function () {
            me.dis();
        }, 20);
    },
    bindEvent: function () {
        var me = this;
        me.element.off('click', 'button');
        // 委托新生成的dom监听事件
        me.element.on('click', 'button', function () {
            var id = $(this).attr('id');
            var num = parseInt($(this).html());
            var pageNum = me.options.pageNum;
            if (id === 'prePage') {
                if (pageNum !== 1) {
                    me.options.pageNum -= 1;
                }
            } else if (id === 'nextPage') {
                if (pageNum !== me.options.totalNum) {
                    me.options.pageNum += 1;
                }
            } else if (id === 'firstPage') {
                if (pageNum !== 1) {
                    me.options.pageNum = 1;
                }
            } else if (id === 'lastPage') {
                if (pageNum !== me.options.totalNum) {
                    me.options.pageNum = me.options.totalNum;
                }
            } else {
                me.options.pageNum = num;
            }
            me.createHtml();
            if (me.options.callback) {
                me.options.callback(me.options.pageNum);
            }
        });
    },
    dis: function () {
        var me = this;
        var pageNum = me.options.pageNum;
        var totalNum = me.options.totalNum;
        if (pageNum === 1) {
            me.element.children('#firstPage, #prePage').prop('disabled', true);
        } else if (pageNum === totalNum) {
            me.element.children('#lastPage, #nextPage').prop('disabled', true);
        }
    }
};
$.fn.paging = function (options) {
    return new Paging($(this), options);
}

})(jQuery, window, document);