-
观点：我认为每个人都有访问淘宝或其他网站，通常会有图片动画切换效果，这是怎么实现的博客我，技术不是很好，做一个简单的例子！
首先，画面一般会有两个图片按钮，左键和右开关按钮，当我们单击切换左键，将图片移到原来正确的XX像素，然后将左边的框中显示图片，和原始图像被隐藏，单击右键和左键原理是相似的。但是，如果我们总是按相同的按钮，会出现图中的开关盒只有3张图片。到最后一个，我们需要做出判断，把它移回到第一个或最后一个：
1，HTML代码
左
正确的
divbox是框中显示图片
imgbox是保存所有图片的div，我们做的影响以及移动DIV.
BTH把两按钮按钮来切换图片
设计素描 uff1a
2，CSS代码
# divbox {
身高：315px；
宽度：750px；
位置：绝对；
边境：# 000000 1px solid；
溢出：隐藏；}
# imgbox {
位置：绝对；
宽度：2550px；}
img {
浮点数：左；}
# BTH {
margin-left: 800px；}
# divbox设置宽度、绝对位置和图片显示框的边框，另一个重要属性是溢出。溢出是隐藏的。当div中的内容超过div大小时，溢出部分将被隐藏。
# imgbox设置绝对位置和宽度。这个宽度取决于所有图片宽度的和。我2550px。有三张照片。每一幅画都750px宽。如果没有宽度，小div不能左移。
IMG设置左浮动，让所有的图片浮动到左边，并保持在一个水平线。
# BTH的外缘，因为上面的div设置绝对位置使div将是无形的，所以移动div出来。
设计素描 uff1a
三.脚本代码
$（函数（）{（））
定义一个变量来保持左边的距离。
无功leftnum = 0；
$（#邹）。Click（function（）{）
如果（leftnum = = 0）{
移动到最后一张图片
$（# imgbox）。动画（{左：leftnum = 1500 }，500）；
其他{ }
$（# imgbox）。动画（{左：leftnum = leftnum + 750 }，500）；
}
}）；
$（#你）。Click（function（）{）
如果（leftnum = = 1500）{
移动到第一张图片
$（# imgbox）。动画（{左：leftnum = 0 }，500）；
其他{ }
$（# imgbox）。动画（{左：leftnum = leftnum-750 }，500）；
}
}）；
}）；
提示：记住导入jQuery包
我在写脚本代码两次点击，我定义的属性leftnum节省距离左。
我们先看左边的按钮单击事件当我们点击按钮，首先要确定是否leftnum是0，如果0，然后是第一张照片，第一张照片左没有图片怎么做，所以我们让他跳到一张图片的结束，我们称之为动画的方法实现动画的效果我写，这里是左：左= - 1500，为什么是1500，左边是等于0是第一张图片，左边是等于750时，第二图片，左1500等于第三张图片，所以最后的图片位置（宽度）= X（总的照片）-1.if leftnum不是0，我们将在原有的基础上750px。
右边开关按钮的原理与左边的开关按钮相似，我没有解释太多。
4。总结：
懂他们的人可以自己练习。毕竟，他们实践真理。
如果你想做更多的好学生，可以和我联系，毕竟我没有讲第一个函数，例如，在上面的图片中得到几个点，当我们点击点的时候，你切换到相应的动画图片，你也可以设置图片旋转效果，每隔几秒从一个图片切换。
如果你有这个按钮，你也可以让它漂亮。你可以在图片的左、右加一个图片按钮，使它更漂亮。
以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。