如何使用Bootstrap 3在悬停时创建滑动图像？

Question

当我将光标移到图像上方时，我希望图像滑动。 假设我有3张照片。 仅当我在DIV上时，图像才会滑动。 我很确定可以通过轮播实现此目的，但是我不确定这是否是最好的方法。

我的密码

    <div class="container products">
    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-4">
                    <!-- Reveal Up Full -->
                    <div class="image revealUpFull">
                        <img src="http://lorempixel.com/360/180/technics/1" class="img-responsive"/>
                        <span class="title">Caption <br / ><br / > with some more info</span>
                    </div>
                </div>
                <div class="col-md-4">
                    <!-- Reveal Up Full -->
                    <div class="image revealUpFull">
                        <img src="http://lorempixel.com/360/180/technics/2" class="img-responsive"/>
                        <span class="title">Caption <br / ><br / > with some more info</span>
                    </div>
                </div>
                <div class="col-md-4">
                    <!-- Reveal Up Full -->
                    <div class="image revealUpFull">
                        <img src="http://lorempixel.com/360/180/technics/3" class="img-responsive"/>
                        <span class="title">Caption <br / ><br / > with some more info</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

演示： http : //codepen.io/anon/pen/xbbNPM

另外，我希望鼠标悬停时可以单击div。

Answer 1

我很确定可以通过轮播实现此目的，但是我不确定这是否是最好的方法。

为什么不？ 因为您已经在使用Bootstrap，所以应该首先使用它的功能。

另请阅读http://getbootstrap.com/javascript/#carousel，并发现您可以在同一页面上使用多个轮播：

轮播需要在最外面的容器（.carousel）上使用id，以使轮播控件正常运行。 添加多个轮播时，或更改轮播ID时，请确保更新相关控件。

因为您要在mouseover（hover）上滑动旋转木马，所以不需要任何控件，所以每个旋转木马都可以如下所示进行编码：

           <div class="col-md-4">
                <!-- Reveal Up Full -->
                 <div id="carouse1" class="carousel slide" data-ride="carousel" data-interval="false">
                   <div class=" carousel-inner" role="listbox">
                     <div class="item active image revealUpFull">
                        <a href="#"><img src="http://lorempixel.com/360/180/technics/1"></a>
                        <div class="carousel-caption">>Caption <br / ><br / > with some more info</div>
                     </div>  
                     <div class="item image revealUpFull">
                        <a href="#"><img src="http://lorempixel.com/360/180/technics/2"></a>
                        <div class="carousel-caption">>Caption <br / ><br / > with some more info</div>
                     </div>  
                     <div class="item image revealUpFull">
                        <a href="#"><img src="http://lorempixel.com/360/180/technics/3"></a>
                        <div class="carousel-caption">>Caption <br / ><br / > with some more info</div>
                     </div>  
                    </div>  
                   </div>
            </div>

请注意，我不确定为什么将3个md-4列包装在md-12列中，所以您的轮播图片不需要img-responsive类。

创建HTML之后，您应该为鼠标悬停创建一个JavaScript触发器（我在这里使用鼠标输入）：

<script>
    $('.carousel').on('mouseenter',function(){ $( this ).carousel('next');})
</script>

另外，我希望鼠标悬停时可以单击div。

正如你可以在上面看到我已经包裹在一个图像a标签。 剩下的唯一可能的问题是.carousel-caption不可单击并覆盖图像。 使用以下CSS代码使.carousel-caption可点击：

  <style>
    .carousel-caption {
    pointer-events: none;
    }
  </style>

演示： http ： //www.bootply.com/bmLVbymbhj

更新

1. 标题不再滑动。 实际上，代码已发生了巨大变化。 我想我>需要将其集成到您的代码中。

是的，您应该集成revealUpFull类。 如果您这样做有任何麻烦，请让我知道，或者对SO提出新的问题。

您应该使用如下所示的内容：

    .carousel-caption {
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgb(0, 0, 0); /* fallback color */
    background: rgba(0, 0, 0, 0.7);
    text-align: center;
    padding: 5px 0 4px;
    font-size: 14px;
    color: white;

    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;

    /* make image clickable */

    pointer-events: none;

    /* override bootstrap */
    left: 0;
    right: 0;
}

/* REVEAL UP FULL */

div.image.revealUpFull .carousel-caption {
    height: 100%;
    width: 100%;
    bottom: -150px;
}

div.image.revealUpFull:hover img {
    top: 0;
}

div.image.revealUpFull:hover .carousel-caption {
    bottom: 0;
}  



    .carousel-caption {
    pointer-events: none;
    }

2. 有助于滑动的左右箭头被删除。 这就是我想要的，但他们的障碍仍然存在。 所以左右都有一个空间。

我希望上述问题与删除的箭头无关，而是由于图像的大小。 您正在使用宽度为360px的图像。 如前所述，默认情况下，轮播的图像是响应的。 CSS代码为这些图像设置了max-width:100% ，这意味着它们的显示尺寸不得超过其原始尺寸。 您可以通过使用较大的图像来解决此问题，或者为图像设置100％的分辨率（大多数情况下，放大图像会出现质量问题）。 您可以使用下面显示的代码：

.carousel-inner> .item> img，.carousel-inner> .item> a> img {max-width：none; 宽度：100％; }

3. 我想要的是当鼠标悬停在DIV上时，3张图片将无限循环地自动滑动。 他们每个人之间将有2秒

实际上，您应该可以使用以下内容：

 
 
 
  
  $('.carousel').on('mouseenter',function(){ $( this ).carousel('cycle',{interval:2000});}); $('.carousel').on('mouseleave',function(){ $( this ).carousel('pauze')});});
 
  

但是旋转木马已经停在mouseenter上。 我将在稍后发布解决方案。

轮播api具有pause选项（默认为悬停），您可以将此选项设置为空字符串，以防止轮播在悬停时停止循环。 您应该在HTML中删除轮播数据属性以启用显式的JavaScript初始化：

data-ride =“ carousel”属性用于将轮播标记为动画，该动画从页面> load开始。 它不能与（冗余和不必要的）显式JavaScript初始化同一轮播结合使用。

之后，您可以使用：

    $('.carousel').on('mouseenter',function(){ $( this ).carousel({interval:2000,pause:''}); });
    $('.carousel').on('mouseleave',function(){ $( this ).carousel('pause'); });

将以上三点放在一起时，您将获得以下演示中所示的内容： http : //www.bootply.com/acGNORR3it

Answer 2

看起来我们不需要轮播功能来实现此简单功能。 JavaScript方式将是最简单，最快的。

<script language="JavaScript"> 
var i = 0; var path = new Array(); 

// LIST OF IMAGES 
path[0] = "http://lorempixel.com/750/375/sports/1/"; 
path[1] = "http://lorempixel.com/750/375/sports/2/"; 
path[2] = "http://lorempixel.com/750/375/sports/3/"; 

function swapImage() { document.slide.src = path[i]; 
if(i < path.length - 1) i++; 
else i = 0; setTimeout("swapImage()",3000); 
} window.onload=swapImage;

</script> 

<img height="200" name="slide" src="" width="400" />

演示： http ： //codepen.io/anon/pen/emmqYJ

让我知道是否存在任何更简单的解决方案。