jQuery循环prev/next按钮图像 - jQuery cycle prev/next button images

jQuery cycle prev/next button images

本文关键字：按钮图像 next 循环 prev jQuery | 更新日期: 2023-09-26

我使用Drupal 7和Field Slideshow插件。我发表了我的幻灯片并开始工作。它有一个寻呼机名字分别是"上一页"answers"下一页"

我不想要文字，必须要图像。我该怎么做呢?

<div id="field-slideshow-<?php print $slideshow_id; ?>-controls" class="field-slideshow-controls">
  <a href="#" class="prev"><?php print t('Prev'); ?></a>
  <?php if (!empty($controls_pause)) : ?>
    <a href="#" class="play"><?php print t('Play'); ?></a>
    <a href="#" class="pause"><?php print t('Pause'); ?></a>
  <?php endif; ?>
  <a href="#" class="next"><?php print t('Next'); ?></a>
</div>

<div id="field-slideshow-<?php print $slideshow_id; ?>-controls" class="field-slideshow-controls">
  <a href="#" class="prev"></a>
  <?php if (!empty($controls_pause)) : ?>
    <a href="#" class="play"><?php print t('Play'); ?></a>
    <a href="#" class="pause"><?php print t('Pause'); ?></a>
  <?php endif; ?>
  <a href="#" class="next"></a>
</div>

和这样的样式:

.prev {
    display:inline-block;
    width:20px;
    height:20px;
    background: transparent url('path/to/prev/image.png') no-repeat center center;
}
.next {
    display:inline-block;
    width:20px;
    height:20px;
    background: transparent url('path/to/next/image.png') no-repeat center center;
}

或者你可以这样写:

<div id="field-slideshow-<?php print $slideshow_id; ?>-controls" class="field-slideshow-controls">
      <a href="#" class="prev"><img scr="path/to/prev/image.png" alt="<?php print t('Prev'); ?>" /></a>
      <?php if (!empty($controls_pause)) : ?>
        <a href="#" class="play"><?php print t('Play'); ?></a>
        <a href="#" class="pause"><?php print t('Pause'); ?></a>
      <?php endif; ?>
      <a href="#" class="next"><img scr="path/to/next/image.png" alt="<?php print t('Next'); ?>"  /></a>
    </div>