Javascript 如何使用Bootstrap3在悬停时创建滑动图像？

当我将光标移到图像上时，我希望图像滑动。假设我有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>

标题

包含更多信息
标题

包含更多信息
标题

包含更多信息

演示：

此外，我希望div可以在鼠标结束时单击

我非常确信，这可以通过旋转木马实现，但我相信 不确定这是否是最好的方式

为什么不呢？因为您已经在使用引导，所以首先应该使用它的特性

另外，请阅读并了解您可以在同一页面上使用多个转盘：

传送带需要在最外层的容器（ .转盘）以使转盘控制装置正常工作。添加时 多个传送带，或更改传送带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>

    .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;
    }

此外，我希望div可以在鼠标结束时单击

正如您在上面看到的，我将图像包装在一个

a

标记中。剩下的唯一可能的问题是，

.carousel标题

不可单击，并覆盖图像。使用以下CSS代码使

.carousel标题可单击：

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

有助于滑动的左右箭头被删除。这就是我想要的，但是
他们的街区依然存在。所以在左边和右边都有一个空格
我预计上述问题与移除的箭头无关，而是由于图像的大小。您使用的图像宽度为360px。如前所述，carousal的图像在默认情况下是响应的。CSS代码为这些图像设置了一个
最大宽度：100%
，这意味着它们的显示不应大于其原始大小。您可以通过使用较大的图像来解决此问题，或者为图像提供100%的分辨率（大多数放大图像都会有质量问题）。您可以使用下面显示的代码：

.carousel-inner>.item>img、.carousel-inner>.item>a>img{
最大宽度：无；
宽度：100%；
}

我想要的是当我的鼠标在DIV上时，3张图片会自动滑动
无限循环。他们之间将有2秒
事实上，您应该能够使用以下各项：

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

但是carsousel已经在mouseenter上停了下来。稍后我会发布一个解决方案

转盘api有一个
暂停
选项（默认情况下为悬停），您可以将此选项设置为空字符串，以防止转盘在悬停时停止循环。
您应该删除HTML中的carousel数据属性以启用显式JavaScript初始化：

data ride=“carousel”属性用于将旋转木马标记为从页面>加载开始设置动画。它不能与同一转盘的（冗余和不必要的）显式JavaScript>初始化结合使用

之后，您可以使用：

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

当把以上三点放在一起时，您将看到如下演示中所示的内容：
对于这个简单的功能，我们似乎不需要旋转木马。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" />


var i=0；var path=新数组（）；
//图像列表
路径[0]=”http://lorempixel.com/750/375/sports/1/"; 
路径[1]=”http://lorempixel.com/750/375/sports/2/"; 
路径[2]=”http://lorempixel.com/750/375/sports/3/"; 
函数swapImage（）{document.slide.src=path[i]；
if（i

演示：

如果有更简单的解决方案，请告诉我。
当你说幻灯片时，是指从左到右吗？如果说点击，你是指链接，你可以把你的.revealpfull div包装在标签里。是的，我是说从左到右就像Carousel一样。但我想用一些简单的东西。同时使用旋转木马和字幕可能会产生一些问题。所以只需要简单的解决方案。这是非常接近我想要的，但有一些东西遗漏了。1.标题不再向上滑动。实际上，代码已经发生了巨大的变化。我想我需要将它集成到您的代码中。2.有助于滑动的左右箭头被删除。这就是我想要的，但他们的障碍仍然存在。所以在左边和右边都有一个空格。3.我想要的是当我的鼠标在DIV上时，3张图片将以无限循环自动滑动。他们之间的每一个将有2秒。我非常确信，这可以通过编辑此代码来实现。这对我来说将是一个好的开始。
<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" />