个人中心
gpt4 book ai didi

js轮播图之旋转木马效果

转载 作者：qq735679552 更新时间：2022-09-29 22:32:09 32 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章js轮播图之旋转木马效果由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

本文实例为大家分享了js轮播图之旋转木马效果的具体代码，供大家参考，具体内容如下 。

思路：给定一个数组，储存每张图片的位置，旋转将位置进行替换 左旋转：将数组第一个数据删除，然后添加到数组的最后 右旋转：将数组最后一个数据删除，然后添加到数组的开头 先附上效果图，再来实现 。

js轮播图之旋转木马效果

接下来就是最主要的，封装原生js动画函数 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
//封装函数获取任意一个元素的任意属性的值（兼容ie8）
function getStyle(element, attr) {
  return window.getComputedStyle ? window.getComputedStyle(element, null )[attr] : element.currentStyle[attr];
}
//封装js变速动画
function animate(element, json, fn) {
  //每次启动定时器之前先停止
  clearInterval(element.tmId);
  element.tmId = setInterval( function () {
   var flag = true ;
   //遍历对象中的每个属性
   for ( var attr in json) {
    //执行透明度动画
    if (attr == "opacity" ) {
     //获取当前元素的属性值
     var current = parseInt(getStyle(element, attr)*100);
     //获取目标值
     var target = json[attr]*100;
     //移动的步数
     var step = (target - current) / 10;
     step = step > 0 ? Math.ceil(step) : Math.floor(step);
     //移动后的值
     current += step;
     element.style[attr] = current / 100;
    } else if (attr == "zIndex" ) {
     //改变层级属性
     element.style[attr] = json[attr];
    } else {
     //获取当前元素的属性值
     var current = parseInt(getStyle(element, attr));
     //获取目标值
     var target = json[attr];
     //移动的步数
     var step = (target - current) / 10;
     step = step > 0 ? Math.ceil(step) : Math.floor(step);
     //移动后的值
     current += step;
     element.style[attr] = current + "px" ;
     if (current != target) {
      flag = false ;
     }
    }
   }
   if (flag) {
    clearInterval(element.tmId);
    //如果有回调函数就调用
    if (fn) fn();
   }
   // 测试
   // console.log("目标：" + target + "/当前：" + current + "/步数：" + step);
  }, 20);
}

封装完函数，剩下的直接调用就可以了，最后附上旋转木马完整代码？

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
< html >
< head lang = "en" >
  < meta charset = "UTF-8" >
  < title >旋转木马轮播图</ title >
  < link rel = "stylesheet" href = "css/css(1).css" rel = "external nofollow" />
  < script src = "common.js" ></ script >
  < script >
   var config = [
    {
     width: 400,
     top: 20,
     left: 50,
     opacity: 0.2,
     zIndex: 2
    },//0
    {
     width: 600,
     top: 70,
     left: 0,
     opacity: 0.8,
     zIndex: 3
    },//1
    {
     width: 800,
     top: 100,
     left: 200,
     opacity: 1,
     zIndex: 4
    },//2
    {
     width: 600,
     top: 70,
     left: 600,
     opacity: 0.8,
     zIndex: 3
    },//3
    {
     width: 400,
     top: 20,
     left: 750,
     opacity: 0.2,
     zIndex: 2
    }//4
 
   ];
 
   window.onload = function () {
    var flag = true;
    var list = $query("#slide").getElementsByTagName("li");
 
    function flower() {
     //1、图片散开
     for (var i = 0; i < list.length ; i++) {
      //设置每个li的宽，透明度，left,top，zindex
      animate(list[i], config[i], function () {
       flag = true ;
      });
     }
    }
 
    flower();//初始化调用函数
    //按钮的显示与隐藏
    $query("#slide") .onmouseover = function () {
     $query("#arrow") .style.opacity = "1" ;
    }
    $query("#slide") .onmouseout = function () {
     $query("#arrow") .style.opacity = "0" ;
    }
    //点击切换
    $query("#arrLeft") .onclick = function () {
     if (flag) {
      config.unshift(config.pop());
      flower();
      flag = false ;
     }
    }
    $query("#arrRight") .onclick = function () {
     if (flag) {
      config.push(config.shift());
      flower();
      flag = false ;
     }
    }
    //自动切换
    setInterval(function () {
     config.push(config.shift());
     flower();
    }, 2000);
   }
  </script>
 
</ head >
< body >
< div class = "wrap" id = "wrap" >
  < div class = "slide" id = "slide" >
   < ul >
    < li >< a href = "#" >< img src = "images/slidepic1.jpg" alt = "" /></ a ></ li >
    < li >< a href = "#" >< img src = "images/slidepic2.jpg" alt = "" /></ a ></ li >
    < li >< a href = "#" >< img src = "images/slidepic3.jpg" alt = "" /></ a ></ li >
    < li >< a href = "#" >< img src = "images/slidepic4.jpg" alt = "" /></ a ></ li >
    < li >< a href = "#" >< img src = "images/slidepic5.jpg" alt = "" /></ a ></ li >
   </ ul >
   < div class = "arrow" id = "arrow" >
    < a href = "javascript:void(0);" class = "prev" id = "arrLeft" ></ a >
    < a href = "javascript:void(0);" class = "next" id = "arrRight" ></ a >
   </ div >
  </ div >
</ div >
 
</ body >
</ html >

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

原文链接：https://blog.csdn.net/qq_38944959/article/details/86506035 。

最后此篇关于js轮播图之旋转木马效果的文章就讲到这里了,如果你想了解更多关于js轮播图之旋转木马效果的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

32 4 0
文章推荐： CRM和营销自动化软件之间有什么区别？
文章推荐： Linux 内核 2021：Linus Torvalds 最多产，commit 数降至 73.7k
文章推荐： Microsoft Exchange 的扫描程序无法接受 2022 年的到来
文章推荐： Vue中正确使用Element-UI组件的方法实例
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com