圖像滑塊JavaScript問題

Question

因此，基本上我的投資組合中的圖像滑塊在我的本地文件（在桌面上）上都可以正常工作。 盡管將其上傳到實時站點后，它決定在我的第一個投資組合圖塊（唯一起作用的圖塊）之后完全不起作用。

當前的JavaScript不太漂亮，而且很重復，我認為這就是問題所在。 我已經將每個滑塊的JavaScript復制並粘貼到一個具有不同ID的.js文件中，以與滑塊的不同ID相對應，即＃slider1，＃slider2等

我想知道是否有一種方法可以將我投資組合中所有滑塊的ID放入一個JavaScript腳本中，而不是使用不同的元素名稱重復多個ID？ 現在，這只是不必要的重復。

如果您不認為這是無法正常運行的原因，能否請您向我指出可能的其他方向？ 非常感激！

現場網站： www.hghazni.com

 // portfolio slider jQuery(document).ready(function ($) { $('#checkbox').change(function(){ setInterval(function () { moveRight(); }, 3000); }); var slideCount = $('#slider ul li').length; var slideWidth = $('#slider ul li').width(); var slideHeight = $('#slider ul li').height(); var sliderUlWidth = slideCount * slideWidth; $('#slider').css({ width: slideWidth, height: slideHeight }); $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth }); $('#slider ul li:last-child').prependTo('#slider ul'); function moveLeft() { $('#slider ul').animate({ left: + slideWidth }, 200, function () { $('#slider ul li:last-child').prependTo('#slider ul'); $('#slider ul').css('left', ''); }); }; function moveRight() { $('#slider ul').animate({ left: - slideWidth }, 200, function () { $('#slider ul li:first-child').appendTo('#slider ul'); $('#slider ul').css('left', ''); }); }; $('a.control_prev').click(function () { moveLeft(); }); $('a.control_next').click(function () { moveRight(); }); }); // portfolio slider 2 jQuery(document).ready(function ($) { $('#checkbox').change(function(){ setInterval(function () { moveRight(); }, 3000); }); var slideCount = $('#slider2 ul li').length; var slideWidth = $('#slider2 ul li').width(); var slideHeight = $('#slider2 ul li').height(); var sliderUlWidth = slideCount * slideWidth; $('#slider2').css({ width: slideWidth, height: slideHeight }); $('#slider2 ul').css({ width: sliderUlWidth, marginLeft: - slideWidth }); $('#slider2 ul li:last-child').prependTo('#slider2 ul'); function moveLeft() { $('#slider2 ul').animate({ left: + slideWidth }, 200, function () { $('#slider2 ul li:last-child').prependTo('#slider2 ul'); $('#slider2 ul').css('left', ''); }); }; function moveRight() { $('#slider2 ul').animate({ left: - slideWidth }, 200, function () { $('#slider2 ul li:first-child').appendTo('#slider2 ul'); $('#slider2 ul').css('left', ''); }); }; $('a.control_prev').click(function () { moveLeft(); }); $('a.control_next').click(function () { moveRight(); }); }); // portfolio slider 3 jQuery(document).ready(function ($) { $('#checkbox').change(function(){ setInterval(function () { moveRight(); }, 3000); }); var slideCount = $('#slider3 ul li').length; var slideWidth = $('#slider3 ul li').width(); var slideHeight = $('#slider3 ul li').height(); var sliderUlWidth = slideCount * slideWidth; $('#slider3').css({ width: slideWidth, height: slideHeight }); $('#slider3 ul').css({ width: sliderUlWidth, marginLeft: - slideWidth }); $('#slider3 ul li:last-child').prependTo('#slider3 ul'); function moveLeft() { $('#slider3 ul').animate({ left: + slideWidth }, 200, function () { $('#slider3 ul li:last-child').prependTo('#slider3 ul'); $('#slider3 ul').css('left', ''); }); }; function moveRight() { $('#slider3 ul').animate({ left: - slideWidth }, 200, function () { $('#slider3 ul li:first-child').appendTo('#slider3 ul'); $('#slider3 ul').css('left', ''); }); }; $('a.control_prev').click(function () { moveLeft(); }); $('a.control_next').click(function () { moveRight(); }); }); // portfolio slider 4 jQuery(document).ready(function ($) { $('#checkbox').change(function(){ setInterval(function () { moveRight(); }, 3000); }); var slideCount = $('#slider4 ul li').length; var slideWidth = $('#slider4 ul li').width(); var slideHeight = $('#slider4 ul li').height(); var sliderUlWidth = slideCount * slideWidth; $('#slider4').css({ width: slideWidth, height: slideHeight }); $('#slider4 ul').css({ width: sliderUlWidth, marginLeft: - slideWidth }); $('#slider4 ul li:last-child').prependTo('#slider4 ul'); function moveLeft() { $('#slider4 ul').animate({ left: + slideWidth }, 200, function () { $('#slider4 ul li:last-child').prependTo('#slider4 ul'); $('#slider4 ul').css('left', ''); }); }; function moveRight() { $('#slider4 ul').animate({ left: - slideWidth }, 200, function () { $('#slider4 ul li:first-child').appendTo('#slider4 ul'); $('#slider4 ul').css('left', ''); }); }; $('a.control_prev').click(function () { moveLeft(); }); $('a.control_next').click(function () { moveRight(); }); }); // portfolio slider 5 jQuery(document).ready(function ($) { $('#checkbox').change(function(){ setInterval(function () { moveRight(); }, 3000); }); var slideCount = $('#slider5 ul li').length; var slideWidth = $('#slider5 ul li').width(); var slideHeight = $('#slider5 ul li').height(); var sliderUlWidth = slideCount * slideWidth; $('#slider5').css({ width: slideWidth, height: slideHeight }); $('#slider5 ul').css({ width: sliderUlWidth, marginLeft: - slideWidth }); $('#slider5 ul li:last-child').prependTo('#slider5 ul'); function moveLeft() { $('#slider5 ul').animate({ left: + slideWidth }, 200, function () { $('#slider5 ul li:last-child').prependTo('#slider5 ul'); $('#slider5 ul').css('left', ''); }); }; function moveRight() { $('#slider5 ul').animate({ left: - slideWidth }, 200, function () { $('#slider5 ul li:first-child').appendTo('#slider5 ul'); $('#slider5 ul').css('left', ''); }); }; $('a.control_prev').click(function () { moveLeft(); }); $('a.control_next').click(function () { moveRight(); }); }); // portfolio slider 6 jQuery(document).ready(function ($) { $('#checkbox').change(function(){ setInterval(function () { moveRight(); }, 3000); }); var slideCount = $('#slider6 ul li').length; var slideWidth = $('#slider6 ul li').width(); var slideHeight = $('#slider6 ul li').height(); var sliderUlWidth = slideCount * slideWidth; $('#slider6').css({ width: slideWidth, height: slideHeight }); $('#slider6 ul').css({ width: sliderUlWidth, marginLeft: - slideWidth }); $('#slider6 ul li:last-child').prependTo('#slider6 ul'); function moveLeft() { $('#slider6 ul').animate({ left: + slideWidth }, 200, function () { $('#slider6 ul li:last-child').prependTo('#slider6 ul'); $('#slider6 ul').css('left', ''); }); }; function moveRight() { $('#slider6 ul').animate({ left: - slideWidth }, 200, function () { $('#slider6 ul li:first-child').appendTo('#slider6 ul'); $('#slider6 ul').css('left', ''); }); }; $('a.control_prev').click(function () { moveLeft(); }); $('a.control_next').click(function () { moveRight(); }); }); 

  <div id="slider"> <a href="#" class="control_next">></a> <a href="#" class="control_prev"><</a> <ul> <li><img src="img/mj_monitor1.png" alt=""></li> <li><img src="img/mj_monitor2.png" alt=""></li> <li><img src="img/mj_monitor3.png" alt=""></li> <li><img src="img/mj_monitor4.png" alt=""></li> <li><img src="img/mj_monitor5.png" alt=""></li> </ul> </div> <p class="dummy-text">Created in the Bootstrap framework with an assortment of jQuery. This particular website was my final project in University.</p> <p class="dummy-text">It was created for a Pianist who wanted a portfolio website for his work. In addition he also wanted to be able to sell his scores/albums/singles and advertise his concerts.</p> <p class="dummy-text">Unfortunatley the website was unfinished but gave a good idea of how it would have looked if finished. The full development process was recorded in my University blog for this module <a href="https://hghaznidmp.wordpress.com/"><span style="color: #116e96; font-weight: bold;">here.</span></a></p> <p class="dummy-text">Visit the website <a href="http://www.fasttracklifeuk.co.uk/mj"><span style="color: #116e96; font-weight: bold;">here.</span></a></p> </div> <div> <div id="slider2"> <a href="#" class="control_next">></a> <a href="#" class="control_prev"><</a> <ul> <li><img src="img/nlps_monitor1.png" alt=""></li> <li><img src="img/nlps_monitor2.png" alt=""></li> <li><img src="img/nlps_monitor3.png" alt=""></li> <li><img src="img/nlps_monitor4.png" alt=""></li> <li><img src="img/nlps_monitor5.png" alt=""></li> <li><img src="img/nlps_monitor6.png" alt=""></li> <li><img src="img/nlps_monitor7.png" alt=""></li> <li><img src="img/nlps_monitor8.png" alt=""></li> <li><img src="img/nlps_monitor9.png" alt=""></li> </ul> </div> <p class="dummy-text">The Nottingham Loves Paul Smith Project was a celeberation of 40 years of Paul Smith in Nottingham. A project I aqquired for a module at Nottingham Trent University. It was my job as project leader to design the brand, logos and website along with some of the poster work.</p> <p class="dummy-text">I worked closely with fashion and marketing proffesionals for consultantcy for the campaign.</p> <p class="dummy-text">The overall campaign consisted of videos, posters, a social media campaign and my website.</p> <p class="dummy-text">The website was produced in WordPress and was fully responsive. The final campaign was reviewed by a panel of design judges including Paul Smith's center before it was given the green light.</p> </div> <div> <div id="slider3"> <a href="#" class="control_next">></a> <a href="#" class="control_prev"><</a> <ul> <li><img src="img/handh_monitor1.png" alt=""></li> <li><img src="img/handh_monitor2.png" alt=""></li> <li><img src="img/handh_monitor3.png" alt=""></li> <li><img src="img/handh_monitor4.png" alt=""></li> <li><img src="img/handh_monitor5.png" alt=""></li> </ul> </div> <p class="dummy-text">H&H is an international wholesale Tyre distributor based in Scotland, Glasgow.</p> <p class="dummy-text">I produced a responsive, WordPress e-commerce website using WooCommerce. I amended an existing Yell website they had made through Yells marketing team. It was a box standard brochure website with a poor aesthetic design.</p> <p class="dummy-text">The client wanted a booking system for car/tyre services and shop page for their new tyre range 'Sportrak' with a shiny new look.</p> <p class="dummy-text">Overall the product was successful. It hit every requirement the client wanted and produced successful enquiries from day one of launch.</p> <p class="dummy-text">Visit the website <a href="http://www.handhtyres.com"><span style="color: #116e96; font-weight: bold;">here.</span></a></p> </div> <div> <div id="slider4"> <a href="#" class="control_next">></a> <a href="#" class="control_prev"><</a> <ul> <li><img src="img/nlps_monitor1.png" alt=""></li> <li><img src="img/nlps_monitor1.png" alt=""></li> <li><img src="img/nlps_monitor1.png" alt=""></li> <li><img src="img/nlps_monitor1.png" alt=""></li> <li><img src="img/nlps_monitor1.png" alt=""></li> </ul> </div> <p class="dummy-text">Crazy Cricket was a fun project I did in my final year of University. We had 3 hours to produce a brand and set of products with a multi-disciplined team of students for children learning to play cricket.</p> <p class="dummy-text">I produced a simple HTML5/JavaScript website using Notepad on University computers.</p> <p class="dummy-text">Time was the real factor here and we had to make every minute, every decision and every under-taking count.</p> <p class="dummy-text">I produced a simple HTML 5 page with a JavaScript trivia quiz.</p> <p class="dummy-text">Visit Work Journal <a href="https://hghaznidmp.wordpress.com/"><span style="color: #116e96; font-weight: bold;">here.</span></a></p> <p class="dummy-text">Visit the Website <a href="http://www.hghazni.com/cc"><span style="color: #116e96; font-weight: bold;">here.</span></a></p> </div> <div> <div id="slider5"> <a href="#" class="control_next">></a> <a href="#" class="control_prev"><</a> <ul> <li><img src="img/nlps_monitor1.png" alt=""></li> <li><img src="img/nlps_monitor1.png" alt=""></li> <li><img src="img/nlps_monitor1.png" alt=""></li> <li><img src="img/nlps_monitor1.png" alt=""></li> <li><img src="img/nlps_monitor1.png" alt=""></li> </ul> </div> <p class="dummy-text">A Nutraceutical startup approached me to design a new brand identity for late 2016 for their impending launch. They planned to sell suplements and vitamins on their new soon-to-be e-commerce website.</p> <p class="dummy-text">After speaking to the client I got a good unsterstanding of what aesthetic and image they were after. After some research I produced some mock-up sketches to which the below they chose.</p> <div class="dummy-img"><img src="img/alca_sketch.jpg" style="width: 100%; auto: 100%;"/></div> <p class="dummy-text">I began working with the above sketch in Illustrator to produce several veriations. Ending up with the version below.</p> <div class="dummy-img"><img src="img/alca.jpg" style="width: 100%; auto: 100%;"/></div> <p class="dummy-text">I was happy and the client was happy. A job well done.</p> </div> <div> <div id="slider6"> <a href="#" class="control_next">></a> <a href="#" class="control_prev"><</a> <ul> <li><img src="img/hgv3_monitor.png" alt=""></li> <li><img src="img/nlps_monitor1.png" alt=""></li> <li><img src="img/nlps_monitor1.png" alt=""></li> <li><img src="img/nlps_monitor1.png" alt=""></li> <li><img src="img/nlps_monitor1.png" alt=""></li> </ul> </div> <p class="dummy-text">So after further developing my Creative Front-end Dev skills I felt I could produce a much stronger portfolio website to the one I currently had. So I went about researching a new aesthetic. I like having powerful landings for the user to see right off the bat. I wanted to try a beautiful gradient background this time.</p> <p class="dummy-text">The other major considerations I had was that I wanted to design the entire website mobile first so that it would be far easier to scale going up to higher resolutions. To do that I followed <a style="color:#116e96;" href="http://bradfrost.com/blog/post/atomic-web-design/">Atomic Web Design Methodology</a> which allows me a good amount of flexbility when re-arranging my website for different resolutions/break-points.</p> <p class="dummy-text">Though I love Bootstrap I wanted to try a few new frameworks in this version of my portfolio. So I enlisted the aid of <a style="color:#116e96;" href="https://daneden.github.io/animate.css/">Animated.css</a>, <a style="color:#116e96;" href="http://mynameismatthieu.com/WOW/">WoW.js</a> and <a style="color:#116e96;" href="http://fontawesome.io/icons/">Font-awesome Icons.</a></p> <p class="dummy-text">I felt overall it turned out quite well and became extremely responsive but I think after this learning experience I'll definitley be going back to Bootstrap. I think the next version of this portfolio will be designed fully in SASS.</p> <p class="dummy-text">Visit the Website <a href="http://www.hghazni.com"><span style="color: #116e96; font-weight: bold;">here.</span></a></p> </div> <div> <div class="dummy-img"><img src="img/thoughtnova_monitor.png" style="width: 100%; auto: 100%;"/></div> <p class="dummy-text">A logo I designed for my old design company that I used to collaborate with other designers for joint projects.</p> <p class="dummy-text">I designed this particular logo in Adobe Illustrator in 2012.</p> </div> <div> <div class="dummy-img"><img src="img/iosis_monitor.png" style="width: 100%; auto: 100%;"/></div> <p class="dummy-text">A health and beauty company that wanted a new brand and website for their budding business.</p> <p class="dummy-text">We mocked up many ideas and though the above logo was not chosen it was one of my favourites for its simplicity and class. Designed in Adobe Illustrator in 2014.</p> <p class="dummy-text">Below are some of the earliest versions of the logos that I designed for the brand.</p> <div class="dummy-img"><img src="img/iosis_logo_designs.png" style="width: 100%; auto: 100%;"/></div> <p class="dummy-text">Once the client had decided on the right logo for them I further developed colour schemes as per their request.</p> <div class="dummy-img"><img src="img/IOSIS_logo_different_colours.jpg" style="width: 100%; auto: 100%;"/></div> <p class="dummy-text">Overall it was a fun and interesting project/industry to work in.</p> </div> <div> <div class="dummy-img"><img src="img/lp_monitor.png" style="width: 100%; auto: 100%;"/></div> <p class="dummy-text">Another design agency logo I designed in 2013 using Adobe Illustrator and Photoshop.</p> </div> <span class="loading"></span> <span class="icon close-content"></span> </div> </section> </div> <div class="contact-cont"> <div id="contact" class="contact"> <h1>Get in touch</h1> <span></span> <p> If you're interested in getting a new project off the ground or if you need a Creative Front-end Web Developer click the button below! I'll be in touch as soon as possible. </p> <img src="img/hg_avatar.png" alt="" /> <div id="buttons"> <a href="mailto:hghazni@gmail.com" class="btn blue">Contact Me</a> </div> </div> </div> <div class="footer-cont"> <div class="footer"> <ul class="footer-left"> <li><a href="https://twitter.com/haroonghazni"><i class="fa fa-twitter wow animated fadeInUp" aria-hidden="false"></i></a></li> <li><a href="https://codepen.io/hghazni/"><i class="fa fa-codepen wow animated fadeInUp" aria-hidden="true"></i></a></li> <li><a href="https://github.com/hghazni"><i class="fa fa-github wow animated fadeInUp" aria-hidden="true"></i></a></li> </ul> <div class="footer-right"> <ul> <li class="wow animated fadeInUp">Copyright © 2016. <a href="#">Haroon Ghazni</a></li> <li class="wow animated fadeInUp">|</li> <li class="wow animated fadeInUp">Nottingham Based - 07545 850 764</li> <li><a href="#home"><i id="arrowup" class="fa fa-chevron-circle-up wow animated fadeInUp" aria-hidden="true"></i></a></li> </ul> </div> <div class="mob-footer"> <p> Copyright © 2016. <a href="#"> Haroon Ghazni</a> </p></div><br> <div class="arrowupmob"> <a href="#home"><i class="fa fa-chevron-circle-up wow animated fadeInUp" aria-hidden="true"></i></a> </div> </div> </div> </div> <script src="js/classie.js"></script> <script src="js/helper.js"></script> <script src="js/grid3d.js"></script> <script src="js/pslider.js"></script> <script> new grid3D( document.getElementById( 'grid3d' ) ); </script> <script src="js/script.js"></script> <script src="js/wow.js"></script> <script> new WOW().init(); </script> </body> </html> 

Answer 1

我弄清楚了，我在本節的頂部有jQuery鏈接。 把它放在底部，它工作正常。 我不知道那是怎么回事！ 總是小事:)