旋转木马轮播图（原生js）

最新推荐文章于 2024-04-30 16:57:21 发布

VIP文章前端夕夕

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量613

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_41865901/article/details/112406944

版权

旋转木马轮播图
在这里插入图片描述
五张图片分别对应不同的left，top，width，opacity，zindex
所以我们要建一个数组，来存储这5张图片对应的位置等属性
然后通过自定义动画函数animate，详情请点开链接添加链接描述
执行对li标签里的每一张图片的动画，分别到刚才储存的数组里。
每当点击切换图片的按钮，利用arr.shift()这个函数
意思是除去数组里第一个元素，并且返回这个元素的值
再把这个元素添加到最后一个元素后面就好了
即：arr.push(arr.shift())
左边按钮相反
利用arr.pop()，把最后一个元素删除，返回最后一个元素的值
用arr.unshift(arr.pop())把最后一个元素添加到第一个。
注意，为了确保动画完成才能点击右边的按钮，我们要定义一个变量flag，设置最开始的值为true，即元素还没有完成动画，当点击事件发生，把flag变成false.这时候，动画函数animate(element,{},fn),里面这个fn是回调函数，当动画执行完毕后才执行这个函数。所以我们设置这个函数为:
function(){
flag = true;
}

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>旋转木马轮播图</title>
  <link rel="stylesheet" href="css/css.css"/>
</head>
<body>
<div class="wrap" id="wrap">
  <div class="slide" id="slide">
    <ul>
      <li><a href="#"><img src="images/1.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/2.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/3.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/4.jpg" alt=""/

最低0.47元/天解锁文章

前端夕夕

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
旋转木马轮播图（原生js）

旋转木马轮播图五张图片分别对应不同的left，top，width，opacity，zindex所以我们要建一个数组，来存储这5张图片对应的位置等属性然后通过自定义动画函数animate，详情请点开链接添加链接描述执行对li标签里的每一张图片的动画，分别到刚才储存的数组里。每当点击切换图片的按钮，利用arr.shift()这个函数意思是除去数组里第一个元素，并且返回这个元素的值再把这个元素添加到最后一个元素后面就好了即：arr.push(arr.shift())左边按钮相反利用arr.p
复制链接

扫一扫