2
所以，基本上我的投资组合中的图像滑块都可以在我的本地文件（在我的桌面上）上正常工作。尽管只要我将它上传到我的现场网站，它就决定在我的第一个投资组合瓷砖（唯一有效的）之后完全不工作。Image Slider JavaScript问题
目前的JavaScript不是很漂亮，很重复，我认为这就是问题所在。我只是复制和粘贴每个滑块的JavaScript在一个.js文件与不同的编号，以符合不同的编号的滑块，即＃slider1，＃slider2等
我想知道的是有办法我的投资组合中的滑动条的所有ID都被放入一个JavaScript脚本中，而不是使用不同的元素名称重复几次？现在这只是不必要的重复。
如果你不认为这就是为什么它没有在现场工作的原因，请你指出我正确的方向，它可能是什么？非常感激！
直播现场： www.hghazni.com
// portfolio slider
jQuery(document).ready(function ($) {
$('#checkbox').change(function(){
setInterval(function() {
moveRight();
}, 3000);
});
\t var slideCount = $('#slider ul li').length;
\t var slideWidth = $('#slider ul li').width();
\t var slideHeight = $('#slider ul li').height();
\t var sliderUlWidth = slideCount * slideWidth;
\t $('#slider').css({ width: slideWidth, height: slideHeight });
\t $('#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);
});
\t var slideCount = $('#slider2 ul li').length;
\t var slideWidth = $('#slider2 ul li').width();
\t var slideHeight = $('#slider2 ul li').height();
\t var sliderUlWidth = slideCount * slideWidth;
\t $('#slider2').css({ width: slideWidth, height: slideHeight });
\t $('#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);
});
\t var slideCount = $('#slider3 ul li').length;
\t var slideWidth = $('#slider3 ul li').width();
\t var slideHeight = $('#slider3 ul li').height();
\t var sliderUlWidth = slideCount * slideWidth;
\t $('#slider3').css({ width: slideWidth, height: slideHeight });
\t $('#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);
});
\t var slideCount = $('#slider4 ul li').length;
\t var slideWidth = $('#slider4 ul li').width();
\t var slideHeight = $('#slider4 ul li').height();
\t var sliderUlWidth = slideCount * slideWidth;
\t $('#slider4').css({ width: slideWidth, height: slideHeight });
\t $('#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);
});
\t var slideCount = $('#slider5 ul li').length;
\t var slideWidth = $('#slider5 ul li').width();
\t var slideHeight = $('#slider5 ul li').height();
\t var sliderUlWidth = slideCount * slideWidth;
\t $('#slider5').css({ width: slideWidth, height: slideHeight });
\t $('#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);
});
\t var slideCount = $('#slider6 ul li').length;
\t var slideWidth = $('#slider6 ul li').width();
\t var slideHeight = $('#slider6 ul li').height();
\t var sliderUlWidth = slideCount * slideWidth;
\t $('#slider6').css({ width: slideWidth, height: slideHeight });
\t $('#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>
\t \t \t \t \t \t <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>
\t \t </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>
\t <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>
\t \t \t \t \t \t <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>
\t \t \t \t \t </div>
\t \t \t \t \t <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>
\t \t \t \t \t \t <p class="dummy-text">H&H is an international wholesale Tyre distributor based in Scotland, Glasgow.</p>
\t \t \t \t \t \t <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>
\t \t \t \t \t </div>
\t \t \t \t \t <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>
\t \t \t \t \t \t <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>
\t \t \t \t \t \t <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>
\t \t \t \t \t </div>
\t \t \t \t \t <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>
\t \t \t \t \t \t <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>
\t \t \t \t \t \t <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>
\t \t \t \t \t </div>
\t \t \t \t \t <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>
\t \t \t \t \t \t <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>
\t \t \t \t \t \t <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>
\t \t \t \t \t </div>
\t \t \t \t \t <div>
\t \t \t \t \t \t <div class="dummy-img"><img src="img/thoughtnova_monitor.png" style="width: 100%;
auto: 100%;"/></div>
\t \t \t \t \t \t <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>
\t \t \t \t \t \t <p class="dummy-text">I designed this particular logo in Adobe Illustrator in 2012.</p>
\t \t \t \t \t </div>
\t \t \t \t \t <div>
\t \t \t \t \t \t <div class="dummy-img"><img src="img/iosis_monitor.png" style="width: 100%;
auto: 100%;"/></div>
\t \t \t \t \t \t <p class="dummy-text">A health and beauty company that wanted a new brand and website for their budding business.</p>
\t \t \t \t \t \t <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>
\t \t \t \t \t </div>
\t \t \t \t \t <div>
\t \t \t \t \t \t <div class="dummy-img"><img src="img/lp_monitor.png" style="width: 100%;
auto: 100%;"/></div>
\t \t \t \t \t \t <p class="dummy-text">Another design agency logo I designed in 2013 using Adobe Illustrator and Photoshop.</p>
\t \t \t \t \t </div>
\t \t \t \t \t <span class="loading"></span>
\t \t \t \t \t <span class="icon close-content"></span>
\t \t \t \t </div>
\t \t \t </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:[email protected]" 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>