美文网首页
轮播的实现

轮播的实现

作者: 放风筝的小小马 | 来源:发表于2017-07-05 15:36 被阅读111次

    轮播的实现原理?

    以四个图片的轮播为例
    html部分:图片存放在ul li标签内,并使用一个div包裹ul
    css部分: div设置relative,宽度为单个图片的宽度,并设置overflow: hidden;ul设置absolute定位,宽度在js中设置(因为还需要clone首尾的图片,所以不在CSS中设置宽度),li全部左浮动
    js部分

    1. 获取ul节点、获取实际图片的数量imgNum、获取单个图片的宽度imgWidth,定义一个索引curIndex记录当前显示的图片索引
    2. clone第一张图片并添加在图片列表的最后,clone最后一张图片并添加到图片列表的最前面,注意:此时显示的是最后一张图片的内容,需将ul向左移动一个图片宽度的距离
    3. 获取图片列表的宽度(并将其设置为ul的宽度(4+2张图片)),
    4. 定义以下接口:playNext(len)、playPre(len)
    5. playNext(): 执行该函数时使用动画将ul向左偏移一个图片(假设len=1)的宽度,动画结束后,将curIndex加1,同时判断curIndex是否为最后一个图片(此时显示的其实是第一个图片),如果是的,则将ul定位到真正的第一个图片的位置(使用css方法的left进行设置)
    6. playPre(): 该函数与playNext移动的方向相反,执行该函数时,使用动画将ul向右偏移一个图片的宽度,动画结束后,将curIndex减1,同时判断curIndex是否为第一个图片(此时显示的其实是最后一个图片),如果是的,则将ul定位到真正的最后一个图片的位置

    轮播的实现需要注意几点:

    • 图片需要排列成一排,并通过overflow:hidden只显示出一个图片
    • 需要clone首尾图片,并添加到图片列表中,便于过渡,具体可以查看代码
    • 轮播就是将图片列表的容器使用动画进行左右移动

    实现视频中的左右滚动无限循环轮播效果

    代码演示

    实现一个渐变轮播效果

    原理:

    • html与滚动轮播一样,注意css中图片容器宽度设置为图片的宽度,图片全部设置为absolute,同时只将第一个图片显示出来,其余的都设置为display:none
    • js部分:使用jquery的fadeOut()函数隐藏当前图片,使用fadeIn()函数显示下一个将要显示的图片,即可完成淡入淡出的效果
      代码演示

    滚动轮播和渐变轮播代码

    使用CSS 实现

    在上面的实现代码中,使用的是绝对定位,调整left的值来进行轮播;另一种方法是使用css3的transform: translateX()来移动图片,通过transition: transform来添加动画效果

    相关文章

      网友评论

          本文标题:轮播的实现

          本文链接:https://www.haomeiwen.com/subject/djsqhxtx.html