2016-09-19 90 views
1

我們的主頁上有一個簡單的圖像滾輪。它突然停止工作。我沒有編寫代碼,但在查找問題時,我注意到了HTML鏈接到舊版本的javascript,jquery-1.3.2.min.js。CSS滾輪停止

希望老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>

+0

你有沒有做過任何基本的調試,比如檢查瀏覽器的控制檯是否有錯誤? –

+0

小提琴鏈接應該是http://jsfiddle.net/Kfininen/y3aq0qsr/ – Goose

+1

你是小提琴是太多的代碼,並不清楚我想要找什麼。您是否可以將其僅縮減爲演示和複製問題所需的代碼?此外,目前還不清楚它是如何爆發的。你說「它突然停止工作」。什麼是預期的行爲和發生了什麼?我知道這對於一些編碼經驗不多的人來說可能很重要,但是現在回答這個問題是非常困難的。 – Goose

回答

0

它看起來像你有你的<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不會繼續工作,因此,如果應用爆發則很可能是別的事情上。事實上,小提琴的例子是工作是一個線索......找到有什麼不同。

+0

這導致只顯示一個標誌,仍然不滾動。但是,我改變了小提琴中的代碼,它幾乎看起來像是做同樣的事情。 ATT徽標顯示爲靜態圖像,但看起來其他人正在滾動。不幸的是,當我在瀏覽器中查看時,這不是實際頁面中的行爲。瀏覽器中呈現的頁面只顯示ATT標誌,並且沒有滾動。 –

+0

它在小提琴上工作 – mhatch

+0

給它幾秒鐘,然後滾動開始。我沒有深入研究代碼的細節。您可能會在文件結構中缺少其他引用。 – mhatch