javascript - Jquery 图像 slider 在 Chrome 中不起作用

Question

我在我的网站上添加了一个 Jquery 图像 slider 。但它不适用于谷歌浏览器。它在 Firefox 中完美运行。知道为什么吗？网址:http://lit-falls-8182.herokuapp.com/

你能看到最后一张图片比其他图片小吗？所有的图像都消失了，再也不会回来了。它需要循环。

HTML 代码:

<div id="scroller" >
          <div class="innerScrollArea">
              <ul>
            <% @slideimages.each do |simage| %>
               <li><%= image_tag simage.gsub("app/assets/images/", ""), alt: "Slide Image", class: "slide-image" %></li>
            <% end %>
              </ul>
          </div>
     </div>

CSS 代码:

#scroller {
    border-bottom: 2px solid #FF9500;
    box-shadow: 0 2px 20px #C4C4C4;
    height: 160px;
    position: relative;
    width: 100%;
    z-index: 19;

    .innerScrollArea {
        overflow: hidden;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }

    ul {
        padding: 0;
        margin: 0;
        position: relative;
    }

    li {
        padding: 0;
        margin: 0;
        list-style-type: none;
        position: absolute;
    }

    .slide-image{
        z-index: 1;
        padding: 2px;
        display: block;
        opacity:0.8;
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
        &:hover {
            z-index: 2;
            border: 2px solid #FF9500;
            transform: scale(1.1);
            opacity:1;
            padding: 0px;
        }

    }

}

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 += 224;
    });
    var fullW = curX / 2;
    var viewportW = scroller.width();

    // Scrolling speed management
    var controller = {curSpeed:0, fullSpeed:1};
    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, 20);
    tweenToNewSpeed(controller.fullSpeed);
});

Answer 1

在你的 css 文件中你有这段代码:

img{
  max-width:100%;
  height:auto
}

删除 max-width:100%; 以解决您的两个问题。