jQuery的图片切换效果淡出幻灯片的jQuery

为了更方便地访问从JavaScript每张幻灯片，每张幻灯片编号在其id名称。那么，副本被放置在一个新的<div>容器，副本的位置，以便更容易控制。

最后，在底部，你创建的标记，允许控制幻灯片的按钮，这样，当你按下按键“1”，例如，停止幻灯片，幻灯片显示“1”。

要看看它是如何结合在一起的好一点，让我们一点点的CSS应用。

body {
    font-family: Arial, sans-serif;
}
div#tmpSlideshow {
    margin: 10px;
    padding: 30px 0 0 0;
    position: relative;
    height: 335px;
    width: 755px;
    border: 1px solid rgb(200, 200, 200);
}
div.tmpSlide {
    position: absolute;
    top: 0;
    left: 0;
    width: 730px;
    height: 332px;
    display: none;
}
div.tmpSlide img {
    float: left;
    margin: 30px 0 0 15px;
    width: 527px;
    border: 1px solid rgb(244, 244, 244);
}
div#tmpSlideshowControls {
    position: absolute;
    bottom: 30px;
    right: 11px;
    width: 175px;
}
div.tmpSlideshowControl {
    border: 1px solid #e1dece;
    float: left;
    margin: 0 5px 0 0;
    background: url('Feature.png') no-repeat;
    width: 38px;
    height: 36px;
    color: #554d31;
    font: 14px Arial, sans-serif;
    text-align: center;
    cursor: pointer;
}
div.tmpSlideshowControl span {
    line-height: 36px;
    vertical-align: middle;
}
div.tmpSlideshowControlOn {
    background-image: url('FeatureOver.png');
}
div.tmpSlideshowControlActive {
    border: 1px solid rgb(161, 155, 137);
}
div.tmpSlideCopy {
    position: absolute;
    left: 565px;
    top: 20px;
    width: 170px;
}
div#tmpSlideshow h4 {
    color: #b90f23;
    text-transform: uppercase;
    font: 14px Arial, sans-serif;
    margin: 10px 0;
}
div.tmpSlideCopy p {
    font: 11px Arial, sans-serif;
    line-height: 1.75em;
}

在前面这段CSS，每张幻灯片绝对定位，相对的 与ID名称tmpSlideshow的<DIV>，正如我答应他们会。然后，在每个滑动，每个图像是浮动左边，并且复制的向右侧绝对定位。进行控制的定位到容器底部。在一个非常无痛，直线前进样式表。

为了做好准备的jQuery，你添加了一些风格，将动态应用。样式控件时鼠标的用户，并表示滑动活跃，绘制深色边框围绕控制，与当前活动的幻灯片样式。

法治选择div.tmpSlideshowControlOn的应用，当用户将鼠标移到幻灯片控制。法治选择div.tmpSlideshowControlActive的用于指示滑动用户目前看到的画，深色边框围绕相关的控制。

现在，你有标记和CSS，最后一步是应用JavaScript和jQuery的，下面的代码使得幻灯片功能。

body {
    font-family: Arial, sans-serif;
}
div#tmpSlideshow {
    margin: 10px;
    padding: 30px 0 0 0;
    position: relative;
    height: 335px;
    width: 755px;
    border: 1px solid rgb(200, 200, 200);
}
div.tmpSlide {
    position: absolute;
    top: 0;
    left: 0;
    width: 730px;
    height: 332px;
    display: none;
}
div.tmpSlide img {
    float: left;
    margin: 30px 0 0 15px;
    width: 527px;
    border: 1px solid rgb(244, 244, 244);
}
div#tmpSlideshowControls {
    position: absolute;
    bottom: 30px;
    right: 11px;
    width: 175px;
}
div.tmpSlideshowControl {
    border: 1px solid #e1dece;
    float: left;
    margin: 0 5px 0 0;
    background: url('Feature.png') no-repeat;
    width: 38px;
    height: 36px;
    color: #554d31;
    font: 14px Arial, sans-serif;
    text-align: center;
    cursor: pointer;
}
div.tmpSlideshowControl span {
    line-height: 36px;
    vertical-align: middle;
}
div.tmpSlideshowControlOn {
    background-image: url('FeatureOver.png');
}
div.tmpSlideshowControlActive {
    border: 1px solid rgb(161, 155, 137);
}
div.tmpSlideCopy {
    position: absolute;
    left: 565px;
    top: 20px;
    width: 170px;
}
div#tmpSlideshow h4 {
    color: #b90f23;
    text-transform: uppercase;
    font: 14px Arial, sans-serif;
    margin: 10px 0;
}
div.tmpSlideCopy p {
    font: 11px Arial, sans-serif;
    line-height: 1.75em;
}

在JavaScript写成一个jQuery插件，其实两个插件。 SplitID（）和幻灯片。

SplitID（）是非常简单的，你怎么称呼它，它需要一个DOM标记元素，元素的id名，将它连上，并返回任何字符后出现的最后一个连字符。

SplitID : function()
{
  return this.attr('id').split('-').pop();
}

例如，如果你有的id名称tmpSlide 3， SplitID（）返回“3”。

第二个插件，幻灯片子功能，是一个对象，这个对象包含了所有相关的功能的幻灯片本身。

第一种方法，你看到里面的幻灯片对象是准备（）方法。

Ready : function()
{
  $('div.tmpSlideshowControl')
    .hover(
      function() {
        $(this).addClass('tmpSlideshowControlOn');
      },
      function() {
        $(this).removeClass('tmpSlideshowControlOn');
      }
    )
    .click(
      function() {
        $$.Slideshow.Interrupted = true;

        $('div.tmpSlide').hide();
        $('div.tmpSlideshowControl').removeClass('tmpSlideshowControlActive');

        $('div#tmpSlide-' + $(this).SplitID()).show()
        $(this).addClass('tmpSlideshowControlActive');
        
        $$.Slideshow.Counter = parseInt($(this).SplitID());
        setTimeout('$$.Slideshow.Resume();', 5000); // Resume after 5 seconds
      }
    );

  this.Counter = 1;
  this.Interupted = false;

  this.Transition();
}