当前位置:首页 > 网页特效 > 焦点图 >

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

时间:2013-08-14 17:28 来源:互联网 作者:源码搜藏 收藏 推荐

  • 广告推荐
效果预览 立即下载

为了更方便地访问从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();
}
jquery 图片切换效果 a Fade Slideshow jQuery

本站资源仅限于学习研究,严禁从事商业或者非法活动! 源码搜藏网所有源码来自互联网转载与用户上传分享,如果侵犯了您的权益请与我们联系,我们将在24小时内删除!谢谢!

焦点图下载排行

最新文章