jQuery 实现图片轮播

     自从学习jQuery之后，简直怀疑人生了。

     因为，用JavaScript原生代码实现一个效果可能得用几十行代码甚至更多，而用jQuery简单的几行就轻松搞定了~~~

     好啦，进入正题~~~

     下面要使用jQuery实现图片轮播~~~

      1.先把基础的背景搭起来：

        最终使我们的图片在方框内进行轮播：

  

     2.实现鼠标移入移出，出现左右按钮

    

   这个比较简单，实现方法如下：

   大概思路就是，当鼠标移到这个div上面时，就显示左右两个按钮，$('.ctrl').show(300);其中300是出现的这个动画持续时间，单位为毫秒数。

   当然了，这个前提条件就是原来是不可见的，即，我们需要提前在左右按钮的css里设置display:none;

<script>

	$(function(){
		//鼠标移入 显示控制按钮  离开时不显示按钮
		$('.box').hover(function(){
			$('.ctrl').show(300);
			//show显示隐藏的匹配元素
			//speed：三种预定速度之一的字符串
			//slow normal fast 或表示动画时长的毫秒数值
		},
		//鼠标移走的函数方法
		function(){
			$('.ctrl').hide(300);
		});
	})

</script>

   All right.

   3.接下来，我们就要思考一下，轮播到底该怎么实现了。

     这是一个严肃的问题，毕竟要考虑一下小学2年级的数学问题了。

     要轮播嘛，首先得有图，还不能是一张图，为什么呢？

    

     这个时候，点击左边按钮，过来的是空白，点击右边按钮，出来的也是空白。