如何使用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

讓我知道是否存在任何更簡單的解決方案。