Question

我对编码还很陌生，并且在编写了一些html，css和java教程之后，制作了一个基本的图像滑块。

我已经找到了一种向滑块添加文本的简单方法，但是我希望文本悬停在图片的顶部而不是上方。

我认为带有文本的透明框会很好用，我只是不知道该如何实现。

任何帮助都会很棒！

'use strict';

$(function() {

  //settings for slider
  var width = 720;
  var animationSpeed = 1000;
  var pause = 5000;
  var currentSlide = 1;

  //cache DOM elements
  var $slider = $('#slider');
  var $slideContainer = $('.slides', $slider);
  var $slides = $('.slide', $slider);

  var interval;

  function startSlider() {
    interval = setInterval(function() {
      $slideContainer.animate({
        'margin-left': '-=' + width
      }, animationSpeed, function() {
        if (++currentSlide === $slides.length) {
          currentSlide = 1;
          $slideContainer.css('margin-left', 0);

        }

      });
    }, pause);
  }

  function pauseSlider() {
    clearInterval(interval);
  }

  $slideContainer
    .on('mouseenter', pauseSlider)
    .on('mouseleave', startSlider);

  startSlider()


}); ** strong text **

body #slider {
  width: 720px;
  height: 500px;
  overflow: hidden;
}

#slider .slides {
  display: block;
  width: 6000px;
  height: 500px;
  margin: 0;
  padding: 0;
}

#slider .slide {
  float: left;
  list-style-type: none;
  width: 720px;
  height: 500px;
}

<!DOCTYPE html>
<html>

<head>

  <link rel="stylesheet" type="text/css" href="Slider CSS.css">


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
  </script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <script type="text/javascript" src="slider Java.js"></script>
</head>

<body>
  <div class="container">
    <div class="header">
      <h1 class="text-muted">Gallery</h1>
    </div>

    <div id="slider">
      <ul class="slides">
        <li class="slide">
          <div style="font-family:courier;">
            <h3>Tree</h3>

            <img src="https://jooinn.com/images1280_/bottom-view-of-green-leaved-tree- 
    during-daytime.jpg"></li>

        <li class="slide">
          <div style="font-family:courier;">
            <h3>Sheep</h3>

            <img src="https://icdn3.digitaltrends.com/image/chimera-majestic-sheep- 
    tongue-720x720.jpg"></li>

        <li class="slide">
          <div style="font-family:courier;">
            <h3>Turtle</h3>

            <img src="https://images.mid-day.com/images/2018/jun/Turtle-deaths_d.jpg">
        </li>

        <li class="slide">
          <div style="font-family:courier;">
            <h3>Water Dragon</h3>

            <img src="https://1funny.com/wp-content/uploads/2009/05/cute-fish-2.jpeg">
        </li>

        <li class="slide">
          <div style="font-family:courier;">
            <h3>Cute Fish</h3>

            <img src="http://www.cutestpaw.com/wp-content/uploads/2012/05/super-cute- 
    fish.jpg"></li>

        <li class="slide">
          <div style="font-family:courier;">
            <h3>Tree</h3>

            <img src="https://jooinn.com/images1280_/bottom-view-of-green-leaved-tree- 
    during-daytime.jpg"></li>
      </ul>
      </div>
      </div>


</body>

</html>

如何在文字滑块上的透明框中覆盖文字？

0 个答案: