javascript - 水车 slider 字幕问题

Question

我在我的元素中使用水轮 slider 插件，但我在为每个 slider 添加标题时遇到了问题。当您将鼠标悬停在 slider img 上时，它应该在该图像上显示一个框(一个 div)。我设法把箱子盖在上面，但它不稳定。我想让它稳定并为所有图像添加方框效果。这意味着当悬停时，每个 img sety show 都应该在它们上面显示它们各自的 box-inner div。我为此创建了一个 fiddle ，这里是 fiddle 的链接。 http://jsfiddle.net/4eeukuzf/

<div id="carousel" style="height:500px; width:960px; border:0; position: relative; clear: both; overflow: hidden; margin: 0 auto;">
<div class="box">
   <img src="http://development.230i.com/mahaweli_new/images/001.jpg" id="item-1" />
  <div class="box-inner"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and  make a type specimen book</p></div>
  </div>
  <a href="#"><img src="http://development.230i.com/mahaweli_new/images/002.jpg" id="item-2" /></a>
  <a href="#"><img src="http://development.230i.com/mahaweli_new/images/003.jpg" id="item-3" /></a>
  <a href="#"><img src="http://development.230i.com/mahaweli_new/images/004.jpg" id="item-4" /></a>
  <a href="#"><img src="http://development.230i.com/mahaweli_new/images/006.jpg" id="item-5" /></a>

</div>

这里是html部分。所有东西都在http://jsfiddle.net/4eeukuzf/ fiddle 。请帮忙，我真的很感激。

Answer 1

将此添加到脚本

 $(document).ready(function () {
    var carousel = $("#carousel").waterwheelCarousel({
      flankingItems: 3,
        movingToCenter: function ($item) {
         var imageID = $item.attr('id');
        setupSlide(imageID);
      },
      clickedCenter: function ($item) {
        $('#callback-output').prepend('clickedCenter: ' + $item.attr('id') + '<br/>');
      }
    });

    $('#prev').bind('click', function () {
      carousel.prev();

      return false
    });

    $('#next').bind('click', function () {
      carousel.next();

      return false;
      });

    $('#reload').bind('click', function () {
      newOptions = eval("(" + $('#newoptions').val() + ")");
      carousel.reload(newOptions);
      return false;
    });

  });





function setupSlide(id){

var bx1 = document.getElementById('bx1');
var bx2 = document.getElementById('bx2');
var bx3 = document.getElementById('bx3');
var bx4 = document.getElementById('bx4');
var bx5 = document.getElementById('bx5');


 if(id == "item-1") {

 bx1.style.zIndex = "999";

 bx2.style.zIndex = "0";
 bx3.style.zIndex = "0";
 bx4.style.zIndex = "0";
 bx5.style.zIndex = "0";

  }
   else if(id == "item-2") {

 bx2.style.zIndex = "999";

 bx1.style.zIndex = "0";
 bx3.style.zIndex = "0";
 bx4.style.zIndex = "0";
 bx5.style.zIndex = "0";

 }

 else if(id == "item-3") {

 bx3.style.zIndex = "999";

 bx1.style.zIndex = "0";
 bx2.style.zIndex = "0";
 bx4.style.zIndex = "0";
 bx5.style.zIndex = "0";

 }


 else if(id == "item-4") {

 bx4.style.zIndex = "999";

 bx1.style.zIndex = "0";
 bx2.style.zIndex = "0";
 bx3.style.zIndex = "0";
 bx5.style.zIndex = "0";

}

 else {

 bx5.style.zIndex = "999";

 bx1.style.zIndex = "0";
 bx2.style.zIndex = "0";
 bx3.style.zIndex = "0";
 bx4.style.zIndex = "0";

  }

    }

并相应地将这些添加到 Html

<div id="bx1" class="box-inner item-1">

    <h2>***Header***</h2>

    <p>content</p>

    <a href="#">read more</a>

  </div>

#bx1 在第一个 img 之后，#bx2 在第二个 img 之后等

 and change css like this

    .box-inner{
      position: absolute;
        width: 262px;
       text-align: left;
      left: 36.4%;
       height: 395px;
       background-color: rgba(19,82,169, .8);
       top: 25px;
      opacity: 0;
     transition: all .5s;
     padding: 30px;
   }

     .box-inner h2{

   color: #fff;
    }

      .box-inner p{
     color: #fff;
    }

   .box-inner a{
      font: 700 15px 'Roboto', serif;
     color: #edd71a;
    text-transform: uppercase;
      text-decoration: none !important;
    line-height: 30px;
  }

 #bx1{ z-index:998}
 #bx2{ z-index:0}
#bx3{ z-index:0}
#bx4{ z-index:0}
#bx5{ z-index:0}


 #bx1:hover{opacity:1}
 #bx2:hover{opacity:1}
 #bx3:hover{opacity:1}
 #bx4:hover{opacity:1}
 #bx5:hover{opacity:1}

我之前在我的元素中做过类似的事情，但我没有指向该页面的链接。我更改了 javascript 位(它很便宜)我需要添加 Next 和 Previous 按钮。如果你想添加这些按钮，添加

<a href="#" id="prev"></a>
<a href="#" id="next"></a>

到你的html。这会起作用。