很多很多网站经常会用到一个特效，那就是轮播图，对于日新月异的前端技术来说其实就是一个框架一个接口的事，但轮播的原理是什么？用最原始的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. 【翻译】对于Ext JS 5，你准备好了吗？

    原文:Are You Ready for Ext JS 5? Ext JS 5:准备升级 对于Ext JS 5加入Sencha的大家庭,我们感到非常高兴!作为一个主要版本,在Ext JS 5引入了一堆 ...

  2. JavaScript进阶(三)常见工具(校验、通用)

    JS常见工具(校验.通用) // 姓名校验 var checkName = function(name) { // 收货人姓名校验(准则:姓名为2-4汉字) var regu = /^[\u4E00- ...

  3. 网站开发进阶(二十四)HTML颜色代码表

    HTML颜色代码表 设置背景色:style='background-color:red' 设置字体颜色:style='color:red' 生活在于学习,知识在于积累.

  4. mysql进阶(七)limit的用法

    limit是mysql的语法 select * from table limit m,n 其中m是指记录开始的index,从0开始,表示第一条记录 n是指从第m+1条开始,取n条. select *  ...

  5. Android电话拦截实现以及TelephonyManager监听的取消

    由于毕业设计题目涉及到电话拦截这一块.所以鼓捣了一下.遇到了一些问题,总结一下,以免忘记,也希望能帮助其他新人们. 本篇博客目的:实现电话的拦截 会遇到的问题:android studio下AIDL的 ...

  6. OS X升级到10.11后Xcode6.4界面无iOS device选择栏的解决办法

    原来在Xcode6.4项目运行按钮右侧会有一个可以选择设备或模拟器的选择栏,但是升级后没有了.但是Xcode7.0.1打开同样的项目会有显示. 简单找了一下无果后,发现咋Xcode顶部菜单里可以找到切 ...

  7. 如何用代码禁用SpriteBuilder中创建的关节

    这个目标是临时的禁用距离关节(distance joint). 不幸的是,你只可以无效化(通过删除的方式)一个关节. 所以,你必须通过代码创建一个新的距离关节实例并且赋予它之前删除关节(在Sprite ...

  8. NumberProgressBar开源项目学习

    1.概述 多看多学涨姿势, github真是个宝库 这个项目主要是实现数字进度条效果 github地址在https://github.com/daimajia/NumberProgressBar 感谢 ...

  9. HDFS APPEND性能测试

    hbase在写入数据之前会先写hlog,hlog目前是sequencefile格式,采用append的方式往里追加数据.之前团队的同学测试关闭hlog会一定程序上提升写hbase的稳定性.而在我之前的 ...

  10. LeetCode之旅（15）-Odd Even Linked List

    题目描述: Given a singly linked list, group all odd nodes together followed by the even nodes. Please no ...