首页 > 程序开发 > web前端 > HTML/CSS >

HTML常用组件——轮播组件

2017-09-05

HTML常用组件——轮播组件。1 透明度渐变效果的轮播:相比滚动效果这个效果相对简单。首先分析布局:首先一定有一个最外层容纳的容器,用于包含内部滚动图片。其次内部就是存放图片的组件。

HTML常用组件——轮播组件

学习前端有段时间了,一直在学却没能好好总结一下不足的地方,所以想写个可以自己不断完善的demo库

so, 这次写了两种特效的组件。一种是滚动特效,一种是透明度渐变特效的。下面挨着挨着分析一下实现原理,希望有所帮助(代码可以GitHub自取~)

1. 透明度渐变效果的轮播

相比滚动效果这个效果相对简单。

首先分析布局:

首先一定有一个最外层容纳的容器,用于包含内部滚动图片。其次内部就是存放图片的组件。

可以像上面这样。当然也可以换成列表的形式。

定位部分。透明度渐变,我们需要内层所有替换的图片位置是相同的,通过覆盖的效果隐藏。

所以内层的每个rect的position属性设置为absolute,(left:0,top:0)(注意外层容器必须要设置position属性)。因为初始显示一张图片,所以可以将第一张的display置为block,其余置为none。

为了简化之后js的透明度操作,我们可以将每个rect的transition属性添加一个时间。

可以看出布局很简单,下面来说说关键的js代码部分。

因为图片是定时切换,所以要使用setInterval或者setTimeout函数。我这里使用的是setTimeout。

不清楚setTimeout或者setInterval用法的可以戳:https://segmentfault.com/a/1190000007469371

首先在页面加载完毕的时候要触发定时器。

声明一个全局定时器,我在这里规定2500ms触发:

timer = setTimeout('utils.goPlay()', 2500)
我们要获取这些图片组件,所以:
var rects = document.getElementByClassName('rect')

每到一个定时的时候我们将上一个时刻显示的图片的display属性置为none,而将下一张的display置为block。
if (obj.className.match(/showing/)) {
  return
}
for (var i = 0; i < carousel.getCount(); ++i) {
  var children = carousel.getChildrens()[i]
  children.className = children.className.replace(/\sshowing/, &#39;&#39;)
}
obj.className += &#39; showing&#39;
在这里我为了简便,添加了一个showing类用来添加display属性。由此便可实现简便效果的轮播。

具体代码已经上传至GitHub。

2.滚动效果的轮播

首先布局部分。HTML代码大同小异,都是一个父组件包含下面的图片,同样可采用列表。

不同的是由于是滚动效果,变化的是每一个图片相对于父组件的left位置变化,因此需要在里面添加一个div容器。

对于最外层的父组件,相当于一个显示窗口。

如图所示,父组件就是图中粗线的部分,而实际的图片布局为1,2,3,4横向排布,但是只有进入粗线框的部分才会显示。

因此我们可以发现父组件一定要设置overflow:hidden属性。

而子组件的横向排布可以使用float:left来解决。

js部分也是需要一个定时器,每隔一段时间就设置组件的left值,来进行左右移动,以达到滚动效果的目的。具体代码也可以参照GitHub。

相关文章
最新文章
热点推荐