水车滑块标题问题

Question

我在我的项目中使用了水车滑块插件，但在为每个滑块添加标题时遇到了问题。当您将鼠标悬停在滑块 img 上时，它应该在该图像上显示一个框（一个 div）。我设法得到了它，但它不稳定。我想让它稳定并希望为所有图像添加框效果。这意味着当悬停每个 img sety 节目时，应该在它们上面显示它们各自的 box-inner div。我为此创建了一个小提琴，这里是小提琴的链接。 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 和第二个图像之后的#bx2 等等。

 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位（它很便宜）我需要添加下一个和上一个按钮。如果要添加这些按钮，请添加

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

到您的 html。这将起作用。

Answer 2

你需要在你的风格中添加这个 css

.box-inner:hover{ opacity:1; z-index:101; right:0 !important; transition:opacity, right;}

例如：http://jsfiddle.net/4eeukuzf/1/