我想用 jquery 从头开始编写一个滑块答案

【问题标题】：I would like to code a slider with jquery from scratches我想用 jquery 从头开始编写一个滑块
【发布时间】：2013-12-04 00:23:18
【问题描述】：

大家好，

我的任务是用纯 HTML/Jquery 代码实现一个滑块。

模板如下

上面的模板的html代码如下

<div id="viewport-container">
    <section id="sliding-container">
        <article id="slide-0" class="slide"><span></span></article>
        <article id="slide-1" class="slide"><span></span></article>
        <article id="slide-2" class="slide"><span></span></article>
        <article id="slide-3" class="displayed-slide"><span></span></article>
    </section>
</div>
<nav id="slider-nav">
    <a href="#slide-0" class="active"></a>
    <a href="#slide-1"></a>
    <a href="#slide-2"></a>
    <a href="#slide-3"></a>
</nav>

我们从显示文章 {ID="slide-0"} 的按钮 {#slide-0} 开始；当我们选择另一个按钮时，假设 {#slide-3} 然后带有 {ID="slide-0"} 的文章淡出，带有 {ID="slide-3} 的文章淡入；当我们选择另一个按钮时，假设{#slide-1} 然后 {ID="slide-3"} 的文章淡出， {ID="slide-1} 的文章淡入；等等。

一周前我开始努力实现这个目标，所以我请求您的宝贵帮助。

非常感谢

【问题讨论】：

抱歉，您卡在哪里了？你有什么问题？
滑块点 index 与滑块 index 相关，所以你应该从那里开始......
向我们展示一些你的 jquery 滑块的代码工作，你得到了错误。在这里，您要求我们为您完成工作。由于您是新手，请注意，如果您遇到问题但无法为您编写代码，我们可以为您提供帮助。

标签： javascript jquery html css slider

【解决方案1】：

这会让你继续前进。你会需要： - http://jquery.com/ - jQuery - http://jqueryui.com/ -JQueryUI

有了这两个，你的工作就很容易了。首先在您的网站中引用 JQuery，然后再引用 JQueryUI。

然后你将在你自己的 JQuery 代码中做这样的事情：

HTML：

<div id="slider">
    <div id="firstSlide">
        <img class="active" src="pics/home/1.1.gif"/>
        <img src="pics/home/1.2.gif"/>
        <img src="pics/home/1.3.gif"/>
    </div>
</div>

CSS：

    #slider
    {
        position: relative;
        height: 180px;
        border-bottom: 3px solid black;
        z-index: 1;
        box-shadow: 0px 0px 10px black;
    }

    #firstSlide
    {
        position: absolute;
        width: 198px;
        height: 100%;
        left: 0%;
        border: 1px solid black;
    }

    #firstSlide img
    {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        z-index: 1;
    }

    #firstSlide img.active
    {
        z-index: 3;
    }

jQuery：

var howLongEffectLasts = 1000;
var timerInterval = 7000;
var slideDelay = 300;
var slideEffect = 'slide';
var slideDirection = 'up';

var timer = setInterval('DoIt1()', timerInterval);

function DoIt1()
{
    var $active = $('#firstSlide' + ' .' + 'active');
    var $next = ($active.next().length > 0) ? $active.next() : $('#firstSlide' + ' ' + 'img:first');
    $next.css('z-index',2);
    $active.toggle(slideEffect, { direction: slideDirection }, howLongEffectLasts, function() {
        $active.css('z-index',1).show().removeClass('active');
        $next.css('z-index',3).addClass('active');
    });
    setTimeout(function() { DoIt1(); }, slideDelay);
}

在 JQuery 中，只需根据需要更改 var。此外，将 CSS 等更改为您自己的需要。 Z-INDEX 在这里非常重要 - 所以当你更改我给你的 CSS 时要小心。

【讨论】：

非常感谢您的建议
很高兴。这将允许您使用不同类型的幻灯片。即：Fade、Explode、Blind、Pop、Bounce、Shake……是的，有很多。

【解决方案2】：

你为什么不在你的href中放一个javascript函数来改变你文章的类别。

当您更改文章的类别时，您可以显示或不显示它们（如我们所见，class=slide 或显示幻灯片）

不知道是不是你想做的？

你有没有尝试过？

【讨论】：

非常感谢您的建议

【解决方案3】：

我做到了（呸！！）

现在这是css

#viewport-container {
height: 250px;
width: 980px;
margin: 0 auto;
overflow: hidden;
}

#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;
}

#slider-nav {
text-align: center;
margin: 10px 0 0 0;
}

#slider-nav a {
width: 10px;
height: 10px;
display: inline-block;
background: #ddd;
border-radius: 50%;
}

#slider-nav a.active {
background: #999;
}

这是html

<head>
<title></title>
<script src="Scripts/jquery-2.0.3.min.js"></script>
<link href="CSS/Slider.css" rel="stylesheet" />

</head>
<body>
<div id="viewport-container">
<section id="sliding-container">
<article id="slide-0" class="displayed" style="display:block;"><span></span></article>
<article id="slide-1" style="display:none"><span></span></article>
<article id="slide-2" style="display:none"><span></span></article>
<article id="slide-3" style="display:none"><span></span></article>
</section>
</div>
<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>

这是脚本

<script>
$(document).ready(function () {
var $navButtons = $("#slider-nav > a");

$navButtons.click(
function () {
var $selectedButton = $(this);
var rawIdSlideToFadeIn = $selectedButton.attr("href");

$navButtons.removeClass("active");
$selectedButton.addClass("active");

crossFading(rawIdSlideToFadeIn);
});

function crossFading(rawIdSlideToFadeIn) {
var $slideToFadeIn = $(rawIdSlideToFadeIn);                
var $slideToFadeOut = $("article.displayed");
var idSlideToFadeIn = $slideToFadeIn.attr("id");
var idSlideToFadeOut = $slideToFadeOut.attr("id");                

if(idSlideToFadeIn != idSlideToFadeOut)
{
$slideToFadeOut.removeClass("displayed").css("style", "none").fadeOut();
$slideToFadeIn.addClass("displayed").css("style", "block").fadeIn();
}
}
});
</script>

是的，这段代码的某些部分需要改进，但是内核已经构建好了，

特别感谢 SushiBalboha：他的提示为我指明了正确的方向。

非常感谢

【讨论】：