Question

我在项目中使用水车滑块插件，我在为每个滑块添加标题时遇到问题。当您将鼠标悬停在滑块img上时，它应该在该图像上显示一个框（div）。我对它进行了管理，但它并不稳定。我想让它稳定，并希望为所有图像添加框效果。这意味着当悬停在每个img sety节目时应该显示它们各自的盒子内部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/小提琴。请帮助我真的很感激。

Answer 1

你需要以你的风格添加这个css

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

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

Answer 2

将此添加到脚本

 $(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>

第一次img后＃bx1和第二次img后＃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。这将有效。

水车滑块标题问题

2 个答案: