[英]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.