Question

我有以下代码，用于悬停在图像上时停止的图像滑块。我想知道是否还有这样做，但不是使用图像标签只使用div标签，所以我可以创建自定义形状，使用CSS的滑块。任何人都可以指出我正确的方向，当我尝试用div替换图像时它停止工作。有什么想法吗？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

是的，您可以使用div标签，为div标签提供类，然后使用css将图像插入该类。

Answer 2

我添加了另一个带有<li>的{{1}}元素，其中包含一些文字，它就停止了。根本没有图像。

Check out the fiddle I created.

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

在图像滑块上使用div

3 个答案: