因此，基本上，我的作品集中的图像 slider 在我的本地文件(在我的桌面上)上都可以正常工作。尽管当我将其上传到我的实时网站后，它决定在我的第一个投资组合图 block (唯一有效的图 block )之后完全不起作用。
当前的 JavaScript 并不漂亮而且相当重复，我认为这就是问题所在。我刚刚将每个 slider 的 JavaScript 复制并粘贴到一个具有不同 id 的 .js 文件中，以与 slider 的不同 id 相对应，即 #slider1、#slider2 等
我想知道是否有一种方法可以将我的投资组合中 slider 的所有 ID 放入一个 JavaScript 脚本中，而不是使用不同的元素名称重复多个脚本？现在只是不必要的重复。
如果您不认为这就是它无法实时运行的原因，您能否为我指出正确的方向，看看它还可能是什么？非常感谢!
实时站点: 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>最佳答案
我发现了，我在该部分的顶部有 jQuery 链接。把它放在底部，效果很好。我不知道那是怎么发生的!总是小事:)
关于javascript - 图像 slider JavaScript 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40894379/