我认为的轮播图

一:大概思路
1. 先吧图片恒方在中央,然后一字排开,第一张图片(下标为0的图片)放在显示框内其余的用 overflow: hidden; 隐藏。
2. 然后用定时器使图片自己移动,在连接两边按钮左右移动。如果图片到了下标为0的图片则从下标为5的图片从后网前播放,(如上)
3.在用小圆点连接图片,下标为0的连接第一个小圆点一直网下。到那张图片他对应的小圆点亮。
二:实操
1. 因为英语啥的不太好,所以简单的东西就不敲了。(如html。css。定义变量啥的)
2.因为图片执行到0或5就没了所以吧它克隆一个在放过来。
克隆步骤:var length = imageLis.length;
魔术手操作:imageUL.appendChild(imageLis[0].cloneNode(true));

3.右边按钮的处理
function rightBtnHandler(){
函数截流:截取目标函数
if(m_unit.isanimated) return;

        信号量的变化
        idx++;

            改变小圆点
        changeCircles();

        轮播图运动机构的移动。
        animate(m_unit,{"left" : -options.width * idx},options.animatetime,options.tween,function(){
            if(idx > length - 1){
                idx = 0;
                m_unit.style.left = "0px";
            }
        });
    }

4.左按钮(相反)
5.小圆点的运动
小圆点的监听
for (var i = 0; i < circlesLis.length; i++) {
circlesLis[i].index = i;
circlesLis[i].onclick = function(){
信号量就是自己的序号
idx = this.index;
拉动
animate(m_unit,{"left" : -options.width * idx},options.animatetime,options.tween);
改变小圆点
changeCircles();
}
}
function changeCircles(){
idx可能是5,但是我们的小圆点下标最大是4,所以用n过渡一下:
var n = idx > length - 1 ? 0 : idx;
排他
for (var i = 0; i < circlesLis.length; i++) {
circlesLis[i].className = "";
}
circlesLis[n].className = "cur";
}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 6,618评论 1 10
  • Javascript有很多数组的方法,有的人有W3C的API,还可以去MDN上去找,但是我觉得API上说的不全,M...
    顽皮的雪狐七七阅读 9,790评论 0 6
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 12,419评论 2 17
  • 0521 凌晨一点十分 我躺在床上 梳理今天发生的事情 五月二十号渐渐成了约定成俗的情人节 每份佳节就单身的我依旧...
    星星的眼睛y阅读 3,459评论 0 0
  • 片段一授权 授权是提高效率或效能的秘诀之一,可惜一般人多吝于授权,总觉得不如靠自己更省时省事。其实把责任分配给其他...
    Fly_Catkin阅读 2,444评论 0 0

友情链接更多精彩内容