原生js实现轮播图
2017-12-27 20:45
771 查看
很多很多网站经常会用到一个特效，那就是轮播图，对于日新月异的前端技术来说其实就是一个框架一个接口的事，但轮播的原理是什么？用最原始的javascript来写又是怎样的呢？本人是一枚菜鸟，这篇文章就当做自己的学习笔记吧，觉得有益处的也可以留着或去demo看看。（后续也会陆续更新一些学习笔记及demo）
前端很注重作用域的精准性，这里我就不考虑了，主要在于轮播的思想。
先说下轮播的实现原理：（实际上是有很多种，我说下比较简单的一种）
All：轮播就犹如一张在移动的很长的山水画，这张山水画被放在地板下，地板开了个刚好容纳一张图大小的窗口，每次这张山水画挪动每张小图的大小。这样每次就露出刚好一张图的外观。
用到的技术点：1、绝对定位。2、定时器+位移增减。3、overflow：hidden。（这个可以理解为刚刚的地板开窗）。4、其他小知识点（待会说）
其实轮播图整体上就由我说的那样，没什么很特别的，注意下涉及到运动，坐标点，绝对定位就比较重要了，当然目前我的认知水平到这里，大神们有不同见解请多指教！
具体的代码如下，解释也在其中：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
/**{margin:0;padding:0}：初学经常遇到这种方法，不推荐，这样意思不管你用不用这个标签，它都帮你初始化，浪费浏览器资源*/
div,ul,li,img,a,span{margin:0;padding:0}
.lunBo{margin:100pxauto;position:relative;border-radius:15px;overflow:hidden}
.lunBo,.lunBo ul li,.lunBo ul liimg{width:400px;height:250px;}
.lunBoul{height:250px;position:absolute;}
.lunBo ulli{float:left;list-style:none;}
/*鼠标按钮*/
.other{position:absolute;top:110px;width:100%;display:none;}
.other .direction{height:30px;}
.other .directiona{width:30px;font:30px bold 宋体;color:black;background:lightblue;line-height:30px;border-radius:15px;text-align:center;text-decoration:none;cursor:pointer;z-index:15;position:relative;}
.left{float:left;}
.right{float:right}
/*小圆点*/
.other .point{width:100px;margin:90pxauto 0;}
span{width:10px;height:10px;border-radius:5px;background:#333;cursor:pointer;float:left;margin:05px;position:relative;z-index:15;}
.yellow{background:yellow;}
</style>
<script>
window.onload=function(){
function lunBo(){
varoDiv=document.getElementById('LunBo');
varoOther=document.getElementById('Other');
varoUl=oDiv.getElementsByTagName('ul')[0];
var oLi=oUl.getElementsByTagName('li');
var oPoint =oDiv.getElementsByTagName('span');
var time=0;
varspeed=-oLi[0].offsetWidth; //这是每次移动的距离为li的宽度，也就是图片的宽度
oUl.style.width=oLi[0].offsetWidth*oLi.length+"px";//设置Ul的宽度
/*基础实现部分*/
function move() {
oUl.style.left =oUl.offsetLeft + speed + 'px';//这句就是刚刚的关键点，位移增减，需注意要设置成绝对定位，offsetLeft才有效
//同时这个绝对定位对网站的排布影响是比较大的，尽量让其的影响范围缩小，最简单的办法就是在其最接近的父元素设置成relative，也就是相对定位
if (oUl.offsetLeft <=-oLi[0].offsetWidth * oLi.length)
{
oUl.style.left ='0'; //这个判断呢是当山水画移到最左端时，让它回到原点，并继续循环移动
}
if(oUl.offsetLeft>=oLi[0].offsetWidth){ //这个也一样，方向是Ul往右移动到最后一张图时，又重新回到原点
oUl.style.left=-oLi[0].offsetWidth * (oLi.length-1)+'px';
}
point();
}
/*setInterval(move,1000)：这个是循环定时器，它会每隔1000ms调用move函数*/
time=setInterval(move,1000);
//鼠标移入移出事件：很简单，我要让当鼠标移入时轮播图暂停，就先清除定时器，移出时重新打开即可
oDiv.onmouseover = function(){clearInterval(time);oOther.style.display='block';};
oDiv.onmouseout=function(){time=setInterval(move,1000);oOther.style.display='none'};
/*小圆点跟随变动：这个是必须的，无论是自动播放，左右切图还是点击小圆点，都会有变动，需要封装成一个子函数*/
function point(){
varflag=-oUl.offsetLeft/oLi[0].offsetWidth;
for (var i = 0; i <oPoint.length; i++) {
oPoint[i].className ='';
//全部小圆点清除颜色，因为你事先并不知道有多少个有色，多少个无色，宁可错杀一千，绝不放过一个
}
oPoint[flag].className ='yellow';//选中的小圆点加黄色背景
}
/*左右单击切换图片*/
varoDiv1=document.getElementById('Other');
varoA=oDiv1.getElementsByTagName('a');
oA[0].onclick=function(){//这里两个oA其实是左右键，
speed=oLi[0].offsetWidth;//前面是+speed,向左移为什么速度是正的？想一想？
setTimeout(move,0);//很简单，我们点击向左，实际上是想把当前图左边的一张图显示出来
point();//因而Ul实际上是向右移动，所以速度为正
};
oA[1].onclick=function(){
speed=-oLi[0].offsetWidth; //反之也一样
setTimeout(move,0);
point();
};
/*单击小圆点切换对应图片*/
for (var i = 0; i <oPoint.length; i++) {
oPoint[i].index = i;
oPoint[i].onclick =function () {
for (var i = 0; i <oPoint.length; i++) {
oPoint[i].className= '';
}
this.className ='yellow';
oUl.style.left =-oLi[0].offsetWidth * this.index + 'px';
}
}
}
lunBo();
}
</script>
</head>
<body>
<divclass="lunBo" id="LunBo">
<div class="other"id="Other">
<div class="direction">
<a href="javascript:;"class="left"><</a>
<a href="javascript:;"class="right">></a>
</div>
<div class="point">
<spanclass="yellow"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<ul>
<li><ahref="javascript:"><img src="img/1.jpg"alt="1"></a></li>
<li><ahref="javascript:"><img src="img/2.jpg"alt="2"></a></li>
<li><ahref="javascript:"><img src="img/3.jpg"alt="3"></a></li>
<li><ahref="javascript:"><img src="img/4.jpg"alt="4"></a></li>
<li><ahref="javascript:"><img src="img/5.jpg"alt="5"></a></li>
</ul>
</div>
</body>
</html>
前端很注重作用域的精准性，这里我就不考虑了，主要在于轮播的思想。
先说下轮播的实现原理：（实际上是有很多种，我说下比较简单的一种）
All：轮播就犹如一张在移动的很长的山水画，这张山水画被放在地板下，地板开了个刚好容纳一张图大小的窗口，每次这张山水画挪动每张小图的大小。这样每次就露出刚好一张图的外观。
用到的技术点：1、绝对定位。2、定时器+位移增减。3、overflow：hidden。（这个可以理解为刚刚的地板开窗）。4、其他小知识点（待会说）
其实轮播图整体上就由我说的那样，没什么很特别的，注意下涉及到运动，坐标点，绝对定位就比较重要了，当然目前我的认知水平到这里，大神们有不同见解请多指教！
具体的代码如下，解释也在其中：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
/**{margin:0;padding:0}：初学经常遇到这种方法，不推荐，这样意思不管你用不用这个标签，它都帮你初始化，浪费浏览器资源*/
div,ul,li,img,a,span{margin:0;padding:0}
.lunBo{margin:100pxauto;position:relative;border-radius:15px;overflow:hidden}
.lunBo,.lunBo ul li,.lunBo ul liimg{width:400px;height:250px;}
.lunBoul{height:250px;position:absolute;}
.lunBo ulli{float:left;list-style:none;}
/*鼠标按钮*/
.other{position:absolute;top:110px;width:100%;display:none;}
.other .direction{height:30px;}
.other .directiona{width:30px;font:30px bold 宋体;color:black;background:lightblue;line-height:30px;border-radius:15px;text-align:center;text-decoration:none;cursor:pointer;z-index:15;position:relative;}
.left{float:left;}
.right{float:right}
/*小圆点*/
.other .point{width:100px;margin:90pxauto 0;}
span{width:10px;height:10px;border-radius:5px;background:#333;cursor:pointer;float:left;margin:05px;position:relative;z-index:15;}
.yellow{background:yellow;}
</style>
<script>
window.onload=function(){
function lunBo(){
varoDiv=document.getElementById('LunBo');
varoOther=document.getElementById('Other');
varoUl=oDiv.getElementsByTagName('ul')[0];
var oLi=oUl.getElementsByTagName('li');
var oPoint =oDiv.getElementsByTagName('span');
var time=0;
varspeed=-oLi[0].offsetWidth; //这是每次移动的距离为li的宽度，也就是图片的宽度
oUl.style.width=oLi[0].offsetWidth*oLi.length+"px";//设置Ul的宽度
/*基础实现部分*/
function move() {
oUl.style.left =oUl.offsetLeft + speed + 'px';//这句就是刚刚的关键点，位移增减，需注意要设置成绝对定位，offsetLeft才有效
//同时这个绝对定位对网站的排布影响是比较大的，尽量让其的影响范围缩小，最简单的办法就是在其最接近的父元素设置成relative，也就是相对定位
if (oUl.offsetLeft <=-oLi[0].offsetWidth * oLi.length)
{
oUl.style.left ='0'; //这个判断呢是当山水画移到最左端时，让它回到原点，并继续循环移动
}
if(oUl.offsetLeft>=oLi[0].offsetWidth){ //这个也一样，方向是Ul往右移动到最后一张图时，又重新回到原点
oUl.style.left=-oLi[0].offsetWidth * (oLi.length-1)+'px';
}
point();
}
/*setInterval(move,1000)：这个是循环定时器，它会每隔1000ms调用move函数*/
time=setInterval(move,1000);
//鼠标移入移出事件：很简单，我要让当鼠标移入时轮播图暂停，就先清除定时器，移出时重新打开即可
oDiv.onmouseover = function(){clearInterval(time);oOther.style.display='block';};
oDiv.onmouseout=function(){time=setInterval(move,1000);oOther.style.display='none'};
/*小圆点跟随变动：这个是必须的，无论是自动播放，左右切图还是点击小圆点，都会有变动，需要封装成一个子函数*/
function point(){
varflag=-oUl.offsetLeft/oLi[0].offsetWidth;
for (var i = 0; i <oPoint.length; i++) {
oPoint[i].className ='';
//全部小圆点清除颜色，因为你事先并不知道有多少个有色，多少个无色，宁可错杀一千，绝不放过一个
}
oPoint[flag].className ='yellow';//选中的小圆点加黄色背景
}
/*左右单击切换图片*/
varoDiv1=document.getElementById('Other');
varoA=oDiv1.getElementsByTagName('a');
oA[0].onclick=function(){//这里两个oA其实是左右键，
speed=oLi[0].offsetWidth;//前面是+speed,向左移为什么速度是正的？想一想？
setTimeout(move,0);//很简单，我们点击向左，实际上是想把当前图左边的一张图显示出来
point();//因而Ul实际上是向右移动，所以速度为正
};
oA[1].onclick=function(){
speed=-oLi[0].offsetWidth; //反之也一样
setTimeout(move,0);
point();
};
/*单击小圆点切换对应图片*/
for (var i = 0; i <oPoint.length; i++) {
oPoint[i].index = i;
oPoint[i].onclick =function () {
for (var i = 0; i <oPoint.length; i++) {
oPoint[i].className= '';
}
this.className ='yellow';
oUl.style.left =-oLi[0].offsetWidth * this.index + 'px';
}
}
}
lunBo();
}
</script>
</head>
<body>
<divclass="lunBo" id="LunBo">
<div class="other"id="Other">
<div class="direction">
<a href="javascript:;"class="left"><</a>
<a href="javascript:;"class="right">></a>
</div>
<div class="point">
<spanclass="yellow"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<ul>
<li><ahref="javascript:"><img src="img/1.jpg"alt="1"></a></li>
<li><ahref="javascript:"><img src="img/2.jpg"alt="2"></a></li>
<li><ahref="javascript:"><img src="img/3.jpg"alt="3"></a></li>
<li><ahref="javascript:"><img src="img/4.jpg"alt="4"></a></li>
<li><ahref="javascript:"><img src="img/5.jpg"alt="5"></a></li>
</ul>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 图片轮播系列1-旋转木马(使用JS原生数组方式实现)
- 原生js实现移动端触摸轮播
- Js原生实现轮播图
- 原生js图片轮播效果实现代码
- 原生js实现轮播
- 原生js实现图片轮播特效
- 原生JS实现"旋转木马"效果的图片轮播插件
- 原生js实现图片层叠轮播切换效果
- jQuery与原生js实现banner轮播图
- 原生JS实现焦点轮播图 完整代码
- 原生js和jQuery实现淡入淡出轮播效果
- 纯css,js原生，js原型，jquery四种方式实现轮播图效果
- 原生JS实现移动端web轮播图详解（结合Tween算法造轮子）
- 原生js轮播图的实现
- 原生js实现图片轮播特效
- 原生JS实现图片轮播效果
- JS原生实现图片轮播切换效果
- js原生代码实现轮播图的实例讲解
- 实现图片首尾平滑轮播(JS原生方法―节流)