在分页中使用上一个和下一个图像答案

【问题标题】：Using images for previous and next in Pagination在分页中使用上一个和下一个图像
【发布时间】：2023-04-07 20:04:01
【问题描述】：

这是分页插件。我需要一点帮助。我正在尝试为上一个和下一个按钮使用图像。我一直有它的问题。有谁知道我该怎么做？目前，如果我使用图像，它将上一个/下一个按钮显示为 [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: '&hellip;',
            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'});

【问题讨论】：

你可以使用.prev 和.next 类来代替background-image
你能告诉我你用的是什么插件吗？
简单分页是我正在使用的插件。 flaviusmatis.github.io/simplePagination.js

标签： javascript jquery html css pagination

【解决方案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;
}
...

【讨论】：