十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
这篇文章给大家分享的是有关原生js怎么实现3D轮播图的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
我们提供的服务有:做网站、成都网站制作、微信公众号开发、网站优化、网站认证、隆阳ssl等。为超过千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的隆阳网站制作公司首先分析一下3D图片轮播的功能需求:
和其它图片轮播大体一致,无非就是点击按钮向左、右翻页,点击下方提示位置小点切换到小点表示对的位置页(我是真的不知道那个小点叫什么名字,大家将就着听吧)
上代码:
基本代码:
立体轮播图 < >
js代码:
// 简单说一下我是怎么想的:1.分步实现,先实现图片自己动,在加其它的功能 // 2.每实现一个功能要立马去测bug,因为放到后面就越难找了。 // 3.轮播向左,向右是两个互相联系的方法,需要找到彼此的关系 var imgae_div = document.getElementsByClassName('imgae_div')[0]; var imgae_div_child = imgae_div.children; var btn=document.getElementsByClassName('btn')[0]; var block=document.getElementsByClassName('block')[0]; var new_point = document.getElementsByClassName("point")[0].children; new_point[0].style.backgroundColor = "#000000"; // 利用函数的封装 ps:图片轮播离不开计时器,且个人觉得用setIntervar比较多 img_work(); function img_work() { time = setInterval(function () { img_workfirst('left', 0);//两个参数,判断向左还是向右轮播,索引 }, 1500); } // console.log(point.child); function img_workfirst(left_right, cindex) { // 这里面首先说一下css中写好的默认层关系:从第1张到第6张为别为 6 5 4 3 4 5,和页面的布局有关 var firstpage = {//当前页的各种属性 // getComputedStyle()获取css属性 left: window.getComputedStyle(imgae_div_child[cindex]).left, top: window.getComputedStyle(imgae_div_child[cindex]).top, zIndex: window.getComputedStyle(imgae_div_child[cindex]).zIndex, backcolor: window.getComputedStyle(new_point[cindex]).backgroundColor }; if (left_right == 'left') { // 向左轮播为默认轮播 for (var i = 0; i < imgae_div_child.length; i++) { // for循环遍历所有元素 if (i == imgae_div_child.length - 1) { // 当前页的下一张为 最后一张(位置都是动态切换的) imgae_div_child[i].style.left = firstpage.left; imgae_div_child[i].style.top = firstpage.top; imgae_div_child[i].style.zIndex = firstpage.zIndex; new_point[i].style.backgroundColor = firstpage.backcolor; } else { // 其它页对应为它前面元素的属性 imgae_div_child[i].style.left = window.getComputedStyle(imgae_div_child[i + 1]).left; imgae_div_child[i].style.top = window.getComputedStyle(imgae_div_child[i + 1]).top; imgae_div_child[i].style.zIndex = window.getComputedStyle(imgae_div_child[i + 1]).zIndex; new_point[i].style.backgroundColor = window.getComputedStyle(new_point[i + 1]).backgroundColor; } } } // 向右轮播,借助向左轮播分析 else { for (var i = imgae_div_child.length - 1; i >= 0; i--) { if (i == 0) { imgae_div_child[i].style.left = firstpage.left; imgae_div_child[i].style.top = firstpage.top; imgae_div_child[i].style.zIndex = firstpage.zIndex; new_point[i].style.backgroundColor = firstpage.backcolor; } else { imgae_div_child[i].style.left = window.getComputedStyle(imgae_div_child[i - 1]).left; imgae_div_child[i].style.top = window.getComputedStyle(imgae_div_child[i - 1]).top; imgae_div_child[i].style.zIndex = window.getComputedStyle(imgae_div_child[i - 1]).zIndex; new_point[i].style.backgroundColor = window.getComputedStyle(new_point[i - 1]).backgroundColor; } } } firstpage = null; // 将表示当前页的数据清空,防止bug(因为当前页也是动态变化的,需要动态创建) } // console.log(new_point); // 消除一些bug window.onblur = function () {//窗口失焦时,计时器停止 clearInterval(time); } window.onfocus = function () { img_work();//获焦时开启计时器 } document.onselectstart = function () {//禁止用户复制 return false; } block.οnmοuseenter=function(){//鼠标进入轮播图时,两个按钮滑动出来 clearInterval(time); btn.children[1].className='marright'; btn.children[0].className='marleft'; } block.οnmοuseleave=function(){//离开时和平时隐藏 img_work(); btn.children[1].className=''; btn.children[0].className=''; for (var k = 0; k < imgae_div_child.length; k++) { imgae_div_child[k].style.transitionDuration = "0.5s"; } } // 对应的左右按钮的点击事件 btn.children[0].οnclick=function(event){ if(event.detail==1){//用于控制鼠标的连击,但是效果对于故意测试来说还是有所缺陷 下同 img_workfirst('left',0); } } btn.children[1].οnclick=function(event){ if(event.detail==1){ img_workfirst('right',imgae_div_child.length-1); } } // point的事件 for(var i=0;ioldindex){//所需页在当前页的左(左右相对于下方点来说) num=this.index-oldindex; var timego=setInterval(function(){ num--; if(num<0){ clearInterval(timego); } else{ img_workfirst('right',5)//因为方向变了,所以下一页就为当前页的上一页,也就是cindex为5 } },100);//动画时间缩短,优化体验 } else{//所需页在当前页的左(左右相对于下方点来说) num=Math.abs(this.index-oldindex); var timego=setInterval(function(){ num--; if(num<0){ clearInterval(timego); } else{ img_workfirst('left',0) } },100); } } }
关于出现的bug的一些总结:
1、注意左右的区分与联系
2、注意连续点击的bug
3、注意切换窗口,切换页面,最小化等这些切换的bug
4、注意代码格式,在js中写css样式时,要注意格式
感谢各位的阅读!关于“原生js怎么实现3D轮播图”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。