jquery-幻灯片效果-编辑中

幻灯片的效果

原理介绍

幻灯片

有多张图片

结构

样式

JQ代码

获取li标签

让第一张保留在原位。其它几张都移到右边去

每一张幻灯图片的宽度是760象素

让除了第一个的其它成员，移动到右边

关于幻灯片上的点点

是动态创建上去的

后面如果有几个幻灯片，就做几个点点上去

获取幻灯片个数

获取点点的容器

创建点点，根据幻灯片的长度

并且给第一个点点添加一个样式

目标：

先做一个，点击点点，让幻灯片轮到对应的图片上面

错误的写法

错误的原因。 点点还没有创建。获取不到。。。。

正确的写法

点点被点击后，对应序号的图片位置要对应

思考，图片如何变化

一个图片要走，一个图片要来

可以考虑，使用两个变量来存

nowli，过来的

preli，要走的

点击哪个小点点，先拿它的索引值

得到的索引值，

把所有的运动相关的操作，封装在一个函数中

关注，小点点的点击方向不同，移动的效果不同

如果从左往右点小点点

那么，图片效果是从右边往左边滑动

反之，则是从左边往右边滑动

明确nowli与prevli的用途

prevli代表了当前显示中的一个索引序号，这也是马上要离开的序号

nowli，代表了被点击的小园点的序号，代表了马上要进入用户视野的序号，

问题，被点击的小园点没有样式

解决

反着点，从右边往左边点小园点时的写法

如果同时点两下一个点，会出现bug

考虑到这种bug出现的情况

我们就把它过滤掉就好

左右按钮

如果当前是第三个图片，点击左边按钮，应该变到第二个图片

结构

按钮获取

给事件

动画实现的效果，主要依赖于nowli的数值

所以在这里直接对nowli进行值的修改就可

当前代码的bug，没有边界值判断，越界后出bug

左边边界的判断

左边到头时

右边到头时

由于边界的处理情况与普通逻辑不同，所以需要加上一个return，阻止代码继续向后走

左右按钮与圆点状态的对应

自动播放

思路，开定时器

让定时器，自动的去触发左或者右键的点击事件

先定义一个全局变量，存定时器的

定时器创建

让它执行左右键相同的代码

鼠标悬停，停止图片的轮播

完整的代码

$(function(){

	var $slide = $('.slide');

	//选取所有的幻灯片
	var $li = $('.slide_list li');

	//获取幻灯片的个数
	var $len = $li.length;

	//选择小圆点的容器
	var $points_con = $('.points');

	// 要运动过来的幻灯片的索引值
	var nowli = 0;

	// 要离开的幻灯片的索引值
	var prevli = 0;

	var $prev = $('.prev');
	var $next = $('.next');

	var timer = null;


	var ismove = false;



	// 根据幻灯片的个数，动态创建小圆点
	for(var i=0;i<$len;i++)
	{
		var $newli = $('<li>');

		//第一个小圆点含有'active'的样式
		if(i==0)
		{
			$newli.addClass('active');
		}
		$newli.appendTo($points_con);
	}

	//第一个幻灯片不动，将其他的幻灯片放到右边去
	$li.not(':first').css({'left':760});
	// 获取小圆点
	var $points = $('.points li');

	//小圆点点击切换幻灯片
	$points.click(function(){
		nowli = $(this).index();
		// 修复重复点击的bug
		if(nowli==prevli)
		{
			return;
		}
		$(this).addClass('active').siblings().removeClass('active');
		move();
	})

	//向前的按钮点击切换幻灯片
	$prev.click(function(){

		if(ismove)
		{
			return;
		}

		ismove = true;

		nowli--;
		move();
		$points.eq(nowli).addClass('active').siblings().removeClass('active');
	})

	//向后的按钮点击切换幻灯片
	$next.click(function(){

		if(ismove)
		{
			return;
		}

		ismove = true;

		nowli++;
		move();
		$points.eq(nowli).addClass('active').siblings().removeClass('active');

	})


	timer = setInterval(autoplay,5000);


	$slide.mouseenter(function(){
		clearInterval(timer);
	});


	$slide.mouseleave(function(){
		timer = setInterval(autoplay,3000);
	});


	function autoplay(){		
		nowli++;
		move();
		$points.eq(nowli).addClass('active').siblings().removeClass('active');
	}



	// 幻灯片运动函数，通过判断nowli和prevli的值来移动对应的幻灯片
	function move(){
		// 第一张幻灯片往前的时候
		if(nowli<0)
		{
			nowli = $len-1;
			prevli = 0;
			$li.eq(nowli).css({'left':-760});
			$li.eq(nowli).animate({'left':0});
			$li.eq(prevli).animate({'left':760},function(){
				ismove = false;
			});
			prevli = nowli;
			return;
		}

		//最后一张幻灯片再往后的时候
		if(nowli>$len-1)
		{
			nowli = 0;
			prevli = $len-1;
			$li.eq(nowli).css({'left':760});
			$li.eq(nowli).animate({'left':0});
			$li.eq(prevli).animate({'left':-760},function(){
				ismove = false;
			});
			prevli = nowli;
			return;
		}

		// 幻灯片从右边过来
		if(nowli>prevli)
		{	
			// 把要过来的幻灯片先放到右边去
			$li.eq(nowli).css({'left':760});			
			$li.eq(prevli).animate({'left':-760});			
		}
		else //幻灯片从左边过来
		{
			// 把要过来的幻灯片先放到左边去
			$li.eq(nowli).css({'left':-760});		
			$li.eq(prevli).animate({'left':760});			
		}

		$li.eq(nowli).animate({'left':0},function(){
			ismove = false;
		});
		prevli = nowli;


	}
})