[英]Js not working and I am fairly new to Js and JQuery. Also there are no error messages
這是我的js，相冊的相關CSS和html。 我的相冊應該自動在照片之間循環，或者可以使用上一個和下一個按鈕在照片之間循環。 但是，兩者均無法正常工作。 我不確定在HTML文檔中是否正確引用了js和jquery庫。 我對js和jquery還是比較陌生，因此任何有關我的代碼可能有問題的信息都將有所幫助。 謝謝。 ps。 html在我的帖子中有點奇怪。
$(document).ready(function() { var currentIndex = 0, items = $('.container div'), itemAmt = items.length; function cycleItems() { var item = $('.container div').eq(currentIndex); items.hide(); item.css('display','inline-block'); } var autoSlide = setInterval(function() { currentIndex += 1; if (currentIndex > itemAmt - 1) { currentIndex = 0; } cycleItems(); }, 3000); $('.next').click(function() { clearInterval(autoSlide); currentIndex += 1; if (currentIndex > itemAmt - 1) { currentIndex = 0; } cycleItems(); }); $('.prev').click(function() { clearInterval(autoSlide); currentIndex -= 1; if (currentIndex < 0) { currentIndex = itemAmt - 1; } cycleItems(); }); });
/*relavent CSS not sure if this would effect js at all?*/ .img-cont { max-width: 400px; background-color: black; margin: 0 auto; text-align: center; position: relative; } .img-cont div { background: rgba(0, 0, 0, 0.55); width: 100%; display: inline-block; display: none; } .img-cont img { width: 100%; height: auto; } button { position: absolute; } .next { right: 5px; } .prev { left: 5px; }
<!DOCTYPE html> <html> <head> <title>Shear Excellence</title> <link href="site.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Tangerine"> <!--Current Fonts add | after each in url to simplify--> <link href="https://fonts.googleapis.com/css?family=Ewert|Sigmar+One|Molle:400i|Mr+Bedfort|Norican" rel="stylesheet"> <!--google fonts--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--mobile friendly feature to size the window properly need to test--> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> </head> <body> <div id="main"> <div id="header"> Gallery </div> <div id="nav-menu"> <ul> <li><a href="http://www.shearexcellence.biz/index">Home</a></li> <li><a href="http://www.shearexcellence.biz/services">Services</a></li> <li id="current"><a href="http://www.shearexcellence.biz/photo_album">Gallery</a></li> <li><a href="http://www.shearexcellence.biz/about">About Us</a></li> </ul> </div> <div class="soc-media"> <a class="twitter-share-button" href="https://twitter.com/home?status=Shear%20Excellence%20Salon%20is%20the%20best!" target="_blank"><img src="http://i.imgur.com/uWCjqvX.png"></a> <a class="facebook" href="http://www.facebook.com/sharer/sharer.php?u=http://www.shearexcellence.biz&title=Shear Excellence Salon" target="_blank"><img src="http://i.imgur.com/le28rhL.png"></a> <a class="pinterest" href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.shearexcellence.biz&media=http%3A%2F%2Fi.imgur.com%2Ff0BEf45.jpg" target="_blank"><img src="http://i.imgur.com/CcH1QLt.png"></a> <a class="google" href="https://plus.google.com/share?url=[http://www.shearexcellence.biz]" target="_blank"><img src="http://i.imgur.com/JGUF97X.png"></a> </div> <button class="next">Next</button> <button class="prev">Previous</button> <div class="img-cont"> <div style="display: inline-block;"> <img src="http://i.imgur.com/qlkUBfl.jpg"/> </div> <div> <img src="http://i.imgur.com/WiMIaUL.jpg"/> </div> <div> <img src="http://i.imgur.com/LsPrhg5.jpg"/> </div> <div> <img src="http://i.imgur.com/9SsZHVO.jpg"/> </div> <div> <img src="http://imgur.com/WSlGugy.jpg"/> </div> <div> <img src="http://imgur.com/GkPzEX7.jpg"/> </div> <div> <img src="http://imgur.com/WpYyjyQ.jpg"/> </div> <div> <img src="http://i.imgur.com/ilDrPeq.jpg"/> </div> </div> <div id="footer"> <p> Shear Excellence Salon is located at <br> Phenix Salon Suites <br> <a href="https://www.google.com/maps/place/Phenix+Salon+Suites/@45.0535694,-93.3687602,17z/data=!3m1!4b1!4m5!3m4!1s0x52b336dcae664ceb:0x39e976c341f8540f!8m2!3d45.0535694!4d-93.3665715">145 Willow Bend, Suite #107 Crystal, Minnesota 55428</a> <br> <a href="tel: +1-763-807-4186">+1-763-807-4186</a> <br> © 2016 Nicholas Smith </p> </div> </div> <script type="text/javascript" src="myScripts.js"></script> </body> </html>
將.container div替換為.img-cont div ，以使其正常工作。 由於.container div在您的html中不存在。
$(document).ready(function() { var currentIndex = 0, items = $('.img-cont div'), itemAmt = items.length; function cycleItems() { var item = $('.img-cont div').eq(currentIndex); items.hide(); item.css('display','inline-block'); } var autoSlide = setInterval(function() { currentIndex += 1; if (currentIndex > itemAmt - 1) { currentIndex = 0; } cycleItems(); }, 3000); $('.next').click(function() { clearInterval(autoSlide); currentIndex += 1; if (currentIndex > itemAmt - 1) { currentIndex = 0; } cycleItems(); }); $('.prev').click(function() { clearInterval(autoSlide); currentIndex -= 1; if (currentIndex < 0) { currentIndex = itemAmt - 1; } cycleItems(); }); });
/*relavent CSS not sure if this would effect js at all?*/ .img-cont { max-width: 400px; background-color: black; margin: 0 auto; text-align: center; position: relative; } .img-cont div { background: rgba(0, 0, 0, 0.55); width: 100%; display: inline-block; display: none; } .img-cont img { width: 100%; height: auto; } button { position: absolute; } .next { right: 5px; } .prev { left: 5px; }
<!DOCTYPE html> <html> <head> <title>Shear Excellence</title> <link href="site.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Tangerine"> <!--Current Fonts add | after each in url to simplify--> <link href="https://fonts.googleapis.com/css?family=Ewert|Sigmar+One|Molle:400i|Mr+Bedfort|Norican" rel="stylesheet"> <!--google fonts--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--mobile friendly feature to size the window properly need to test--> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> </head> <body> <div id="main"> <div id="header"> Gallery </div> <div id="nav-menu"> <ul> <li><a href="http://www.shearexcellence.biz/index">Home</a></li> <li><a href="http://www.shearexcellence.biz/services">Services</a></li> <li id="current"><a href="http://www.shearexcellence.biz/photo_album">Gallery</a></li> <li><a href="http://www.shearexcellence.biz/about">About Us</a></li> </ul> </div> <div class="soc-media"> <a class="twitter-share-button" href="https://twitter.com/home?status=Shear%20Excellence%20Salon%20is%20the%20best!" target="_blank"><img src="http://i.imgur.com/uWCjqvX.png"></a> <a class="facebook" href="http://www.facebook.com/sharer/sharer.php?u=http://www.shearexcellence.biz&title=Shear Excellence Salon" target="_blank"><img src="http://i.imgur.com/le28rhL.png"></a> <a class="pinterest" href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.shearexcellence.biz&media=http%3A%2F%2Fi.imgur.com%2Ff0BEf45.jpg" target="_blank"><img src="http://i.imgur.com/CcH1QLt.png"></a> <a class="google" href="https://plus.google.com/share?url=[http://www.shearexcellence.biz]" target="_blank"><img src="http://i.imgur.com/JGUF97X.png"></a> </div> <button class="next">Next</button> <button class="prev">Previous</button> <div class="img-cont"> <div style="display: inline-block;"> <img src="http://i.imgur.com/qlkUBfl.jpg"/> </div> <div> <img src="http://i.imgur.com/WiMIaUL.jpg"/> </div> <div> <img src="http://i.imgur.com/LsPrhg5.jpg"/> </div> <div> <img src="http://i.imgur.com/9SsZHVO.jpg"/> </div> <div> <img src="http://imgur.com/WSlGugy.jpg"/> </div> <div> <img src="http://imgur.com/GkPzEX7.jpg"/> </div> <div> <img src="http://imgur.com/WpYyjyQ.jpg"/> </div> <div> <img src="http://i.imgur.com/ilDrPeq.jpg"/> </div> </div> <div id="footer"> <p> Shear Excellence Salon is located at <br> Phenix Salon Suites <br> <a href="https://www.google.com/maps/place/Phenix+Salon+Suites/@45.0535694,-93.3687602,17z/data=!3m1!4b1!4m5!3m4!1s0x52b336dcae664ceb:0x39e976c341f8540f!8m2!3d45.0535694!4d-93.3665715">145 Willow Bend, Suite #107 Crystal, Minnesota 55428</a> <br> <a href="tel: +1-763-807-4186">+1-763-807-4186</a> <br> © 2016 Nicholas Smith </p> </div> </div> <script type="text/javascript" src="myScripts.js"></script> </body> </html>
使用中轉js和jQuery的回調完成功能無法正常工作。
[英]Callback complete function not working properly using transit js and jQuery.
HTML 和 jquery 的新功能。 無法顯示我的錯誤消息
[英]New to HTML and jquery. Having trouble getting my error messages to show
使用jQuery時出現“語法錯誤，無法識別的表達式”錯誤。 我究竟做錯了什么？
[英]“Syntax error, unrecognized expression” error whilst using jQuery. What am I doing wrong?
我在jquery ui工具提示和bootstrap.js中面臨沖突，因此我將以下解決方案作為建議的新別名並收到錯誤：-
[英]I am facing conflict in jquery ui tooltip and bootstrap.js, so I put the below solution as suggested for new alias and getting the error :-
我正在加載圖像而不是iframe和使用jquery在同一位置播放視頻的圖像onclick。 在台式機上工作，但不在移動設備上工作嗎？
[英]I am loading image instead of iframe & onclick on image playing video on same place using jquery. Working for desktop but not for mobile devices?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.