很多很多网站经常会用到一个特效,那就是轮播图,对于日新月异的前端技术来说其实就是一个框架一个接口的事,但轮播的原理是什么?用最原始的javascript来写又是怎样的呢?本人是一枚菜鸟,这篇文章就当做自己的学习笔记吧,觉得有益处的也可以留着或去demo看看。(后续也会陆续更新一些学习笔记及demo)
前端很注重作用域的精准性,这里我就不考虑了,主要在于轮播的思想。

先说下轮播的实现原理:(实际上是有很多种,我说下比较简单的一种)
All:轮播就犹如一张在移动的很长的山水画,这张山水画被放在地板下,地板开了个刚好容纳一张图大小的窗口,每次这张山水画挪动每张小图的大小。这样每次就露出刚好一张图的外观。

用到的技术点:1、绝对定位。2、定时器+位移增减。3、overflow:hidden。(这个可以理解为刚刚的地板开窗)。4、其他小知识点(待会说)

其实轮播图整体上就由我说的那样,没什么很特别的,注意下涉及到运动,坐标点,绝对定位就比较重要了,当然目前我的认知水平到这里,大神们有不同见解请多指教!

具体的代码如下,解释也在其中:

<!DOCTYPE html>
<html lang="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:100px auto;position:relative;border-radius:15px;overflow:hidden}
.lunBo,.lunBo ul li,.lunBo ul li img{width:400px;height:250px;}
.lunBo ul{height:250px;position:absolute;}
.lunBo ul li{float:left;list-style:none;}
/*鼠标按钮*/
.other{position:absolute;top:110px;width:100%;display:none;}
.other .direction{height:30px;}
.other .direction a{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:90px auto 0;}
span{width:10px;height:10px;border-radius:5px;background:#333;cursor:pointer;float:left;margin:0 5px;position:relative;z-index:15;}
.yellow{background:yellow;}
</style>
<script>
window.onload=function(){
function lunBo(){
var oDiv=document.getElementById('LunBo');
var oOther=document.getElementById('Other');
var oUl=oDiv.getElementsByTagName('ul')[0];
var oLi=oUl.getElementsByTagName('li');
var oPoint = oDiv.getElementsByTagName('span');
var time=0;
var speed=-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(){
var flag=-oUl.offsetLeft/oLi[0].offsetWidth;
for (var i = 0; i < oPoint.length; i++) {
oPoint[i].className = '';
//全部小圆点清除颜色,因为你事先并不知道有多少个有色,多少个无色,宁可错杀一千,绝不放过一个
}
oPoint[flag].className = 'yellow';//选中的小圆点加黄色背景
} /*左右单击切换图片*/
var oDiv1=document.getElementById('Other');
var oA=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>
<div class="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">
<span class="yellow"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<ul>
<li><a href="javascript:"><img src="img/1.jpg" alt="1"></a></li>
<li><a href="javascript:"><img src="img/2.jpg" alt="2"></a></li>
<li><a href="javascript:"><img src="img/3.jpg" alt="3"></a></li>
<li><a href="javascript:"><img src="img/4.jpg" alt="4"></a></li>
<li><a href="javascript:"><img src="img/5.jpg" alt="5"></a></li>
</ul>
</div>
</body>
</html>

  

2、原生js实现轮播图特效的更多相关文章

  1. 使用原生js将轮播图组件化

    代码地址如下:http://www.demodashi.com/demo/11316.html   这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explor ...

  2. 原生js焦点轮播图

    原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...

  3. 原生js实现轮播图

    原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...

  4. 封装一个简单的原生js焦点轮播图插件

    轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...

  5. 原生JS实现轮播图的效果

    原生JS实现轮播图的效果: 只要缕清了全局变量index的作用,这个轮播图也就比较容易实现了:另外,为了实现轮这个效果,有几处clearInterval()必须写上.废话不多说,直接上代码,修复了几个 ...

  6. 用原生js封装轮播图

    原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不 ...

  7. 原生js焦点轮播图的实现

    继续学习打卡,武汉加油,逆战必胜!今日咱们主要探讨一下原生js写轮播图的问题, 简单解析一下思路: 1,首先写好css样式问题 2,考虑全局变量:自动播放的定时器,以及记录图片位置的角标Index 2 ...

  8. 原生js封装轮播图

    个人实际开发中用到的效果问题总结出来便于自己以后开发查看调用,如果也适用其他人请随意拿走勿喷就行! 原生js对于思路要求比较高,在js代码我都写有备注,足够理解并使用,即使是小白或者刚入行的程序员也比 ...

  9. 原生JS设计轮播图

    一.效果预览: 由于只能上传2M以下的图片,这里只截取了自动切换的效果: 二.编写语言 HTML.CSS.原生JS 三.编写思路 (一)HTML部分 1..slide意为滑槽,里面存放所有图片: 2. ...

随机推荐

  1. 内连接、左外连接、右外连接、全外连接、交叉连接(CROSS JOIN)-----小知识解决大数据攻略

    早就听说了内连接与外连接,以前视图中使用过.这次自考也学习了,只是简单理解,现在深入探究学习(由于上篇博客的出现)与实践: 概念 关键字: 左右连接 数据表的连接有: 1.内连接(自然连接): 只有两 ...

  2. 限制UITextField的输入字数(长度)最正确的方法

    在开发中, 有些时候会碰到这样的需求: 希望输入框有最大字数限制. 比如, 用户昵称长度限制, 评论最大字数限制.所以通过相关测试和浏览文章,使用下面的方法可以基本解决问题. 在viewDidLoad ...

  3. (三十)PickerView文字和随机数的使用

    PickerView用于展示供选择的内容(例如日期选取.点菜等). 有三种情况: 1.每一列都是独立的选取 2.右边的列受到左边列的影响 3.包含图片 PickerView和TableView类似,通 ...

  4. cuda中模板的使用

    模板是C++的一个重要特征,它可以让我们简化代码,同时使代码更整洁.CUDA中也支持模板,这给我们编写cuda程序带来了方便.不过cuda4.0之前和之后使用模板的方法不一样,这给我们带来了少许困难. ...

  5. Android群英传笔记——第十二章:Android5.X 新特性详解,Material Design UI的新体验

    Android群英传笔记--第十二章:Android5.X 新特性详解,Material Design UI的新体验 第十一章为什么不写,因为我很早之前就已经写过了,有需要的可以去看 Android高 ...

  6. hadoop学习大纲

  7. Struts2技术内幕 读书笔记一 框架的本质

    本读书笔记系列,主要针对陆舟所著<<Struts2技术内幕 深入解析Strtus2架构设计与实现原理>>一书.笔记中所用的图片若无特殊说明,就都取自书中,特此声明. 什么是框架 ...

  8. objc一个NetConnector类示例

    NetConnector是自定义的一个类,该类使用代理的方法实现异步下载特定url页面的内容. HyNetConnector.h // // HyNetConnector.h // HyNetConn ...

  9. unity C#更改系统默认鼠标指针

    最近项目需要替换鼠标的默认图标,实现的效果是初始状态为一种图标,点击鼠标左键要换成另一种图标,按网上通用的方法做了以后,隐藏鼠标指针,在指针的位置画一个图片就可以了,但不知道怎么回事,这种方法画的图标 ...

  10. SharePoint 解决方案手动打包简单介绍

    介绍:在使用SharePoint中,我们经常需要做的就是打包解决方案,我们来介绍下SharePoint解决方案的手动部署,我自己觉得,解决方案是SharePoint中非常好的一个功能,部署和使用起来相 ...