发布时间：2025-12-11 01:41:35 浏览次数：1
知识点
1、旋转木马思想:
1)、固定五种图片的位置信息jsonArr进行布局
2)、点击<或者>会对jsonArr进行重新排序,重新排序后对界面重新进行布局
2、数据驱动界面,数据的改变会影响界面
3、数组的四种操作
① push:push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。
② pop:pop() 方法用于删除并返回数组的最后一个元素。
③ shift:shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。
④ unshift:unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。
引入工具库工具库
运行效果
代码:
<!DOCTYPEhtml><htmllang="en"><head><metacharset="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:100pxauto;position:relative;/*background-color:red;*/}#sliderli{position:absolute;left:200px;top:0;}#sliderliimg{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><pid="slider"><ulid="slider_main"><li><imgsrc="images/slidepic1.jpg"alt=""></li><li><imgsrc="images/slidepic2.jpg"alt=""></li><li><imgsrc="images/slidepic3.jpg"alt=""></li><li><imgsrc="images/slidepic4.jpg"alt=""></li><li><imgsrc="images/slidepic5.jpg"alt=""></li></ul><pid="slider_ctl"><spanclass="slider_ctl_prev"></span><spanclass="slider_ctl_next"></span></p></p><scriptsrc="../00MyTools/MyTools.js"></script><script>window.addEventListener('load',function(ev){//1.获取需要标签varslider=myTool.$('slider');varsliderMain=myTool.$('slider_main');varallLis=sliderMain.children;varsliderCtl=myTool.$('slider_ctl');//2.位置信息varjsonArr=[{"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(vari=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(varj=0;j<sliderCtl.children.length;j++){varitem=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(vari=0;i<jsonArr.length;i++){myTool.slowMoving(allLis[i],jsonArr[i]);}},false);}},false)</script></body></html>看完了这篇文章,相信你对“JS怎么实现旋转木马轮播图”有了一定的了解,如果想了解更多相关知识,欢迎关注本站行业资讯频道,感谢各位的阅读!
免责声明：本站内容（文字信息+图片素材）来源于互联网公开数据整理或转载，仅用于学习参考，如有侵权问题，请及时联系本站删除，我们将在5个工作日内处理。联系邮箱：303555158#qq.com（把#换成@）
微信便捷交流