在圖像滑塊上使用divs

Question

我有一個圖像滑塊，當您將鼠標懸停在圖像上時停止。我想知道是否有這樣做，而不是使用圖像標籤只使用div標籤，所以我可以創建自定義的形狀，使用CSS的滑塊。任何人都可以點我正確的方向，當我嘗試用div停止工作替換圖像。有什麼想法嗎？

#scroller { 
 
    position: absolute; 
 
    left: 33%; 
 
    top: 14%; 
 
} 
 

 
#scroller .innerScrollArea { 
 
    overflow: hidden; 
 
    position: absolute; 
 
    top: 10%; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
} 
 

 
#scroller ul { 
 
    padding: 0; 
 
    top: 10%; 
 
    position: relative; 
 
} 
 

 
#scroller li { 
 
    padding: 0; 
 
    top: 7%; 
 
    list-style-type: none; 
 
    position: absolute; 
 
} 
 

 
.test { 
 
width:100px; 
 
height:200px; 
 
background-color:pink;}

<!-- SCROLLING IMAGE GALLERY--> 
 

 
    <div id="scroller" style="width: 536px; height: 263px; margin: 0 auto;"> 
 
    <div class="innerScrollArea"> 
 
     <ul> 
 
     <li><img src="http://i1055.photobucket.com/albums/s511/Josh_Tilton/website/angels_landing_zpsn5dpgsui.jpg" width="536" height="263" /></li> 
 
     <li><img src="http://i1055.photobucket.com/albums/s511/Josh_Tilton/website/big_cottonwood_zpszx8qyyik.jpg" width="536" height="263" /></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 

 

 

 
    <!-- JS SCROLLING IMAGES CODE--> 
 

 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 
 
    <script type="text/javascript"> 
 
    $(function(){ 
 
     var scroller = $('#scroller div.innerScrollArea'); 
 
     var scrollerContent = scroller.children('ul'); 
 
     scrollerContent.children().clone().appendTo(scrollerContent); 
 
     var curX = 0; 
 
     scrollerContent.children().each(function(){ 
 
      var $this = $(this); 
 
      $this.css('left', curX); 
 
      curX += $this.outerWidth(true); 
 
     }); 
 
     var fullW = curX/2; 
 
     var viewportW = scroller.width(); 
 

 
     // Scrolling speed management 
 
     var controller = {curSpeed:0, fullSpeed:2}; 
 
     var $controller = $(controller); 
 
     var tweenToNewSpeed = function(newSpeed, duration) 
 
     { 
 
      if (duration === undefined) 
 
       duration = 600; 
 
      $controller.stop(true).animate({curSpeed:newSpeed}, duration); 
 
     }; 
 

 
     // Pause on hover 
 
     scroller.hover(function(){ 
 
      tweenToNewSpeed(0); 
 
     }, function(){ 
 
      tweenToNewSpeed(controller.fullSpeed); 
 
     }); 
 

 
     // Scrolling management; start the automatical scrolling 
 
     var doScroll = function() 
 
     { 
 
      var curX = scroller.scrollLeft(); 
 
      var newX = curX + controller.curSpeed; 
 
      if (newX > fullW*2 - viewportW) 
 
       newX -= fullW; 
 
      scroller.scrollLeft(newX); 
 
     }; 
 
     setInterval(doScroll, 40); 
 
     tweenToNewSpeed(controller.fullSpeed); 
 
    }); 
 
    </script> 
 
</body> 
 

 
</html>

Answer 1

我添加了另一個<li>元素與<div>和它的一些文字，並停止就好了。它根本沒有圖像。

Check out the fiddle I created.

Answer 2

是的，你可以使用div標籤，給類的div標籤，然後用CSS來該類插入圖片。

Answer 3

你可以像這樣包裝圖像。

在你的腳本：

<ul> 
    <li><div class='slidingIMG'><img src="http://i1055.photobucket.com/albums/s511/Josh_Tilton/website/angels_landing_zpsn5dpgsui.jpg" width="536" height="263" /><div></li> 
    <li><div class='slidingIMG'><img src="http://i1055.photobucket.com/albums/s511/Josh_Tilton/website/big_cottonwood_zpszx8qyyik.jpg" width="536" height="263" /><div></li> 
    </ul> 

，並在你的樣式表。 （該10px的是隻顯示一個極值到當前的）

.slidingIMG img{ 

    height:10px; 
}