无缝轮播图

如有错误，欢迎批评指正！

无缝轮播图写法一（滑动写法）

原理与实现步骤

• 无序列表的移动
• 列表的减速运动
• 无缝实现
• 锁（点击移动与自动移动的互锁）

难点

• 锁机制的设计、实现。这里可以根据需要，分成两种类型：
  （1）类型一：手动点击时，让自动轮播停止。完成后重新自动轮播
  （2）类型二：手动点击时，等待自动轮播完成
• 无缝的实现：
  （1）将轮播的图片浮动排成一行，并在最后插入第一张图片的复制
  （2）设计图片的跳转，这里分成两种情况：
  ————<1>情况一：第二张图片向左运动到第一张图片，运动完成后立刻切换到最后一张图片
  ————<2>情况二：倒数第二张图片向右运动到倒数第一张图片，运动完成后立刻切换到第一张图片
  （3）边缘 bug 修复，这里分成两种情况：
  ————<1>情况一：当我们无缝切换到第一张图片时，点击向左运动时，立刻切换到倒数第一张图片，以防止溢出
  ————<2>情况二：当我们无缝切换到倒数第一张图片时，点击向右运动时，立刻切换到第一张图片，以防止溢出

优缺点

优点	缺点
一种常见的轮播图形式，比较通用、列表减速运动实现简单	锁机制设计比较复杂 、无缝切换的实现比较复杂

伪代码

<!-- html 代码 -->
<div class="wrapper">
<!-- 无序列表 -->
    <ul>
        <li class="active"><img src="img/1.jpg" alt=""></li>
        <li><img src="img/2.jpg" alt=""></li>
        <li><img src="img/3.jpg" alt=""></li>
        <li><img src="img/4.jpg" alt=""></li>
<!-- 最后一张图片处，添加第一张图片，实现无缝 -->
        <li><img src="img/1.jpg" alt=""></li>	
    </ul>
<!-- 左右滑动按钮 -->
    <button class="left btn">&lt;</button>
    <button class="right btn">&gt;</button>
<!-- 下方小圆点显示当前图片 -->
    <div class="spans">
        <span class="active"></span>
        <span></span>
        <span></span>
        <span></span> 
    </div>
</div>

// js 伪代码
var timer = null;	// 计时器
timer = setTimeout(move,duration);	//自动移动
/**
* 图片运动函数
* @param {string} direction 运动方向 
*/
function move(direction) {
	if(开锁) {
		锁死;
		if(右移/默认移动) {
			moveSlow(ul,attrObj,function() {
				开锁;
				timer = setTimerout(move,duration);
			});
		}
		else if(左移) {
			moveSlow(ul,attrObj,function() {
				开锁;
				timer = setTimerout(move,duration);
			});
		}
	}
}
/**
* 减速运动函数
* @param {object} dom 指定运动的dom元素
* @param {obecjt} attrObj dom元素要减速改变的属性对象
* @param {function} callBack dom元素运动结束后运行的回调函数
*/
function moveSlow(dom,attrObj,callBack) {
	clearInterval(dom.timer);
	dom.timer = setInterval(function() {
		...
		if(运动结束) {
			callBack();
		}
	},duration);
}
//自动移动
function() {
	clearInterval(moveTimer);
	moveTimer = setInterval(function() {
		//btn.click();	//锁的类型一：自动点击等待手动移动？？
		//move();		    //锁的实现二：手动点击等待自动移动？？
	}, duration);
}

无缝轮播图写法二 （淡入淡出写法+jQuery）

原理与实现步骤

• 将图片堆叠在显示区域内（这里无需考虑实现无缝，这是由淡入淡出动画的特点所决定的）
• 锁（点击淡入淡出与自动淡入淡出互锁）

难点

• 锁机制的设计、实现（同上）

优缺点

优点	缺点
一种常见的轮播图形式，比较通用、无需考虑无缝的实现	锁机制设计比较复杂

伪代码

// html 结构同上
var timer = null;
var isAutoNow = true;	//当前动画是否在自动运行，默认正在自动执行
var activeIndex = 0;	//当前 class 为 active 的 li 的索引值，默认为 0 
var lock = false;	//锁，默认为解锁状态

//给两个按钮绑定点击事件
$('btn.left').click(function() {
	isAutoNow = false;	//阻塞自动动画函数，以实现自动等待手动
	clearInterval(timer);
	lock = false;	//强制开锁，以实现手动动画不受影响
	move(1);
});
$('btn.right').click(function() {
	isAutoNow = false;	//阻塞自动动画函数，以实现自动等待手动
	clearInterval(timer);
	lock = false;	//强制开锁，以实现手动动画不受影响
	move(-1);
});

// way:运动方向（1：右，-1：左，null：默认向右）
function move(way) {
	var way = way || 1;
	if(!lock) {
		lock = true;	//锁死
		$('ul li').fadeOut().eq(activeIndex).fadeIn(function() {	//动画完成时执行的回调函数
			lock = false;	//解锁
			if(!isAutoMove) {	//动画完成后判断自动动画函数是否被阻塞了（即：自动等待手动的情况）
				isAutoMove = true;	
				autoMove();	//重新启动自动动画函数
			}
		});
	}
}

// 自动动画效果
function autoMove() {
	clearInterval(timer);
	timer = setInterval(function() {
		move();
	}, duration);
}