轮播地图在我们的web项目中有着广泛的应用，尤其是在商场项目中，通常用于推荐新品、热销、促销等产品。重要的站点公告也可以通过轮播地图呈现。现在有各种第三方插件可以实现轮播图。即使是完全不懂javascript或jQuery的新手也能实现轮播效果。不过作为初学者还是要了解一点原理的(请大神忽略)。
其实实现轮播的方法有很多，比如移动图片的位置，设置图片的显示和隐藏等。，可以实现轮播切换效果。这里简单演示一下移动图片距离实现轮播效果的方法。
首先，用简单的css样式写一个html页面。代码如下:
效果如图1所示：效果如图1所示:
我们实现carousel主要是水平移动图片的位置，所以要把图片排成一行浮动，把多余的部分隐藏起来，只显示一张图片，添加css如下:
如图2所示：如图2所示:
现在我们只能看到一张图，其余的都是隐藏的，因为不在范围之内。滑块框，如下图3所示:
其实动图的原理很简单。我们只需要不断改变ul的左值，如下图4所示:
现在我们需要使用jQuery不断改变这个左值。
先介绍jquery-3 . 2 . 1 . min . js；；Jq代码如下:
刷新页面，效果如图5所示:
但是画面的切换是瞬间完成的，而且只有一次，没有轮播，所以这不是我们想要的效果。旋转木马必须有规律地随着时间轮流播放。所以根据我们之前在《javascript动画基础》中讲解的，一定要结合时间函数和时间增量来完成动画效果。
修改上面的jq代码:
效果如图6所示:
虽然可以按时间间隔切换图片，但是最后一次切换完成后，程序并没有停止或者重置图片，而是继续向后移动ul，所以空白出现了，因为我们每次移动的距离是1920px，正好是图片的宽度。其实画面只需要切换两次就能到达第三个画面，然后空白色出现。我们需要判断左边是否是3张图片的宽度之和，也就是左边+5760是否等于0(左边为负)。如果是，那么我们需要将ul的左值设置为0，然后从头开始切换，修改代码:
效果如图7所示:
现在只要画面切换到最后一张，就不会继续切换回来，而是回到第一张画面，重新切换。我们还可以使用jQuery提供的ani***te()方法，这样就可以看到图片从右到左的切换过程:
效果如图8所示:
然后，一个简单的旋转木马，我们就完成了。实现carousel的方法有很多，但这里只是一个基本的想法。喜欢的朋友可以关注一下，稍后我们会发布进阶视频。
本文来自铁石心肠投稿，不代表舒华文档立场，如若转载，请注明出处：https://www.chinashuhua.cn/24/528099.html
微信扫一扫 
