在图像滑块上使用divs

我有一个图像滑块，当您将鼠标悬停在图像上时停止。我想知道是否有这样做，而不是使用图像标签只使用div标签，所以我可以创建自定义的形状，使用CSS的滑块。任何人都可以点我正确的方向，当我尝试用div停止工作替换图像。有什么想法吗？在图像滑块上使用divs

#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>

来源

2017-07-03 Cole

https://codepen.io/DannaB67/pen/bRMRWQ，它看起来像为我工作:) – DanielaB67

大码整体不过。记住，如果我保留这段代码并将其用于我自己的项目中？ – Difster

我没有自己创建代码 – Cole

我添加了另一个<li>元素与<div>和它的一些文字，并停止就好了。它根本没有图像。

Check out the fiddle I created.

来源

2017-07-03 20:12:11 Difster

是的，你可以使用div标签，给类的div标签，然后用CSS来该类插入图片。

来源

2017-07-03 20:06:22

你可以像这样包装图像。

在你的脚本：

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

来源

2017-07-03 20:08:28 leopold

在图像滑块上使用divs

回答

相关问题