原生js 实现旋转木马 

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title>旋转木马轮播图</title>
  6     <link rel="stylesheet" href="css/css.css"/>
  7     <script src="common.js"></script>
  8 
  9 </head>
 10 <body>
 11 <div class="wrap" id="wrap">
 12     <div class="slide" id="slide">
 13         <ul>
 14             <li><a href="#"><img src="images/slidepic3.jpg" alt=""/></a></li>
 15             <li><a href="#"><img src="images/slidepic1.jpg" alt=""/></a></li>
 16             <li><a href="#"><img src="images/slidepic2.jpg" alt=""/></a></li>
 17             <li><a href="#"><img src="images/slidepic4.jpg" alt=""/></a></li>
 18             <li><a href="#"><img src="images/slidepic5.jpg" alt=""/></a></li>
 19         </ul>
 20         <div class="arrow" id="arrow">
 21             <a href="javascript:;" class="prev" id="arrLeft"></a>
 22             <a href="javascript:;" class="next" id="arrRight"></a>
 23         </div>
 24     </div>
 25 </div>
 26 <script>
 27     function my$(id) {
 28         return document.getElementById(id);
 29     }
 30     function animate(element,json,fn) {
 31         clearInterval(element.timeId);
 32         element.timeId=setInterval(function () {
 33             var flag=true;//假设都达到了目标
 34             for(var attr in json){
 35                 if(attr=="opacity"){//判断属性是不是opacity
 36                     var current= getAttrValue(element,attr)*100;
 37                     //每次移动多少步
 38                     var target=json[attr]*100;//直接赋值给一个变量,后面的代码都不用改
 39                     var step=(target-current)/10;//(目标-当前)/10
 40                     step=step>0?Math.ceil(step):Math.floor(step);
 41                     current=current+step;
 42                     element.style[attr]=current/100;
 43                 }else if(attr=="zIndex"){//判断属性是不是zIndex
 44                     element.style[attr]=json[attr];
 45                 }else{//普通的属性
 46 
 47                     //获取当前的位置----getAttrValue(element,attr)获取的是字符串类型
 48                     var current= parseInt(getAttrValue(element,attr))||0;
 49                     //每次移动多少步
 50                     var target=json[attr];//直接赋值给一个变量,后面的代码都不用改
 51                     var step=(target-current)/10;//(目标-当前)/10
 52                     step=step>0?Math.ceil(step):Math.floor(step);
 53                     current=current+step;
 54                     element.style[attr]=current+"px";
 55                 }
 56                 if(current!=target){
 57                     flag=false;//如果没到目标结果就为false
 58                 }
 59             }
 60             if(flag){//结果为true
 61                 clearInterval(element.timeId);
 62                 if(fn){//如果用户传入了回调的函数
 63                     fn(); //就直接的调用,
 64                 }
 65             }
 66         },10);
 67     }
 68 </script>
 69 <script>
 70     var config = [
 71         {
 72             width: 400,
 73             top: 20,
 74             left: 50,
 75             opacity: 0.2,
 76             zIndex: 2
 77         },//0
 78         {
 79             width: 600,
 80             top: 70,
 81             left: 0,
 82             opacity: 0.8,
 83             zIndex: 3
 84         },//1
 85         {
 86             width: 800,
 87             top: 100,
 88             left: 200,
 89             opacity: 1,
 90             zIndex: 4
 91         },//2
 92         {
 93             width: 600,
 94             top: 70,
 95             left: 600,
 96             opacity: 0.8,
 97             zIndex: 3
 98         },//3
 99         {
100             width: 400,
101             top: 20,
102             left: 750,
103             opacity: 0.2,
104             zIndex: 2
105         }//4
106 
107     ];
108         var flag = true;//假设所有的动画执行完毕了---锁
109         var list = my$("slide").getElementsByTagName("li");
110 
111         //1---图片散开
112         function assign() {
113             for (var i = 0; i < list.length; i++) {
114                 //设置每个li,都要把宽,层级,透明度,left,top到达指定的目标位置
115                 animate(list[i], config[i], function () {
116                     flag = true;
117                 });
118             }
119         }
120 
121         assign();
122         //右边按钮
123         my$("arrRight").onclick = function () {
124             if (flag) {
125                 flag = false;
126                 config.unshift(config.pop());
127                 assign();
128             }
129 
130 
131         };
132         //左边按钮
133         my$("arrLeft").onclick = function () {
134             if (flag) {
135                 flag = false;
136                 config.push(config.shift());
137                 assign();//重新分配
138             }
139         };
140         //鼠标进入,左右焦点的div显示
141         my$("slide").onmouseover = function () {
142             animate(my$("arrow"), {"opacity": 1});
143         };
144         //鼠标离开,左右焦点的div隐藏
145         my$("slide").onmouseout = function () {
146             animate(my$("arrow"), {"opacity": 0});
147         };
148 </script>
149 </body>
150 </html>

css

 1 @charset "UTF-8";
 2 /*初始化  reset*/
 3 blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
 4 body,button,input,select,textarea{font:12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;color: #666;}
 5 ol,ul{list-style:none}
 6 a{text-decoration:none}
 7 fieldset,img{border:0;vertical-align:top;}
 8 a,input,button,select,textarea{outline:none;}
 9 a,button{cursor:pointer;}
10 
11 .wrap{
12     width:1200px;
13     margin:100px auto;
14 }
15 .slide {
16     height:500px;
17     position: relative;
18 }a
19 .slide li{
20     position: absolute;
21     left:200px;
22     top:0;
23 }
24 .slide li img{
25     width:100%;
26 }
27 .arrow{
28     opacity: 0;
29 }
30 .prev,.next{
31     width:76px;
32     height:112px;
33     position: absolute;
34     top:50%;
35     margin-top:-56px;
36     background: url(../images/prev.png) no-repeat;
37     z-index: 99;
38 }
39 .next{
40     right:0;
41     background-image: url(../images/next.png);
42 }

 

posted @ 2021-11-14 11:07  aixuexi666888  阅读(98)  评论(0)  编辑  收藏  举报