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并发现您可以在同一页面上使用多个轮播：

转盘需要在最外面的容器上使用id（ .carousel）用于旋转木马控制以正常运行。添加时多个旋转木马，或更换旋转木马的ID时，请务必更新相关控件。

因为你想在鼠标悬停时滑动转盘（悬停）你不需要任何控制，你的每个转盘都可以编码如下所示：

           <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

<强>更新

标题不再向上滑动。实际上代码发生了巨大变化。我想我＆gt;需要将它集成到您的代码中。

是的，您应该整合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;
    }

删除了有助于滑动的左右箭头。这就是我想要的   他们的块仍然存在所以左右两边都有空格。

我预计上述问题与删除的箭头无关，但是由于图像的大小。您正在使用宽度为360像素的图像。如前所述，carousal的图像默认是响应的。 CSS代码为这些图像设置max-width:100%，这意味着它们不应显示大于其原始大小。您可以通过使用较大的图像或100％的图像来解决这个问题（大多数放大图像会有质量问题）。您可以使用下面显示的代码：

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

我想要的是当我的鼠标在DIV上方时，3张图片会自动滑动   无限循环。在它们之间将有2秒

~~实际上你应该可以使用以下内容：~~

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

~~但是carousel已经暂停在mouseenter上。我稍后会发布一个解决方案。~~

轮播API具有pause选项（默认情况下悬停），您可以将此选项设置为空字符串，以防止轮播在悬停时停止循环。您应该删除HTML中的carousel data-attribute以启用显式JavaScript初始化：

data-ride =＆＃34; carousel＆＃34;属性用于将轮播标记为从页面＆gt;加载开始的动画。它不能与（冗余和不必要的）显式JavaScript＆gt;同一轮播的初始化结合使用。

之后你可以使用：

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

如果有任何更简单的解决方案，请告诉我。

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

2 个答案: