小编给大家分享一下JS怎么实现旋转木马轮播图,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
成都创新互联公司主营扶绥网站建设的网络公司,主营网站建设方案,成都app软件开发,扶绥h5微信小程序定制开发搭建,扶绥网站营销推广欢迎扶绥等地区企业咨询
知识点
1、旋转木马思想:
1)、固定五种图片的位置信息jsonArr进行布局
2)、点击<或者>会对jsonArr进行重新排序,重新排序后对界面重新进行布局
2、数据驱动界面,数据的改变会影响界面
3、数组的四种操作
① push:push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。
② pop:pop() 方法用于删除并返回数组的最后一个元素。
③ shift:shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。
④ unshift:unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。
引入工具库工具库
运行效果
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; border: none; list-style: none; } img { vertical-align: top; } body { background-color: #000; } #slider { width: 1200px; height: 460px; margin: 100px auto; position: relative; /*background-color: red;*/ } #slider li { position: absolute; left: 200px; top: 0; } #slider li img { width: 100%; height: 100%; } .slider_ctl_prev, .slider_ctl_next { width: 76px; height: 112px; position: absolute; top: 50%; margin-top: -56px; z-index: 99; } #slider_ctl { opacity: 0; } .slider_ctl_prev { background: url("images/prev.png") no-repeat; left: 0; } .slider_ctl_next { background: url("images/next.png") no-repeat; right: 0; } </style> </head> <body> <div id="slider"> <ul id="slider_main"> <li><img src="images/slidepic1.jpg" alt=""></li> <li><img src="images/slidepic2.jpg" alt=""></li> <li><img src="images/slidepic3.jpg" alt=""></li> <li><img src="images/slidepic4.jpg" alt=""></li> <li><img src="images/slidepic5.jpg" alt=""></li> </ul> <div id="slider_ctl"> <span class="slider_ctl_prev"></span> <span class="slider_ctl_next"></span> </div> </div> <script src="../00MyTools/MyTools.js"></script> <script> window.addEventListener('load',function (ev) { // 1. 获取需要标签 var slider = myTool.$('slider'); var sliderMain = myTool.$('slider_main'); var allLis = sliderMain.children; var sliderCtl = myTool.$('slider_ctl'); // 2. 位置信息 var jsonArr = [ {"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"} ]; // 将位置信息作用到图片上去 for (var i = 0; i < jsonArr.length; i++) { myTool.slowMoving(allLis[i], jsonArr[i]); } // 3. 设置显示和隐藏 slider.addEventListener('mouseover', function () { myTool.slowMoving(sliderCtl, {'opacity': 1}); }); slider.addEventListener('mouseout', function () { myTool.slowMoving(sliderCtl, {'opacity': 0}); }); // 4. 监听点击 for (var j = 0; j < sliderCtl.children.length; j++) { var item = sliderCtl.children[j]; item.addEventListener('click',function (evt) { if (this.className === 'slider_ctl_prev'){ // 点击左边 // 两种方式 // 1. 改变数据影响标签 数据驱动界面 // 2. 改变标签适应数据 jsonArr.push(jsonArr.shift()) }else{ // 点击右边 jsonArr.unshift(jsonArr.pop()) } // 重新布局 for (var i = 0; i < jsonArr.length; i++) { myTool.slowMoving(allLis[i], jsonArr[i]); } },false); } },false) </script> </body> </html>
看完了这篇文章,相信你对“JS怎么实现旋转木马轮播图”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
本文名称:JS怎么实现旋转木马轮播图
文章分享:https://www.cdcxhl.com/article18/gphjgp.html
成都网站建设公司_创新互联,为您提供营销型网站建设、定制网站、品牌网站制作、网页设计公司、手机网站建设、企业建站
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联