在圖像滑塊上使用div

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

是的，您可以使用div標簽，將類賦予div標簽，然后使用CSS將圖像插入該類。

Answer 2

我添加了另一個<li>元素，其中包含<div>和其中的一些文本，它停止運行就很好了。 根本沒有圖像。

查看我創建的小提琴。

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