javascript - CSS 滚动条停止

Question

我们的主页上有一个简单的图像滚动器。它突然停止工作了。我没有编写代码，但在寻找问题时我注意到 HTML 链接到旧版本的 javascript，jquery-1.3.2.min.js。

希望旧的 javascript 是问题所在，我下载了 jquery-3.1.0.min.js 并将此文件放入我们网站上名为 js 的文件夹中。我更新了我们网站上文件的 src= 链接，但没有解决问题。

这是代码:

// JavaScript Document
$(function() {

  //remove js-disabled class
  $("#viewer").removeClass("js-disabled");

  //create new container for images
  $("<div>").attr("id", "container").css({
    position: "absolute"
  }).width($(".wrapper").length * 170).height(170).appendTo("div#viewer");

  //add images to container
  $(".wrapper").each(function() {
    $(this).appendTo("div#container");
  });

  //work out duration of anim based on number of images (1 second for each image)
  var duration = $(".wrapper").length * 3000;

  //store speed for later (distance / time)
  var speed = (parseInt($("div#container").width()) + parseInt($("div#viewer").width())) / duration;

  //set direction
  var direction = "rtl";

  //set initial position and class based on direction
  (direction == "rtl") ? $("div#container").css("left", $("div#viewer").width()).addClass("rtl"): $("div#container").css("left", 0 - $("div#container").width()).addClass("ltr");

  //animator function
  var animator = function(el, time, dir) {

    //which direction to scroll
    if (dir == "rtl") {

      //add direction class
      el.removeClass("ltr").addClass("rtl");

      //animate the el
      el.animate({
        left: "-" + el.width() + "px"
      }, time, "linear", function() {

        //reset container position
        $(this).css({
          left: $("div#imageScroller").width(),
          right: ""
        });

        //restart animation
        animator($(this), duration, "rtl");

        //hide controls if visible
        ($("div#controls").length > 0) ? $("div#controls").slideUp("slow").remove(): null;

      });
    } else {

      //add direction class
      el.removeClass("rtl").addClass("ltr");

      //animate the el
      el.animate({
        left: $("div#viewer").width() + "px"
      }, time, "linear", function() {

        //reset container position
        $(this).css({
          left: 0 - $("div#container").width()
        });

        //restart animation
        animator($(this), duration, "ltr");

        //hide controls if visible
        ($("div#controls").length > 0) ? $("div#controls").slideUp("slow").remove(): null;
      });
    }
  }

  //start anim
  animator($("div#container"), duration, direction);

  //pause on mouseover
  $("a.wrapper").live("mouseover", function() {

    //stop anim
    $("div#container").stop(true);

    //show controls
    ($("div#controls").length == 0) ? $("<div>").attr("id", "controls").appendTo("div#outerContainer").css({
      opacity: 0.7
    }).slideDown("slow"): null;
    ($("a#rtl").length == 0) ? $("<a>").attr({
      id: "rtl",
      href: "#",
      title: "rtl"
    }).appendTo("#controls"): null;
    ($("a#ltr").length == 0) ? $("<a>").attr({
      id: "ltr",
      href: "#",
      title: "ltr"
    }).appendTo("#controls"): null;

    //variable to hold trigger element
    var title = $(this).attr("title");

    //add p if doesn't exist, update it if it does
    ($("p#title").length == 0) ? $("<p>").attr("id", "title").text(title).appendTo("div#controls"): $("p#title").text(title);
  });

  //restart on mouseout
  $("a.wrapper").live("mouseout", function(e) {

    //hide controls if not hovering on them
    (e.relatedTarget == null) ? null: (e.relatedTarget.id != "controls") ? $("div#controls").slideUp("slow").remove() : null;

    //work out total travel distance
    var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());

    //work out distance left to travel
    var distanceLeft = ($("div#container").hasClass("ltr")) ? totalDistance - (parseInt($("div#container").css("left")) + parseInt($("div#container").width())) : totalDistance - (parseInt($("div#viewer").width()) - (parseInt($("div#container").css("left"))));

    //new duration is distance left / speed)
    var newDuration = distanceLeft / speed;


    //restart anim
    animator($("div#container"), newDuration, $("div#container").attr("class"));

  });

  //handler for ltr button
  $("#ltr").live("click", function() {

    //stop anim
    $("div#container").stop(true);

    //swap class names
    $("div#container").removeClass("rtl").addClass("ltr");

    //work out total travel distance
    var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());

    //work out remaining distance
    var distanceLeft = totalDistance - (parseInt($("div#container").css("left")) + parseInt($("div#container").width()));

    //new duration is distance left / speed)
    var newDuration = distanceLeft / speed;

    //restart anim
    animator($("div#container"), newDuration, "ltr");
  });

  //handler for rtl button
  $("#rtl").live("click", function() {

    //stop anim
    $("div#container").stop(true);

    //swap class names
    $("div#container").removeClass("ltr").addClass("rtl");

    //work out total travel distance
    var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());

    //work out remaining distance
    var distanceLeft = totalDistance - (parseInt($("div#viewer").width()) - (parseInt($("div#container").css("left"))));

    //new duration is distance left / speed)
    var newDuration = distanceLeft / speed;

    //restart anim
    animator($("div#container"), newDuration, "rtl");
  });
});

/* js-disabled class - set image sizes so they all fit in the viewer */

.js-disabled img {
  width: auto;
  height: auto;
  display: block;
  float: left;
  /* 9-16-16: Changed margin from 30 to 0*/
  margin: 30px 0 0;
}
#outerContainer {
  width: 1000px;
  height: 100px;
  margin: auto;
  position: relative;
  margin-top: 40px;
  margin-bottom: 10px;
  clear: both;
}
#outerContainer h2 {
  text-align: center;
  height: 60px;
  font-size: 2.5em;
  font-weight: 100;
}
#imageScroller {
  width: 1000px;
  height: 75px;
  position: relative;
}
#viewer {
  width: 1000px;
  height: 75px;
  overflow: hidden;
  margin: auto;
  position: relative;
  top: 5px;
}
#imageScroller a:active,
#imageScroller a:visited {} #imageScroller a img {
  border: 0;
}
#controls {
  width: 1000px;
  height: 47px;
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 10;
}
#controls a {
  width: 37px;
  height: 35px;
  position: absolute;
  top: 3px;
}
#controls a:active,
#controls a:visited {} #title {
  color: #ffffff;
  font-family: arial;
  font-size: 100%;
  font-weight: bold;
  width: 100%;
  text-align: center;
  margin-top: 10px;
}
.imgSpacer {
  margin-right: 5px;
  margin-left: 5px;
}
#outerContainer h4 {
  margin-top: 5px;
  margin-bottom: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

  <div id="outerContainer">
    <h2>Many of the fine organizations who use AccuZIP products</h2>
    <div id="imageScroller">
      <div id="viewer" class="js-disabled">
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_aaa.gif" alt="AAA" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_accutrend.gif" alt="AccuTrend" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_aflac.gif" alt="AFLAC" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_alliancetitle.jpg" alt="Alliance Title" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_allstate.jpg" alt="Allstate" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_alphagraphics.jpg" alt="AlphaGraphics" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_americancancersociety.gif" alt="American Cancer Society" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <a class="wrapper" href="customers/index.htm">
            <img src="images/customerlogos/75_pipprinting.jpg" alt="PIP Printing" name="aaa" class="imgSpacer" id="aaa2" />
          </a>
          <img src="images/customerlogos/75_att.jpg" alt="ATT" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_bestwestern.jpg" alt="Best Western" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_century21.jpg" alt="Century 21" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_chicagotitle.jpg" alt="Chicago TItle" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_chiquita.gif" alt="Chiquita" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_cincinnati_reds.gif" alt="Cincinnati Reds" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_citibank.gif" alt="Citibank" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_coldwellbanker.jpg" alt="Coldwell Banker" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_dg.jpg" alt="Dolce Gabbana" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_dominos.jpg" alt="Dominos" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_dowjones.jpg" alt="Dow Jones" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_fidelity.jpg" alt="Fidelity National Title" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_firstamericantitle.gif" alt="First American Title" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_ikon.jpg" alt="IKON" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_instyprints.jpg" alt="Insty-Prints" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_kwikkopy.jpg" alt="Kwik Kopy" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_letterstream.gif" alt="LetterStream, Inc" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_lucent.jpg" alt="Lucent Technologies" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_mailboxesetc.jpg" alt="Mail Boxes Etc" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_MC_stack_4c.jpg" alt="Mayo Clinic" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_minutemanpress.jpg" alt="Minuteman Press" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_nra.jpg" alt="NRA" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_nyt.jpg" alt="New York Times" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_oldrepublic.jpg" alt="Old Republic" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_postcardmania.gif" alt="PostcardMania" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_prada.jpg" alt="Prada" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_proctorgamble.gif" alt="Proctor and Gamble" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_remax.jpg" alt="REMAX" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_salvationarmy.jpg" alt="Salvation Army" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_shutterfly.jpg" alt="Shutterfly" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_sirSpeedy.jpg" alt="Sir Speedy" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_terribles.jpg" alt="Terribles Hotel" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_uofarizona.jpg" alt="U of Arizona" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_uofiowa.jpg" alt="University of Iowa" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_uofmemphis.jpg" alt="University of Memphis" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_uofmontana.jpg" alt="University of Montana" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_uofpreschurch.jpg" alt="UP" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_uoftennessee.jpg" alt="University of Tennessee" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_upsstore.jpg" alt="UPS Store" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_usc.jpg" alt="USC" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_ustreasury.jpg" alt="US Treasury" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_uw_health.jpg" alt="UW Health" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_venetian.gif" alt="Venetian" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_weightwatchers.gif" alt="Weight Watchers" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_wellsfargo.jpg" alt="Wells Fargo" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_xerox.jpg" alt="Xerox" name="aaa" class="imgSpacer" id="aaa">
        </a>
        <a class="wrapper" href="customers/index.htm">
          <img src="images/customerlogos/75_yellowpages.jpg" alt="Yellow Pages" name="aaa" class="imgSpacer" id="aaa">
        </a>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
  <script type="text/javascript" src="js/customerScroller.js"></script>
  <p></p>
  <p></p>


</body>

Answer 1

看来您已获得 <script>标记路径不正确。我用 CDN 替换了它并且它可以工作。

A底部<body>标签，

替换:

<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>

与:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Fiddle

更新:

jquery-1.3.2 无法继续工作并没有真正令人信服的原因，因此如果应用程序崩溃，很可能会发生其他问题。 Fiddle 示例运行的事实是一个线索...找出差异所在。