我在工作申请中被要求从头开始制作jQuery滑块插件。
我刚毕业时是一名计算机科学工程师,说实话,我从未在大学里接受关于jQuery的教育。完全没有。
我知道的一点点,是因为我已经阅读了文档并进行了一些实验。
但是jQuery滑块与我目前的能力相差甚远。
我正在阅读github http://rafbm.github.io/howtomakeaslider/上的这篇文章,这是非常具有说明性的,但是仍然只是复制代码(这是我完全不理解的方式)是没有价值的,因为我需要/想要的是了解如何做一个。
关于我已经完成的小型自由职业,这很容易,因为我只是在寻找插件,但现在我意识到我需要开始学习如何自己制作这些工具,并且它从做滑块开始会很好。
我需要什么?就像我在阅读时一样,我应该创建一个滑块类并为next(),prev()和goTo()滑动方法创建方法。问题在于,对于我所听到的,javascript / jQuery不是一种纯粹的OOP语言,而且它的完成方式不同。
将图像存储在数组中需要的基本内容是什么,知道当前位置并滑动到下一个/上一个位置?
非常感谢帮助。我的HTML和CSS标记如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Slider Plugin</title>
<style type="text/css">
a{
text-decoration: none;
color: black;
text-align: center;
}
.slider{
width: 300px;
height: 200px;
overflow: hidden;
float: left;
}
.slider > ul{
position: relative;
list-style: none;
margin: 0;
padding: 0;
-webkit-transition: 0.5s left;
-moz-transition: 0.5s left;
-ms-transition: 0.5s left;
-o-transition: 0.5s left;
}
.slider > ul li img{
width: 300px;
height: 200px;
overflow: hidden;
}
.img-thumb-container > ul{
list-style: none;
margin: 0;
padding: 0;
}
.thumb{
width: 50px;
height: 50px;
display: inline-block;
text-align: center;
}
.img-thumb-container{
float: left;
height: 150px;
width: 200px;
}
</style>
<script src="js/jquery.js"></script>
<script src="js/slider.js"></script>
</head>
<body>
<div class="img-thumb-container">
<ul>
<a href="#"><li><button type="button">↑</button></li></a>
<a href="#"><li>
<img src="images/s1.jpg" class="thumb">
</li></a>
<a href="#"><li>
<img src="images/s2.jpg" class="thumb">
</li></a>
<a href="#"><li>
<img src="images/s3.jpg" class="thumb">
</li></a>
<a href="#"><li><button type="button">↓</button></li></a>
</ul>
</div>
<div class="slider">
<ul>
<li><img src="images/s1.jpg"></li>
<li><img src="images/s2.jpg"></li>
<li><img src="images/s3.jpg"></li>
</ul>
</div>
</body>
</html>
这是我理解的基本标记。
答案 0 :(得分:10)
在求职面试中我也被问过同样的问题,以下是我过去采访的代码:
HTML CODE:
<div id="background-slideshow">
<img id="home-image" class="slides" src="img/home-image.jpg" />
<img id="shop-image" class="slides" src="img/shop-image.jpg" />
<img id="dine-image" class="slides" src="img/dine-image.jpg" />
<img id="watch-image" class="slides" src="img/watch-image.jpg" />
</div>
CSS代码:
div#background-slideshow{ position: relative; height: 745px; width: 1440px; position: absolute; top: 0px; right: -10px; } img.slides{ position: absolute; width: 100%; top: 0px; right: 0px; height: 745px; } img#home-image{ z-index: -666; } img#shop-image{ z-index: -777; } img#dine-image{ z-index: -888; } img#watch-image{ z-index: -999; }
JQUERY CODE:
var indexer = 0; var animateInterval; function animate(){ if(indexer == 0){ $("#background-slideshow > #watch-image").fadeOut(2000); $("#background-slideshow > #home-image").fadeIn(2000); } else if(indexer == 1){ $("#background-slideshow > #home-image").fadeOut(2000); $("#background-slideshow > #shop-image").fadeIn(2000); } else if(indexer == 2){ $("#background-slideshow > #shop-image").fadeOut(2000); $("#background-slideshow > #dine-image").fadeIn(2000); } else if(indexer == 3){ $("#background-slideshow > #dine-image").fadeOut(2000); $("#background-slideshow > #watch-image").fadeIn(2000); } if(indexer == 3) indexer = 0; else indexer++; } animateInterval = setInterval(animate, 10000); animate();
尝试一下,祝你好运,我也从未在学校里学过它。
答案 1 :(得分:5)
你应该查看这个免费课程:
在第一章中介绍了jQuery的基础知识后,您将学习如何从头开始构建滑块。
主要视频在关于效果 - 强制滑块(First Stab)的章节中。
答案 2 :(得分:3)
不要感到难过的男人。我是一名软件工程师。到目前为止,我有5年的PHP开发经验。 5年作为SEO工程师的经验,我是一名高级UI开发人员,在学校也没有教过我!大声笑。我对你的最好建议是:
我通过这种方式自学了很多东西。教程需要很长时间,看起来你需要一个快速的解决方案。
最终请参加教程。
祝你好运答案 3 :(得分:1)
HTML:
<div id="background-slideshow" class="background-slideshow">
<img class="current" src="img/1.jpg" />
<img src="img/2.jpg" />
<img src="img/3.jpg" />
<img src="img/4.jpg" />
<img src="img/5.jpg" />
</div>
CSS:
div.background-slideshow img {
display: none;
z-index: 1;
width: 100%;
vertical-align: middle;
}
div.background-slideshow img.current {
display: inline;
z-index: 2;
}
div.background-slideshow img.previous {
z-index: 1;
}
jQuery的:
var animateInterval;
function rotateImagesForward(){
var oCurrentPhoto = $("#background-slideshow img.current");
var oNextPhoto = oCurrentPhoto.next();
if (oNextPhoto.length == 0) {
oNextPhoto = $("#background-slideshow img:first");
}
oCurrentPhoto.removeClass("current").addClass("previous");
oNextPhoto.css({opacity:0.0}).addClass("current")
.animate({opacity:1.0}, 500, function(){
oCurrentPhoto.removeClass("previous");
});
}
animateInterval = setInterval(rotateImagesForward, 4000);