由于博主我懒，所以页面画的比较粗糙，但是没关系，因为我主要讲的是如何实现图片动画切换。
思路：想必大家都逛过淘宝或者其他的一些网站，一般都会有图片动画切换的效果，那是怎样实现的呢？博主我呢，技术不是很好，弄了一个简单的例子！
首先一般图片上会有两个图片按钮，一个左切换的按钮一个右切换的按钮，当我们单击左切换按钮时，原来的图片就会向右移动XX像素，然后它左边的图片就会显示到框里，而原来的图片被隐藏了，单击右切换按钮的原理跟左按钮相似。但如果一直点同一个按钮的话，本来这个图片切换框只有3张图片的话，到最后一张的时候我们要做一个判断，让它移动回第一张或者最后一张。思路分析完了，下面看下我们的代码：
1、html代码
<div id="divBox">
<div id="imgBox">
<div class="img"><img src="0.jpg"/></div>
<div class="img"><img src="1.jpg"/></div>
<div class="img"><img src="3.jpg"/></div>
</div>
</div>
<div id="bth">
<button id="zou">左</button>
<button id="you">右</button>
</div>
divBox是一个显示图片的框
imgBox是包住所有图片的DIV，我们实现效果也是移动这个DIV就可以了
bth放了两个button按钮用来切换图片
效果图：
2、CSS代码
#divBox{
height:315px;
width:750px;
position:absolute;
border:#000000 1px solid;
overflow:hidden;}
#imgBox{
position:absolute;
width:2550px;}
.img{
float:left;}
#bth{
margin-left:800px;}
#divBox设置图片显示框的宽高，绝对位置，边框，还一个重要的属性是overflow，溢出隐藏，当这个DIV里的内容超出这个DIV的大小时，溢出的部分会被隐藏掉。
#imgBox设置绝对位置和宽度，这个宽度取决于你所有图片宽度的总和，我这里是2550px，有三张图片，每张图片宽为750px；如果这里不给宽度的话里面的小DIV无法左浮动。
.img设置左浮动，让所有图片向左浮动，保持在一条水平线上。
#bth 设置外边距，因为上面的div设置了绝对位置所以这个div会被盖住看不见了，所以把这个div挪出来。
效果图：
3、脚本代码
$(function(){
//定义一个变量保存距离左边的位置
var leftNum=0;
$("#zou").click(function(){
if(leftNum==0){
//移动到最后一张图片
$("#imgBox").animate({left:leftNum=-1500},500);
}else{
$("#imgBox").animate({left:leftNum=leftNum+750},500);
}
});
$("#you").click(function(){
if(leftNum==-1500){
//移动到第一张图片
$("#imgBox").animate({left:leftNum=0},500);
}else{
$("#imgBox").animate({left:leftNum=leftNum-750},500);
}
});
});
提示：记得导入jQuery包
脚本代码我写了两个单击事件，定义了一个保存距离左边位置的属性leftNum
首先看一下我们的左切换按钮单击事件：当我们单击按钮时，首先判断leftNum是否为0，如果为0，那么就是第一张图片，第一张图片左边已经没图片了怎么办，所以我们让他跳到最后一张图片，我们调用animate方法实现动画效果，这里我写的是left：left=-1500，为什么是-1500呢，left等于0时是第一张图片，left等于-750的时候是第二张图片，left等于-1500时就是第三张图片，所以最后一张图片的位置=-（图片宽度）X（图片总数）-1。如果leftNum不为0时，我们就在原来的基础上加750px。
右切换按钮的原理和左切换按钮相似，我就不解释那么多了。
4、小结：
看懂的小伙伴们可以自己去实践一下，毕竟实践出真理。
如果想做的更好看的同学，可以私信我，毕竟还有先功能我没讲，比如弄几个圆点在图片上面，当我们点击圆点时就动画切换到相对应的图片上,还可以设置图片轮播效果，每隔多少秒切换一次图片。
还有就是按钮的话，大家也可以弄的漂亮一些，可以在图片左边和右边加一个图片的按钮，这样和更美观
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持北冥有鱼。
您可能感兴趣的文章:
- 适用于手机端的jQuery图片滑块动画
- jQuery生成假加载动画效果
- jQuery 动画效果代码分享
- jQuery之动画效果大全
- jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
- jquery+css3问卷答题卡翻页动画效果示例
- 原生js仿jquery animate动画效果
- jQuery简单动画变换效果实例分析
- jQuery实现图像旋转动画效果
- 详解jQuery中基本的动画方法
