Question

我有这个小型旋转木马在鼠标悬停上移动

HTML

<div id ="container">
  <div id="parent">
    <div class="contentBlock">
      <img alt="Les Bourdelles Des Garcons" src="http://www.deblasiis.com/wp-content/uploads/2016/10/MG_4194-copia-3.png">
      <p class="bsubtitle11"><span>Les Bourdelles des Garcons</span></p>
    </div>
    <div class="contentBlock"><img alt="Religio Universalis" src="http://www.deblasiis.com/wp-content/uploads/2016/11/MG_7877-dOUBLE.jpg"></div>
    <div class="contentBlock"><img alt="Isal Bed Ollen" src="http://www.deblasiis.com/wp-content/uploads/2016/11/01-N-1.jpg"></div>
  </div>
</div>
<span id="panLeft" class="panner" data-scroll-modifier='-1'><</span>
<span id="panRight" class="panner" data-scroll-modifier='1'>></span>

CSS

#container {
  width:600px;
  overflow:hidden;
}

#parent {
  width:6000px;
}

.contentBlock {
  font-size:10em;
  text-align:center;
  line-height:400px;
  height:auto;
  width:auto;
  margin:2px;
  float:left;
}

.contentBlock img {
  height:600px;
  width:auto;
}

.panner {
  border:1px solid black;
  display:block;
  position:fixed;
  width:50px;
  height:50px;
  top:45%;
}

.active {
  color:red;
}

#panLeft {
  left:0px;
}

#panRight {
  right:0px;
}

JS

var scrollHandle = 0,
    scrollStep = 5,
    parent = $("#container");

//Start the scrolling process
$(".panner").on("mouseenter", function () {
  var data = $(this).data('scrollModifier'),
      direction = parseInt(data, 10);

  $(this).addClass('active');

  startScrolling(direction, scrollStep);
});

//Kill the scrolling
$(".panner").on("mouseleave", function () {
  stopScrolling();
  $(this).removeClass('active');
});

//Actual handling of the scrolling
function startScrolling(modifier, step) {
  if (scrollHandle === 0) {
    scrollHandle = setInterval(function () {
      var newOffset = parent.scrollLeft() + (scrollStep * modifier);

      parent.scrollLeft(newOffset);
    }, 10);
  }
}

function stopScrolling() {
  clearInterval(scrollHandle);
  scrollHandle = 0;
}

我想在图片上添加文字标题。我无法弄明白，在我的测试中（https://jsfiddle.net/g5vakqw5/2/）标题将始终跟随旋转木马的移动，并且不会保持与图像的连贯。

感谢您的时间和帮助

Answer 1

你只需要确定contentBlock亲戚的位置。 See here your jsfiddle

 .contentBlock {
    position: relative; // <---- here is the change
    font-size:10em;
    text-align:center;
    line-height:400px;
    height:auto;
    width:auto;
    margin:2px;
    float:left;
}

＆＃13;

(function () {

    var scrollHandle = 0,
        scrollStep = 5,
        parent = $("#container");

    //Start the scrolling process
    $(".panner").on("mouseenter", function () {
        var data = $(this).data('scrollModifier'),
            direction = parseInt(data, 10);

        $(this).addClass('active');

        startScrolling(direction, scrollStep);
    });

    //Kill the scrolling
    $(".panner").on("mouseleave", function () {
        stopScrolling();
        $(this).removeClass('active');
    });

    //Actual handling of the scrolling
    function startScrolling(modifier, step) {
        if (scrollHandle === 0) {
            scrollHandle = setInterval(function () {
                var newOffset = parent.scrollLeft() + (scrollStep * modifier);

                parent.scrollLeft(newOffset);
            }, 10);
        }
    }

    function stopScrolling() {
        clearInterval(scrollHandle);
        scrollHandle = 0;
    }

}());

＆＃13;

#container {
  width:1980px;
  overflow:hidden;
}
#parent {
    width:2532px;
}
.contentBlock {
  position: relative;
    font-size:10em;
    text-align:center;
    line-height:400px;
    height:auto;
    width:auto;
    margin:2px;
    float:left;
}

.contentBlock img {
  
  height: 850px;
  width:auto;
-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.contentBlock:hover img {
	-webkit-filter: grayscale(0);
	filter: grayscale(0);}
.panner {
    border:1px solid black;
    display:block;
    position:fixed;
    width:50px;
    height:50px;
    top:45%;
}
.active {
    color:red;
}
#panLeft {
    left:0px;
}
#panRight {
    right:0px;
}

.bsubtitle11 {
font-weight:300;
font-size:35px;
text-align:center;
background: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
  display: table;
  height: 150px;
  left: 0;
  position: absolute;
  top: 45%;
  width: auto;
  opacity: 1;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
transition: opacity 500ms;
}

.contentBlock:hover .bsubtitle11 {
  opacity: 1;
}

.bsubtitle11 span {
display: table-cell;
text-align: center;
vertical-align: middle;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id ="container">
    <div id="parent">
        <div class="contentBlock">
        <img alt="Les Bourdelles Des Garcons" src="http://www.deblasiis.com/wp-content/uploads/2016/10/MG_4194-copia-3.png">
        <p class="bsubtitle11"><span>Les Bourdelles des Garcons</span></p>
        </div>
        <div class="contentBlock"><img alt="Religio Universalis" src="http://www.deblasiis.com/wp-content/uploads/2016/11/MG_7877-dOUBLE.jpg"></div>
        <div class="contentBlock"><img alt="Isal Bed Ollen" src="http://www.deblasiis.com/wp-content/uploads/2016/11/01-N-1.jpg"></div>
    </div>
</div>
<span id="panLeft" class="panner" data-scroll-modifier='-1'><</span>

<span id="panRight" class="panner" data-scroll-modifier='1'>></span>

＆＃13;

Answer 2

如果你想要修复文本，而不是我的图像轮播，那么创建一个单独的

标签添加你的文字并使其位置：绝对。

使用顶部和左侧值将其正确放置在图像上：

CSS：

#container {
  width:600px;
  overflow:hidden;
  position: relative:
}

#container p {
  position: absolute;
  top: 50px;
  left: 50px;
  font-size: 24px;
  font-weight: bold;  
}

JS FIDDLE LINK

旋转木马标题

2 个答案: