jQuery动画效果图片轮播特效

从这一章开始，我将介绍使用Jquery完成特效动画。让我们来看看这部分介绍的特效：传统旋转木马。

一、需求分析。

1.提供许多大小相同的图片，并在一行中并排显示。

2.左右两侧有两个开关按钮，控制是显示上一个还是下一个。

3.右下角有一个指示器‘小圆圈’，用来提示显示哪张图片。你也可以点击它来切换图片。

4.每隔一个固定的时间，图片会自动滚动。

5.当鼠标放在图片上时，会自动停止滚动；当鼠标离开时，它会在固定的时间间隔后自动播放。

第二，代码分析。

1.使用html代码构建框架。

body div id=' container ' ul id=' content ' lia href=' # ' img src=' http : images/0 . jpg '/a/Li lia href=' # ' img src=' http : images/1 . jpg '/a/Li lia href=' # ' img src=' http : images/2 . jpg '/a/Li lia href=' # ' img src=' http 3360 images/3。id是内容的ul，其中存储的内容是界面上显示的滚动图片。

ID为btn的3 div，其中两个子元素是用于在上一个和下一个之间切换的按钮。

id为指示器的Ul用于显示指示器。

2.CSS代码改变显示样式。

1下面两句代码，明确了浏览器默认的差距。

* { margin : 0；padd : 0；} 2设置父容器的样式。

#容器{ width:560pxheight: 300pxmargin: 100px自动；相对位置：飞越：隐藏；}因为显示图片的大小是560 X 300，所以这里的父容器的大小也设置得这么大。这里设置的边距是将父容器水平居中，与顶部的垂直距离为100px。溢出意味着如果显示的子元素超出容器的范围，它们将被隐藏(注意：由于显示的图片是一行显示的，如果没有添加overflow: hidden属性，它将被暴露，这将被删除。

也就是说，如果不添加overflow:隐藏的属性，所有图片都会显示成一行。

最后一个是定位属性position:相对；因为容器是父容器，所以它应该设置为相对，如果它的所有子元素都要绝对定位，它们的位置应该设置为绝对。这就是所谓的“子为父”原则。这用于绝对定位。

设置内容的风格。

#容器#内容{ list-style : none；宽度： 10000 px；绝对位置：left:0top:0} #容器#内容li { float:left} #容器#内容Li img { border : 0；}注意内容的width属性设置为10000px，这是为了保证它能存储足够的图片。默认情况下，内容中的所有li都是块级元素，即它们将上下排列；因此，一个短语float:left已添加；让他们左右排队。而父元素容器设置为overflow:隐藏，所以在这些左右排列的图片中只能看到第一个。4设置左右切换按钮的样式。

#容器# LeftBtn { position : absolute；宽度：45 px；高度： 45px；top:108pxleft: 20px背景： URL(images/icons . png)no-repeat 0 0；cursor:指针；} # container # right Btn { position : absolute；宽度：45 px；高度： 45px；top:108pxright: 20pxbackground : URL(images/icons . png)no-repeat 0-45px；cursor:指针；}请注意，当获取左按钮和右按钮时，它们取自同一张照片，icons.png。只是拍摄的图片位置不一致，这叫‘精灵’。就是缩小图片的尺寸，并且在一张图片上放很多小图标，然后通过定位和截取的方法，得到想要的部分。(注：关于如何定位图标？1.写代码，慢慢调整；2.用向导剪切定位软件，如CSS Sprites等。图片设计大致如下：

在这张图中，不仅包含了左右切换按钮，还给出了指示器按钮，所以在编写指示器按钮的css代码时也可以使用这张图。

4设置指示器的样式。

#容器#指示器{ position: absoluteright: 50pxlist-style:无；bottom: 12px} #容器#指示器li {左侧浮动：cursor:指针；左边距left: 20px宽度：14 px；height: 14pxbackground : URL(images/icons . png)no-repeat-23px-127 px；} #容器#指示器Li . current { background-position :-9px-125 px；}代码中# indicorli设置的背景图片是上图中的小空心圆，而# indicorli设置的背景图片。current是上图中的大实心圆。所以一开始默认选择第一个。3.用JQuery添加交互效果。

1切换到下一个(点击右键)。

$(function(){ //图片总数(这个数字是通过代码得到的，可扩展性更强)var total count=$(' # container # content Li ')。长度；//目前在什么图片？var now image=0；$('#container #btn #rightBtn ')。单击(右键单击)；span style=' white-space : pre '/span function right btnclick(){ if(！$(' #容器#内容')。is(' : animated '){ if(now image==total count-1){ span style=' white-space : pre '/span now image=0；span style=' white-space : pre '/span $(' # container # indicator Li ')。eq(nowImage)。addClass('current ')。兄弟姐妹()。removeClass('当前')；span style=' white-space : pre '/span $(' # container # content ')。animate({ ' left ' :-560 *(TotalCount-1)}，1000，function(){ $(' # content # content ')。css('left '，0)；});} else { nowImagechange image()；} } } });图像功能。

函数changeImage(){ if(！$(' #容器#内容')。is(' : animated '){ span style=' white-space : pre '/span $(' # container # content ')。animate({ ' left ' :-560 * now image }，1000)；$(' #容器#指示器li ')。eq(nowImage)。addClass('current ')。兄弟姐妹()。removeClass('当前')；}}代码，当加载DOM元素时，$(“# container # BTN # right BTN’)。执行click(右键单击)，即立即执行切换图片的操作。在rightBtnClick功能中，首先判断内容是否动画化。这样做的目的是为了防止用户在动画执行过程中强行执行其他动画，造成干扰，最终导致动画效果混乱。

如果是，将标志变量nowImage指向下一张图片，并执行changeImage函数中的代码：1。将内容中的所有图片向左移动一个图片大小的宽度；2.将指示器的图片移动到相应的位置。

如果没有，并且图片现在显示到最后一张，那么动画会先执行，执行完成后内容中的所有图片内容会被立即拉回到第一张，但还是会在这里突破，因为如果在当前图片显示到最后一张后继续执行动画就没有效果了，所以在动画执行过程中不会有任何反应。动画时间完成后，界面上会突然出现第一张图片。

设计思路：为了解决这个问题，解决方法是在这些图片后添加与第一张相同的图片；这是传统旋转木马的主要设计思想。所以当画面滚动到倒数第二章；首先，执行滚动动画，即滚动到与第一张完全相同的准备好的图片，这似乎滚动到第一张，但不是。动画完成后，立即将内容中的所有图片拉回到第一张。流程图如下：

所以现在稍微修改一下代码，在代码的开头添加第一张图片。

/*克隆轮播的第一个li追加到最后一个*/$ ('# container # content Li ')。第一个()。克隆()。appendo($(“# container # content”))；在rightBtnClick代码中，将nowImage==totalCount-1更改为nowImage==totalCount-2。2切换到上一个(点击左侧按钮)。

代码类似于点击右边的按钮。

$('#container #btn #leftBtn ')。单击(function(){ if(！$(' #容器#内容')。is(' : animated '){ if(now image==0){ now image=total count-2；$(' #容器#内容')。css('left '，-560 *(TotalCount-1))；$(' #容器#指示器li ')。eq(nowImage)。addClass('current ')。兄弟姐妹()。removeClass('当前')；$(' #容器#内容')。animate({ ' left ' :-560 * now image }，1000)；} else { now image-；change image()；} } });单击指示器按钮切换图片。它的设计思想是获取图片的索引，然后调用changeImage函数。

$(' #容器#指示器li ')。单击(function(){ nowImage=$(this))。index()；change image()；});增加定时执行动画的功能，即定时调用点击右侧按钮的代码；添加以下代码：

var timer=set interval(rightBtnClick，2000)；5将鼠标悬停在图片上并停止滚动；鼠标离开图片后，继续滚动意味着打开和关闭定时器。添加以下代码：

$('#container ')。mouse enter(function(){ clearInterval(timer))；}).mouse leave(function(){ timer=setInterval(right btnclick，2000)；});精彩话题分享：jQuery图片轮播JavaScript图片轮播Bootstrap图片轮播。

至此，传统轮播的效果已经实现，希望大家学以致用。