轮播图动画

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：Visual Studio Code

作者：Justin Bieber

撰写时间：2021年12月18日

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

今天我们来做一个轮播的动画效果，他可以实现左右图片切换与点击图片跳转到图片的效果。

 

 

一、代码

1.HTML：

 

2.CSS：

 

 

3.JavaScript:

 

 

 

二、分析代码

我们做这个轮播之前我们得准备好几张图片，然后进行布局

1.HTML页面我们得需要一个大盒子（div）来进行包裹这个轮播的图片，大盒子（div）里面得需要两个（div）一个装着图片，一个装着我们的点击按钮。

 

第一个（div）盒子我们先给一个“class”的类，然后再给一个“id”名，我们还需要将第一张图片复制到后面，后面那张图片复制到前面，这样做是为了，拥有一个视觉差，不然后面点击切换到最后一张或者最前一张的时候会有一个视觉的卡顿；

第二个盒子我们用一个“a”标签来做我们的左右切换按钮，同样给他们两个一个“class”类和“id”名。跳转图片那部分，我们在后面随机给一个名，比如：index=“”，这样做，后面讲JS环节会讲到，然后给第一个“img”写一个“class”的类，这个是为了后面的图片切换高亮效果。

2.CSS我们写的时候只需要注意几个点就可以了。我们要给我们这个大盒子这个类添加一个相对定位，再给我们装图片的那个盒子一个添加一个绝对定位，如果不这样做的话，我们图片是无法进行左右移动的。

 

1. JS的话，我们稍微注意一下，以下图片的那几段代码，可能如果强行记忆的话，会稍微有那么一丢丢困难，我们记住这两句话就好了。

图片向左移动 传递过来的值是负数 speed<0 list.style.left的值逐渐减小，所以只要list.style.left大于newleft的值 那么就应该要调用go方法

speed>0&&parseInt(list.style.left)<newleft

图片向右移动 传递过来的值是整数 speed>0 list.style.left的值逐渐增大，所以只要list.style.left小于newleft的值 那么就应该要调用go方法

speed<0&&parseInt(list.style.left)>newleft

这段代码我们要记的只有这段代码。

var myindex = this.getAttribute("index");//获取属性值

这段代码就是前面我们说的index=“”，就是为了这一段，我们还需要在头顶写一段var index = 1这段，这段是为了获取到index的值，（然后后面就稍微注意一下JS代码是全程用英文状态下去写的，不要错了）。

 

然后我们这个轮播效果就讲到这里

我们下次再见！