Как написать код для моего слайдера 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>
вот ксс:
#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) извлекать каждую активную кнопку (т.е. кнопки, соответствующие отображаемому слайду) и активный слайд (то есть отображаемый слайд).
Код работает хорошо, но мне это не нравится: я хотел бы, чтобы А) создал объект "активная кнопка + слайд", который инкапсулирует состояние "активная кнопка и активный слайд", и Б), используя этот объект в качестве ссылки для три вышеупомянутые функции вместо этого требуют для этих функций задачу извлечения активной кнопки и слайда.
Может ли кто-нибудь подсказать мне, как переработать мой код, как я объяснил?
Большое спасибо.
1 ответ
Решение
Лучше поместить свое изображение в папку и использовать ajax для их загрузки. я имею в виду написать функцию, которая, если пользователь нажал кнопку "Далее", запускает ajax и загружает изображение, и с помощью jquery html порядка вы можете поместить это новое изображение вместо старого изображения, которое вы должны прочитать перед слайдером интервала кодирования с помощью ajax