因为博主懒，页面粗糙，不过没关系，因为我主要讲的是图片和动画如何切换。

思考：我觉得大家都去过淘宝或者其他一些网站，一般都有切换图片和动画的效果。这是如何实现的？至于博主，我的技术不是很好，我得到了一个简单的例子！

首先，一般画面上有两个画面按钮，一个左切换，一个右切换。当我们点击左切换按钮时，原始图片会向右移动XX像素，然后它左边的图片会显示在框架中，而原始图片被隐藏。点击右开关按钮的原理与点击左开关按钮的原理相似。但是，如果你一直按同一个按钮，如果这个图片切换框里只有三张图片，我们就要在最后一张来的时候做出判断，让它移回第一张或者最后一张。分析完思路后，让我们来看看我们的代码：

1.html代码

Div id=' Div box ' Div id=' imgBox ' Div class=' img ' img src=' http :0 . jpg '/Div class=' img ' img src=' http 3:1 . jpg '/Div class=' img ' img src=' http :3 . jpg '/Div/Div/Div id=' BTH '按钮id=' Zou '左/按钮id='you '右/按钮/divbox是一个

ImgBox是一个包装所有图片的DIV，我们可以通过移动这个DIV来实现效果

Bth放两个按钮来切换图片

渲染：

2.CSS代码

# divBox { height:315px宽度：750像素；位置：绝对；border:#000000 1px固体；飞越：隐藏；} # IMgbox { position : absolute；宽度width:2550px} .img { float:left} # BTH { margin-left :800 px；}#DIVBox设置图片显示框的宽度、高度、绝对位置和边框。另一个重要属性是溢出和溢出隐藏。当该div中的内容超过该DIV的大小时，溢出部分将被隐藏。

#imgBox设置绝对位置和宽度，这取决于所有图片的宽度总和。我这里有2550px，有三张图片，每张都是750px宽；如果这里没有给出宽度，里面的小DIV就不能向左浮动。img设置左浮动，使所有图片向左浮动并保持在一条水平线上。

#bth设置外边距，因为上面的div设置了绝对位置，所以这个div将被覆盖并且不可见，所以将这个div移出。

渲染：

3.脚本代码

$(function(){ //定义变量保存在左边的位置，var left num=0；$ ('# Zou ')。单击(function(){ if(left num==0){//移动到最后一张图片$ ('# imgbox ')。动画({left:leftnum=-1500}，500)；}else{ $('#imgBox ')。动画({left:leftNum=leftNum 750}，500)；} });$ ('# you ')。单击(function(){ if(left num=-1500){//移动到第一张图片$ ('# imgbox ')。动画({left:leftnum=0}，500)；}else{ $('#imgBox ')。动画({left:leftNum=leftNum-750}，500)；} });});提示：记得导入jQuery包

脚本代码我写了两个click事件，并定义了一个属性leftNum来保存左边的位置

首先，看看我们的左切换按钮点击事件：当我们点击按钮时，我们首先判断leftNum是否为0。如果是0，那么就是第一张图片。第一张图片左侧没有图片怎么办？所以我们让他跳到最后一张图片，我们调用animate方法来实现动画效果。这里我写左：左=-1500。为什么是-1500？当left等于0时，是第一张图片，当left等于-750时，是第二张图片，当left等于-1500时，是第三张图片，所以最后一张图片的位置=-(图片宽度)x(图片总数)-1。如果leftNum不是0，我们会在原来的基础上增加750px。

右开关按钮的原理和左开关按钮的原理差不多，就不多解释了。

4.总结：

懂的朋友可以自己实践一下，毕竟实践了真理。

如果你想看起来更好，你可以私下相信我。毕竟我没有讲第一个功能，比如在图片上放几个点，我们点击点的时候将动画切换到对应的图片，设置图片轮播效果，每隔几秒切换一次图片。

如果有一个按钮，你也可以把它变漂亮。可以在图片的左右两边加一个图片按钮，这样更美观

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。