标签：function style num 轮播 js ul html circle
网页轮播图是我们网页常常需要使用的效果，现在也有各种框架或是插件可以很好地实现网页轮播图，但了解其布局及js实现原理也是很有必要的，尤其是对于刚接触js的人，学会轮播图的实现原理，对js的理解及深入学习也是大有裨益的，于是跟着视频教学，编写了网页轮播图，代码分享如下：
一、html布局代码
<body>
<div class="mylunbo">
<a href="javascript:;" class="arrow-l"><</a>
<a href="javascript:;" class="arrow-r">></a>
<ul>
<li>
<a href="#"><img src="2.png" width="720" height="432" alt="" /></a>
</li>
<li>
<a href="#"><img src="1.png" width="720" height="432" alt="" /></a>
</li>
<li>
<a href="#"><img src="3.jpeg" width="720" height="432" alt="" /></a>
</li>
<li>
<a href="#"><img src="4.jpeg" width="720" height="432" alt="" /></a>
</li>
</ul>
<ol class="circle">
</ol>
</div>
</body>
二、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<ul.children.length;i++){ // 根据图片数量生成小圆点
let li=document.createElement("li");
li.setAttribute('index',i); // 添加自定义属性index
ol.appendChild(li);
//3、添加小圆圈点击事件
li.onclick=function(){
for(let i=0;i<ol.children.length;i++){
ol.children[i].className='';
}
this.className='current';
//4、小圆圈动画
let lunbowidth=lunbo.offsetWidth;
let index=this.getAttribute('index');
num=circle=index; // 点击小圆点时，将num和circle的值赋值为index，即将小圆点顺序和左右按钮的num定位到当前图片
animate(ul,-index*lunbowidth); // 调用动画函数，-index*lunboWidth为终点位置
}
}
//5、克隆子元素-->ABCDA，此时最后一张图为第一张图的复制！！
let child=ul.children[0].cloneNode(true);
ul.appendChild(child);
ol.children[0].className='current';
//6、右侧按钮点击事件
arrowr.addEventListener('click',function(){
if(flag){
flag=false; // 未完成轮播动画，不能轮播，设置为false
if(num==ul.children.length-1){
ul.style.left=0; // 当点击到最后一个图片时，即和第一幅图相同的那张，num为ul.children.length-1,先切换到第一张(很快),执行动画切换到第二张
num=0; // num重新设为0，后面再加1
}
num++;
animate(ul,-num*lunbo.offsetWidth,function(){
flag=true; // 将flag设置为true，可以再次点击轮播
});
circle++;
if(circle==ol.children.length) // 当小圆圈移动到最后，点击右移，circle+1,此时circle为ol.children.length
circle=0;
setCurrent();
}
})
//7、左侧点击事件
arrowl.addEventListener('click',function(){
if(flag){
flag=false;
if(num==0){
num=ul.children.length-1; // 当轮播图为第一张图时，num设为最后一张图的index，之后再减一
ul.style.left=-num*lunbo.offsetWidth+'px'; // 先切换到最后一张图，之后再调用动画函数到实际倒数第二图
}
num--;
animate(ul,-num*lunbo.offsetWidth,function(){
flag=true;
});
circle--;
if(circle==-1) // 当小圆圈在第一个位置时，点击左移，circle-1，此时circle为-1
circle=ol.children.length-1;
setCurrent();
}
});
var timer=setInterval(function(){
arrowr.click();
},2000);
function setCurrent(){
for(let i=0;i<ol.children.length;i++){
ol.children[i].className='';
}
ol.children[circle].className='current';
}
})
源码分享：
链接：https://pan.baidu.com/s/1DrXnGKlahm4XhdCmTjFvDg
提取码：2ldh
标签：function,style,num,轮播,js,ul,html,circle 来源： https://www.cnblogs.com/leviwwh/p/16262543.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。