未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
JS---案例:旋转木马

案例:旋转木马

 

页面加载时候出现的效果,script标签写在head里面,body上面

显示一个图片散开的动画,遍历之后,把每个图片用封装的动画函数移动到指定目标(同时改变多属性:宽,透明度,层级,top, left)

在做左右按钮点击事件。

右边按钮,用数组里面的push和shift,数组第一个去除加到最后一个位置

左边按钮,unshift最后一个pop到第一个

在很快点击的时候,会有混乱的情况(一个函数没执行完毕下一个执行全挤在一起)所以加了一个锁flag,保证一个函数执行完毕才进行下一个函数

分别添加进图片散开,左边按钮,右边按钮3个事件里面。

 

<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title>旋转木马轮播图</title>  <link rel="stylesheet" href="css/css(1).css" />  <script src="common.js"></script>  <script>    var config = [      {        width: 400,        top: 20,        left: 50,        opacity: 0.2,        zIndex: 2      },      {        width: 600,        top: 70,        left: 0,        opacity: 0.8,        zIndex: 3      },      {        width: 800,        top: 100,        left: 200,        opacity: 1,        zIndex: 4      },      {        width: 600,        top: 70,        left: 600,        opacity: 0.8,        zIndex: 3      },      {        width: 400,        top: 20,        left: 750,        opacity: 0.2,        zIndex: 2      }    ];    //页面加载的事件    window.onload = function () {      var flag = true; //假设所有的动画执行完毕了---锁=====================================      var list = my$("slide").getElementsByTagName("li");      //图片散开      function assign() {        for (var i = 0; i < list.length; i++) {          //设置每个li,用封装的animate函数,把宽,层级,透明度,left,top移动到制定的目标位置          animate(list[i], config[i], function () {            flag = true; //==============================================================          })        }      };      assign();      //右边按钮      my$("arrRight").onclick = function () {        if (flag) { //=====================================================================          flag = false;          config.push(config.shift());          assign();// 重新分配        }      };      //左边按钮      my$("arrLeft").onclick = function () {        if (flag) {          flag = false;          config.unshift(config.pop());          assign();        }      };      //鼠标进入,左右焦点的div显示      my$("slide").onmouseover = function () {        animate(my$("arrow"), { "opacity": 1 });      };      //鼠标离开,左右焦点的div隐藏      my$("slide").onmouseout = function () {        animate(my$("arrow"), { "opacity": 0 });      };    };  </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:;" class="prev" id="arrLeft"></a>        <a href="javascript:;" class="next" id="arrRight"></a>      </div>    </div>  </div></body></html>
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP阅读全文并永久保存 更多类似文章
猜你喜欢
类似文章
原生JS实现旋转木马轮播图特效
翻页效果代码
路上神人无需解释 让你看到疼的邪恶场面
CSS+JS自动改变切换方向的图片幻灯切换效果
CSS完成神奇创意的相框
jquery图片滚动
更多类似文章 >>
生活服务
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!