Question

Hy大家，

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

模板如下

My Slider

以及上层模板的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}的文章淡入;等等。

一周前我开始为这个目标而奋斗，所以我问你的帮助。

非常感谢

Answer 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在这里非常重要 - 所以当你改变我给你的CS时要小心。

Answer 2

为什么不在你的href中添加一个javascript函数，它只能改变你文章的类。

当您更改文章的类别时，您可以显示它们（我们可以看到，类=幻灯片或显示幻灯片）

我不知道这是不是你想做什么？

你尝试过一些东西吗？

Answer 3

我做到了（p !!）

现在这是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：他的提示向我展示了正确的方法。

非常感谢

我想用划痕编写带有jquery的滑块

3 个答案: