在分页中将图像用于上一个和下一个

Question

这是分页插件。 我需要一点帮助。 我正在尝试将图像用于上一个和下一个按钮。 我一直有问题。 有谁知道我该怎么做？ 当前，如果我使用图像，它将把上一个/下一个按钮显示为[object HTMLImageElement]。 提前致谢！

var methods = {
    init: function(options) {
        var o = $.extend({
            items: 1,
            itemsOnPage: 1,
            pages: 0,
            displayedPages:5,
            edges: 2,
            currentPage: 1,
            hrefTextPrefix: '#page-',
            hrefTextSuffix: '',
            prevText: 'prev', //this is the prev button text. I want to replace this with imgLeft 
            nextText: 'next', //this is the next button text. I want to replace this with imgRight 
            ellipseText: '…',
            cssStyle: 'light-theme',
            labelMap: [],
            selectOnClick: true,
            onPageClick: function(pageNumber, event) {
                // Callback triggered when a page is clicked
                // Page number is given as an optional parameter
            },
            onInit: function() {
                // Callback triggered immediately after initialization
            }
        }, options || {});


       methods._appendItem.call(this, o.currentPage - 1, {text: o.prevText, classes: 'prev'});


       methods._appendItem.call(this, o.currentPage + 1, {text: o.nextText, classes: 'next'});

Answer 1

如前所述，您可以使用CSS为“ .prev”和“ .next”类设置主题。 然后，根据您要执行的操作，只需向该元素添加背景图像，更改文本的颜色等。

.prev, .next {
  color: #FF0000;
  font-family: Arial, sans-serif;
  display: inline-block;
}
.prev {
  width: 50px;
  height: 30px;
  background: url('/my/image.jpeg') no-repeat center;
}
...