网页轮播图代码分享（html+css+原生js） |
您所在的位置：网站首页 › html轮播图自动切换页面代码 › 网页轮播图代码分享（html+css+原生js） |
|
网页轮播图是我们网页常常需要使用的效果，现在也有各种框架或是插件可以很好地实现网页轮播图，但了解其布局及js实现原理也是很有必要的，尤其是对于刚接触js的人，学会轮播图的实现原理，对js的理解及深入学习也是大有裨益的，于是跟着视频教学，编写了网页轮播图，代码分享如下： 一、html布局代码 二、css层叠样式表 *{ padding:0; margin:0; } .mylunbo{ margin:20px auto; position: relative; width: 720px; height: 432px; /*background-color: purple;*/ overflow: hidden; } img{ width:720px; height:432px; } .mylunbo ul{ position: absolute; top: 0; left: 0; width:500%; } ul li{ float:left; list-style-type: none; } ol li{ list-style-type: none; } .arrow-l, .arrow-r { display: none; position: absolute; top: 50%; margin-top: -20px;/*高度40，上移20*/ width: 24px; height: 40px; background: rgba(0, 0, 0, .3); text-align: center; line-height: 40px; color: #fff; font-family: 'icomoon'; font-size: 18px; z-index: 2; } .arrow-r { right: 0; } .circle { position: absolute; bottom: 10px; left: 350px; } .circle li { float: left; width: 8px; height: 8px; /*background-color: #fff;*/ border: 2px solid rgba(240, 120, 120, 0.5); margin: 0 3px; border-radius: 50%; /*鼠标经过显示小手*/ cursor: pointer; } .current { background-color: #fff; } a:hover{ color:red; }三、js代码（animate.js+index.js） function animate(obj,length,callback){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var step=(length-obj.offsetLeft)/10; // 缓动效果，步长=（目标值-当前值）/10 step=step>0 ? Math.ceil(step) : Math.floor(step); if(obj.offsetLeft==length){ clearInterval(obj.timer); if(callback) callback(); //callback && callback() } obj.style.left=obj.offsetLeft+step+'px'; },15); } window.addEventListener('load',function(){ const lunbo=document.querySelector(".mylunbo"); const arrowl=document.querySelector(".arrow-l"); const arrowr=document.querySelector(".arrow-r"); var num=0; // 左右移动按钮定位图片 var circle=0; // 定位小圆点 var flag=true; // 节流阀 //1、右侧按钮，左侧按钮 lunbo.addEventListener('mouseenter',function(){ arrowl.style.display='block'; arrowr.style.display='block'; clearInterval(timer); // 清楚计时器，轮播图不自动播放 //timer=null; // 清楚timer变量 }); lunbo.addEventListener('mouseleave',function(){ arrowl.style.display='none'; arrowr.style.display='none'; timer=setInterval(function(){ arrowr.click(); },2000); }); //2、创建小圆点 const ul=lunbo.querySelector("ul"); const ol=lunbo.querySelector("ol"); for(let i=0;i |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |