0
我構建了一個滑塊，它具有時間滑動功能，滑動按鈕並滑過前一個和下一個箭頭。如何以更面向對象的方式編寫我的jQuery滑塊的代碼？
下面是HTML：
<div id="viewport-container">
<section id="sliding-container">
<article id="slide-0" class="displayed" style="display:block;"><div class="description"></div></article>
<article id="slide-1" style="display:none"><div class="description"><span></span></div></article>
<article id="slide-2" style="display:none"><div class="description"><span></span></div></article>
<article id="slide-3" style="display:none"><div class="description"><span></span></div></article>
</section>
<ul id="arrows-nav">
<li><a id="prev-arrow" href="#"></a></li>
<li><a id="next-arrow" href="#"></a></li>
</ul>
</div>
<div id="nav-container">
<nav id="slider-nav">
<a id="btn-0" href="#slide-0" class="active"></a>
<a id="btn-1" href="#slide-1"></a>
<a id="btn-2" href="#slide-2"></a>
<a id="btn-3" href="#slide-3"></a>
</nav>
</div>
這裏的CSS：
#viewport-container {
height: 250px;
width: 980px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
#sliding-container {
width: 100%;
}
#slide-0 {
background-image: url(/Images/slide_home.jpg);
height: 250px;
width: 980px;
position: absolute;
}
#slide-1 {
background-image: url(/Images/slide_informatica.jpg);
height: 250px;
width: 980px;
position: absolute;
}
#slide-2 {
background-image: url(/Images/slide_musica.jpg);
height: 250px;
width: 980px;
position: absolute;
}
#slide-3 {
background-image: url(/Images/slide_recensioni.jpg);
height: 250px;
width: 980px;
position: absolute;
}
#slide-0:before, #slide-1:before, #slide-2:before, #slide-3:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(black, transparent 1.5%, transparent 99%, black);
}
.description {
position: absolute;
width: 100px;
height: 100px;
top: 100px;
right: 100px;
background: url(/images/description.png);
/*padding: 37px 33px 40px 40px;*/
border-radius: 7px;
}
.title-description{
color:#fff;
}
#arrows-nav {
padding: 0;
margin: 0;
}
#arrows-nav li a {
width: 27px;
height: 45px;
margin: -17px 0 0;
display: block;
position: absolute;
top: 50%;
cursor: pointer;
}
#prev-arrow {
background: url(/Images/prev-arrow.png) no-repeat 0 0;
left: 0px;
}
#next-arrow {
background: url(/Images/next-arrow.png) no-repeat 0 0;
right: 0px;
}
#slider-nav {
text-align: center;
margin: 0 auto;
position: relative;
width: 980px;
padding-top: 10px;
padding-bottom: 10px;
}
#slider-nav:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(to right, #fff, #ddd, #ddd, #fff);
}
#slider-nav a {
width: 10px;
height: 10px;
display: inline-block;
background: #ddd;
border-radius: 50%;
}
#slider-nav a:hover {
background: #999;
}
#slider-nav a.active {
background: #999;
}
和這裏的腳本代碼
<script>
var $navButtons = $("#slider-nav > a");
var $navArrow = $("#arrows-nav a");
var timing = 3500;
Manage();
SlideShow();
function SlideShow() {
var interval = setInterval("SlideSwitch()", timing);
$('#sliding-container').hover(
function() {
clearInterval(interval)
},
function() {
interval = setInterval(SlideSwitch, timing)
}
);
$('#slider-nav').hover(
function() {
clearInterval(interval)
},
function() {
interval = setInterval(SlideSwitch, timing)
}
);
}
function Manage() {
$navArrow.click(function (event) {
event.preventDefault();
var $selectedArrow = $(this);
var idSelectedArrow = $selectedArrow.attr("id");
SlideWithArrow(idSelectedArrow);
});
$navButtons.click(function (event) {
event.preventDefault();
var $selectedButton = $(this);
var rawIdSlideToFadeIn = $selectedButton.attr("href");
$navButtons.removeClass("active");
$selectedButton.addClass("active");
CrossFading(rawIdSlideToFadeIn);
});
};
function SlideSwitch() {
var $activeButton = $("#slider-nav > a.active");
var $nextButton = $activeButton.next().length
? $activeButton.next()
: $('#slider-nav > a:first');
$activeButton.removeClass("active");
$nextButton.addClass("active");
var $activeSlide = $("article.displayed");
var $nextSlide = $activeSlide.next().length
? $activeSlide.next()
: $('#sliding-container > article:first');
var idActiveSlide = $activeSlide.attr("id");
var idNextSlide = $nextSlide.attr("id");
if (idActiveSlide != idNextSlide) {
$activeSlide.removeClass("displayed").css("style", "none").fadeOut();
$nextSlide.addClass("displayed").css("style", "block").fadeIn();
}
};
function SlideWithArrow(idArrow) {
var $activeButton = $("#slider-nav > a.active");
var $prevButton = $activeButton.prev().length
? $activeButton.prev()
: $('#slider-nav > a:last');
var $nextButton = $activeButton.next().length
? $activeButton.next()
: $('#slider-nav > a:first');
var idPrevArrow = $("#prev-arrow").attr("id");
var idNextArrow = $("#next-arrow").attr("id");
var $activeSlide = $("article.displayed");
var $nextSlide = $activeSlide.next().length
? $activeSlide.next()
: $('#sliding-container > article:first');
var $prevSlide = $activeSlide.prev().length
? $activeSlide.prev()
: $('#sliding-container > article:last');
if (idArrow == idPrevArrow) {
$activeButton.removeClass("active");
$prevButton.addClass("active");
$activeSlide.removeClass("displayed").css("style", "none").fadeOut();
$prevSlide.addClass("displayed").css("style", "block").fadeIn();
}
if (idArrow == idNextArrow) {
$activeButton.removeClass("active");
$nextButton.addClass("active");
$activeSlide.removeClass("displayed").css("style", "none").fadeOut();
$nextSlide.addClass("displayed").css("style", "block").fadeIn();
}
};
function CrossFading(rawIdSlideToFadeIn) {
var $slideToFadeIn = $(rawIdSlideToFadeIn);
var $slideToFadeOut = $("article.displayed");
var idSlideToFadeOut = $slideToFadeOut.attr("id");
var idSlideToFadeIn = $slideToFadeIn.attr("id");
if (idSlideToFadeIn != idSlideToFadeOut) {
$slideToFadeOut.removeClass("displayed").css("style", "none").fadeOut();
$slideToFadeIn.addClass("displayed").css("style", "block").fadeIn();
}
};
</script>
三個功能SlideSwitch()，SlideWithArrow(idSelectedArrow)和CrossFading(rawIdSlideToFadeIn)檢索每個活動按鈕（即那些按鈕相應g到顯示的幻燈片）和有效幻燈片（即，顯示的幻燈片）。我想要A）創建包含「活動按鈕和活動幻燈片」狀態的對象「活動按鈕+幻燈片」，並且B）使用此對象作爲上述三個功能的參考，而不是要求這些功能檢索活動按鈕&幻燈片。
有人能給我任何提示，以我解釋過的方式重寫我的代碼嗎？
非常感謝。