H5创建一个简单的自动幻灯片

这是国外的网友做的h5自动幻灯片

原文链接

http://www.htmlgoodies.com/beyond/javascript/stips/create-a-simple-automated-slideshow.html

我想展示一个简单的循环幻灯片在我的网站上有一天,它似乎所有的插件我遇到过于笨重的琐碎的目的,所以我将我的注意力转向独立的解决方案。 最后,我发现jQuery是所有我需要完成我想。 在今天的文章中,我将向您展示我是如何做到的。

定义图像

一些人包括JavaScript源图像列表,但我宁愿把它们在HTML领域,因为它们是页面内容的一部分。 我都懒得算出所有图像的维度,这就是在JS完成的。 我原来的列表包含大量的t恤与religion-themed图形和文本。 类似“崇拜我或我将永远折磨你! 有美好的一天。 BFF——神”。 你可能不认为这是一个特别有趣的话题,但在右边轻松的心态,宗教可以搞笑素材。 问问Monty Python。 尽管如此,今天的演示幻灯片是一个更少的煽动性的主题,即cars.A

<div id="slideshow">
  <div>
    <img src="http://www.htmlgoodies.com/imagesvr_ce/3435/mustang.jpg" alt="mustang.jpg"><br>
    A newer Mustang.
  </div>
  <div>
    <img src="http://www.htmlgoodies.com/imagesvr_ce/3798/camaro.jpg" alt="camaro.jpg"><br>
    A modern Camaro.
  </div>
  <div>
    <img src="http://www.htmlgoodies.com/imagesvr_ce/6859/classic.jpg" alt="classic.jpg"><br>
    An oldie but a goodie!
  </div>
  <div>
    <img src="http://www.htmlgoodies.com/imagesvr_ce/1767/classic2.jpg" alt="classic2.jpg"><br>
    More old cars.
  </div>
  <div>
    <img src="http://www.htmlgoodies.com/imagesvr_ce/5199/video_game_car.jpg" alt="video_game_car.jpg"><br>
    A good rendering of a classic race car.
  </div>
</div>

CSS是非常最小集容器DIV维度,增加填充物之间的顶部和左页边距和图像,和围绕着图像边框和阴影。

body {
   background-color: gray;
}

#slideshow { 
    position: relative; 
    width: 300px; 
    height: 510px; 
    padding: 10px; 
}

#slideshow > div { 
    position: absolute; 
    text-align: center;
    overflow: visible;
    display: none;
}
#slideshow > div > img {
    border: 2px solid white;
    box-shadow: 0 0 20px white; 
}

S后才开始我们所有的图片已经定义。 第一行隐藏所有div的图片,这样我们可以给他们一个幻灯片中的一次。 然后,setInterval()用来遍历图像速度每5秒。 它调用匿名函数褪色当前图像,继续下一个兄弟姐妹,褪色,并将其添加到幻灯片容器元素。 注意使用结束()函数,它返回这个指针的状态。 没有它,下一次调用渐隐()并不像预期的那样工作,导致图像被堆积在彼此之上。

$("#slideshow > div").hide();
 
setInterval(function() {
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  5000);

定心图片

定心不同大小图像动态没有在公园里散步,主要是因为这取决于大小的图像,这是在加载之前不知道。 这个问题的解决方案是创建一个新的图像对象和分配其src的形象元素。 导致浏览器下载图片,从而分配它的维度:

jQuery.fn.setDivSize = function(extraHeight, extraWidth) {
  var img = new Image();
  img.src = this.children('img').attr('src');
  //the extra height and width are to accommodate
  //the text below the images.
  this.height(img.height + extraHeight)
      .width (img.width  + extraHeight);
  return this;
}

定心功能

这是中心的功能图像相对于其父母或包含基于一个布尔参数窗口(真的是父母):

jQuery.fn.center = function( parent ) {
    parent = $( parent ? this.parent() : window );
    
    this.css({
        "position": "absolute",
        "top":  (((parent.height() - this.outerHeight()) / 2) + parent.scrollTop()  + "px"),
        "left": (((parent.width()  - this.outerWidth())  / 2) + parent.scrollLeft() + "px")
    });
    return this;
}

把它放在一起

这一次,我包括一些settimeout给元素一个机会完全呈现。 否则,我注意到在图像边缘不一致。

$(function() { 
  setTimeout(function(){
    //display the first image
    $('#slideshow > div:first')
      .setDivSize(30, 40)
      .center(false)
      .fadeIn(1000);
    
    //loop through the remaining images
    setInterval(function() {
      $('#slideshow > div:first')
        .fadeOut(1000)
        .next()
        .setDivSize(30,40)
        .center(false)
        .fadeIn(1000)
        .end()
        .appendTo('#slideshow');
    },  5000);
  }, 500 );
});