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

【问题标题】：The Jquery image slider doesn't work in ChromeJquery 图像滑块在 Chrome 中不起作用
【发布时间】：2014-04-05 21:45:17
【问题描述】：

我在我的网站上添加了一个 Jquery 图像滑块。但它不适用于谷歌浏览器。它在 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);
});

【问题讨论】：

它在我的 chorme 中工作
对我来说在 chrome 中工作正常。 cntrl+f5 可以吗？
尝试禁用扩展，看看是否能解决问题。
你能看到最后一张图片比其他图片小吗？所有的图像都消失了，再也没有回来。它需要循环。
@Bryan 不起作用 :( 你能看到所有相同大小的图像吗？

标签： javascript jquery

【解决方案1】：

在您的 css 文件中，您有以下代码：

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

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

【讨论】：

【解决方案2】：

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

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

我会尝试在 img 标签width='220' height='165' 中添加一个明确的图像大小，或者在 javascript (jQuery) 中设置它，例如：

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

在滚动之前、期间和/或之后。

【讨论】：