轮播的实现

题目1:轮播的实现原理是怎样的?如果让你来实现,你会抽象出哪些函数(or接口)供使用?(比如 play())

    <div class="carousel">
        <ul class="img-ct clearfix">
            <li><a href="#">![](images/slide1.png)</a></li>
            <li><a href="#">![](images/slide2.png)</a></li>
            <li><a href="#">![](images/slide3.png)</a></li>
        </ul>
        <div class="arrow prev">&lt;</div>
        <div class="arrow next">&gt;</div>
        <ul class="bullet clearfix">
            <li class="active"></li>
            <li></li>
            <li></li>
        </ul>
    </div>
基本原理(左右滑动):

1.首先,要创建一个容器用来展示轮播图片的窗口(<div class="container">),因为一次只展示一张图片,所以设置其宽高为一张图片的宽高,并设置其样式overflow:hidden;position:relative;

2.其次,创建一个包裹轮播图的容器(<ul class="img-ct">),并设置其样式为position:absolute.
3.因为图片(<img>)是包裹在元素li里的,所以设置li样式float:left使所有li都在同行显示。
4.此时,通过改变包裹图片的容器(<ul class="img-ct")的positionleft值,使图片达到在窗口(<div class="container")中看似向左或向右滑动的效果。

根据基本原理,总的来说,可以抽象出以下几个函数:
playNext(); // 点击“下一个”按钮("<div class="next"),使图片向左滑动
playPrev(); //点击“上一个”按钮("<div class="prev"),使图片向右滑动
setBullet(); //根据当前展示图片的索引,将`class=active`的样式切换到对应的tab
play(); // 利用setInterval函数设置定时器,使轮播自动播放
stop(); // 利用clearInterval函数清除定时器,使轮播停止播放。

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

jsbin-实现左右滚动无限轮播

题目3:实现一个渐变轮播效果, 效果范例

jsbin-jQuery实现渐变轮播

推荐阅读更多精彩内容

  • 轮播的实现原理? 以四个图片的轮播为例html部分:图片存放在ul li标签内,并使用一个div包裹ulcss部分...
    放风筝的小小马阅读 177评论 0 0
  • 题目1: 轮播的实现原理是怎样的?如果让你来实现,你会抽象出哪些函数(or接口)供使用?(比如 play()) 横...
    饥人谷_js_chen阅读 166评论 0 0
  • 题目1: 轮播的实现原理是怎样的?如果让你来实现,你会抽象出哪些函数(or接口)供使用?(比如 play()) 左...
    cctosuper阅读 29评论 0 0
  • 1: 轮播的实现原理是怎样的?如果让你来实现,你会抽象出哪些函数(or接口)供使用?(比如 play()) 一种左...
    晓风残月1994阅读 62评论 0 0
  • 题目1:轮播的实现原理是怎样的?如果让你来实现,你会抽象出哪些函数(or接口)供使用?(比如 play()) 滚动...
    抚年华轻过阅读 60评论 0 0