Question

我制作了一个滑块，它具有时间滑动，滑过按钮和滑过上一个和下一个箭头的功能。

这是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)检索每个活动按钮（即与显示的幻灯片对应的按钮）和活动幻灯片（即显示的幻灯片。）

代码运行良好，但我不喜欢它：我希望A）创建对象“活动按钮+幻灯片”，其中包含“活动按钮和活动幻灯片”状态，以及B）使用此对象作为上面三个函数的参考，而不是要求这些函数检索活动按钮＆amp;滑动。

有人可以按照我解释的方式给我任何修改代码的提示吗？

非常感谢。

Answer 1

最好将您的图像放在一个文件夹中，并使用ajax下载它们。我的意思是写一个函数，如果用户按下下一个按钮ajax运行并下载图像，并使用jquery html命令，你可以把新图像而不是旧图像你应该在编码前阅读这篇文章 interval slider with ajax

如何以更面向对象的方式为我的jQuery滑块编写代码？

1 个答案: