jQuery 实现图片轮播

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

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

     好啦，进入正题~~~

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

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

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

  

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

    

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

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

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

   All right.

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

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

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

    

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

     所以，大哥，说好的轮播呢？

     这就尴尬了…

     还有人说，可以这样……     

     还可以这样……

    

     我可以选择狗带吗……

     好歹上三张图的好伐？！

    

     又有不明白的吃瓜群众了，为什么不是这样子的啊……

    

       虽然心很累，但是还是要温柔地回答这个问题啊……

       因为，左按钮是上一页嘛，右按钮是下一页嘛，按照[正常人]的思路……都是

      

       再不明白，跪安吧~~~

       OK，下一步，把用到的图片放上来，[这里只用5张图的来测试]

      

      

更改CSS之后，就好了

又搞定一步~~~

好啦~，下面就要把我们需要的图片固定的显示出来了，

首先分析一下，刚开始看到的图片应该是第一张，现在展示的是第五张

设置CSS

		.content {
			/* 5*320px */
			width:1600px;
			height:480px;
			/* 相对自己定位 */
			position:relative;
			left:-320px;
		}

搞定。

下一步只需要把box外面超出去的部分不显示即可

		.box {
			width: 320px;
			height: 480px;
			margin: 50px auto;
			border: 5px solid lightgreen;
			position:relative;
			overflow: hidden;
		}

好嘞，现在就剩下诗诗了~，但是这个时候，我们会发现原来左右两个可爱的小按钮不见了，不，见，了……

原因是什么呢？是因为box设置了浮动，不在原来的文档流了，所以我们可爱的小按钮被无情的覆盖在下面了，但是，现在我就要让它们翻身农奴把歌唱~~~Music~~~

好吧，其实就是简单的z-index

		.ctrl {
			width:50px;
			height: 50px;
			background:none;
			border:none;
			outline: none;
			font-size: 50px;
			text-align: center;
			line-height: 50px;
			position: absolute;
			top:50%;
			color:gray;
			/* 按钮默认不显示 */
			display: none;
			z-index: 10;
		}

哦了~可爱的小按钮出来了~

ok,接下来就是设置左右两个按钮的点击事件了。

这么写完，出现bug了。尝试点击左键，图片直接略过当前图片的前一张图片，定位到了刚才移动到最前面的那张图片上。[有些绕口]

所以，我们需要在动画结束的时候，再把img的最后一张图追加到最前面

【Tips:用以下两句话也是可以实现换图，但是好像没啥动画效果啊】

好了，左边按钮点击事件差不多了，下面再来写一写右边的点击事件：

NICE.

现在可以在刚才的基础上加几个小点了~

修改CSS样式表：

之后再设置一下小圆点的相关内容即可，不单独贴出来了，附上源代码。

	
	
	


	

		<
		>