Question

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

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

HTML code：

<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%;以解决您的两个问题。

Answer 2

我在Chrome中看到了您的问题，但是我尝试通过拉动您的脚本在我的系统上复制它并且它不一样。

话虽如此，你可以看到你是否“检查元素”图像是否在那里但是在屏幕上显示的图像之后逐渐变小，直到看不到它们为止。它可能与屏幕尺寸有关（这就是为什么大多数评论者都看不到它）

我会尝试在img标记width='220' height='165'中添加一个显式图像大小，或者在javascript（jQuery）中设置它，例如：

$(".slide-image").width(220);
$(".slide-image").height(165);

滚动之前，期间和/或之后。

Jquery图像滑块在Chrome中不起作用

2 个答案: