JS实现轮播图

基本原理

lunb.png

1.HTML

outer父容器存放所有内容,子容器imglist存放轮播的图片,子容器navDiv存放显示当前图片的标码。

<div id="outer">
    <ul id="imglist">
        <li><img src="img/1.jpg"/></li>
        <li><img src="img/2.jpg"/</li>
        <li><img src="img/3.jpg"/></li>
        <li><img src="img/4.jpg"/></li>
        <li><img src="img/5.jpg"/></li>
        <li><img src="img/1.jpg"/></li>//用于轮播切换最后一张到第一张时不显得僵硬
    </ul>
    <div id="navDiv">
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
    </div>
</div>

2.CSS样式

<style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #outer{
            width: 650px;//我用的图片是640*640的，因为li之间有5px外边距，所以outer设为650px
            height: 640px;
            margin:  20px auto;
            padding: 5px 0;
            background-color: greenyellow;
            position: relative;
            overflow: hidden;//隐藏outer以外的图片
        }
        #imglist{
            list-style: none;
            position: absolute;
            width: 3900px;//六张图片，所以总长度为650*6px
            left: 0px;/*想使图片轮播起来，就修改imglist的left属性*/
        }
        #imglist li{
            float: left;
            margin: 0 5px;
        }
        #navDiv{
            position: absolute;
            bottom: 20px;
        }
        #navDiv a{
            float: left;
            width: 25px;
            height: 25px;
            background: red;
            margin: 0 10px;
            opacity: 0.5;
            filter: alpha(opacity=50);/*兼容ie8*/
        }
        #navDiv a:hover{
            background-color: #000000;      
        }
    </style>

HTML和CSS写完后效果图如下:

2.png

我们会发现下面小方格不在中间，显得不好看，并且imglist没有设置宽度，后续用js修改。
3.JS
获取所有要用的文档对象

var imglist = document.getElementById("imglist");
var imgArr = document.getElementsByTagName("img");
var allA = document.getElementsByTagName("a");
var navDiv = document.getElementById("navDiv");
var outer = document.getElementById("outer");

优化界面

//设置imglist宽度
imglist.style.width = imgArr.length*650+"px";
//使小格子居中
navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px";

实现轮播前，先写两个工具函数

//定义一个函数获取样式
function getStyle(obj , name){
    if(window.getComputedStyle){
        return getComputedStyle(obj,null)[name];
    }else{
        return obj.currentStyle[name];
    }
}

//定义一个动画移动效果函数
function move(obj, name, target, speed ,callback){
    //清除定时器 
    //clearInterval传入参数有意义则执行，没意义没用,但不会报错
    clearInterval(obj.timer);
    var current = parseInt(getStyle(obj,name));
    if(current > target){
        speed = -speed;//用于判断向左还是向右移动
    }
    //setInterval()返回一个定时器唯一标识,用于清除定时器
    obj.timer = setInterval(function(){
        var oldValue = parseInt(getStyle(obj,name));
        var newValue = oldValue + speed;
        //判断动画移动是否超过目标值 如果超过就将当前值变为目标值
        if((speed < 0 && newValue < target) || (speed > 0 &&newValue > target)){
            newValue = target;
        }
        obj.style[name] = newValue + "px";
        if(newValue == target){
            clearInterval(obj.timer);
            //如果不写在这个if里面 则每次执行都会调用回调函数
            //if如果执行 说明动画已经执行完毕
            callback && callback();
        }
    },speed);
}

默认从第一张开始轮播，下面小格子也需要同步，所有设置当显示第几张图片时，第几个小格子变黑

var index = 0;
allA[index].style.backgroundColor = "black";

为每个a绑定onclick事件,切换图片

for(var i = 0;i < allA.length; i++){
    allA[i].num = i;//定义一个属性，用于记录第几张图片
    allA[i].onclick = function(){
        clearInterval(timer);//清除定时器
        index = this.num;//获取当前是第几张图片
        setA();//一个使小方格变色的函数
        //实现动画移动效果
        move(imglist,"left",-650*index,5,function(){
        autoChange();//自动轮播函数
        });
    }
}

小方格跟随图片的切换跟随变色

function setA(){
    //判断是否为最后一张
    if(index >= imgArr.length-1){
        index = 0;
        imglist.style.left = 0 + "px";
    }
    for(var i = 0;i < allA.length; i++){
        //取消内联样式
        allA[i].style.backgroundColor = "";
    }
    allA[index].style.backgroundColor = "black";
}

自动轮播函数

//定义自动切换
var timer;
function autoChange(){
    //开启定时器 自动切换
    timer = setInterval(function(){
        index++;
        index %= imgArr.length;
        move(imglist,"left",-650*index,5,function(){
            setA();
        });
    },3000);
}
autoChange()

以上就是JS实现自动轮播的思路，仅供参考。
PS:第一次写博客，各方面都做得不好，思路写得不清晰，表述能力
欠缺，让大佬见笑了，也请各位大佬多给我一些宝贵的建议，我相信我会从您的建议中收获许多。
附完整代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>轮播图</title>
    </head>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #outer{
            width: 650px;
            height: 640px;
            margin:  20px auto;
            padding: 5px 0;
            background-color: greenyellow;
            position: relative;
            overflow: hidden;
        }
        #imglist{
            list-style: none;
            position: absolute;
            width: 3900px;
            left: 0px;
        }
        #imglist li{
            float: left;
            margin: 0 5px;/*想使图片轮播起来，就修改imglist的left属性*/
        }
        #navDiv{
            position: absolute;
            bottom: 20px;
        }
        #navDiv a{
            float: left;
            width: 25px;
            height: 25px;
            background: red;
            margin: 0 10px;
            opacity: 0.5;
            filter: alpha(opacity=50);/*兼容ie8*/
        }
        #navDiv a:hover{
            background-color: #000000;      
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            //定义一个函数获取样式
            function getStyle(obj , name){
                if(window.getComputedStyle){
                    return getComputedStyle(obj,null)[name];
                }else{
                    return obj.currentStyle[name];
                }
            }
            //定义一个动画移动效果函数
            function move(obj, name, target, speed ,callback){
                //清除定时器 
                //clearInterval传入参数有意义则执行，没意义没用
                clearInterval(obj.timer);
                var current = parseInt(getStyle(obj,name));
                if(current > target){
                    speed = -speed;
                }
                obj.timer = setInterval(function(){
                    var oldValue = parseInt(getStyle(obj,name));
                    var newValue = oldValue + speed;
                    //判断动画移动是否超过目标值 如果超过就将当前值变为目标值
                    if((speed < 0 && newValue < target) || (speed > 0 &&newValue > target)){
                        newValue = target;
                    }
                    obj.style[name] = newValue + "px";
                    if(newValue == target){
                        clearInterval(obj.timer);
                        //如果不写在这个if里面 则每次执行都会调用回调函数
                        //if如果执行 说明动画已经执行完毕
                        callback && callback();
                    }
                },speed);
            }
            //设置ul长度
            var imglist = document.getElementById("imglist");
            var imgArr = document.getElementsByTagName("img");
            var navDiv = document.getElementById("navDiv");
            var outer = document.getElementById("outer");
            var allA = document.getElementsByTagName("a");
            //设置imglist宽度
            imglist.style.width = imgArr.length*650+"px";
            //设置导航标签居中
            navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px";
            var index = 0;
            //遍历a绑定onclick事件
            allA[index].style.backgroundColor = "black";
            for(var i = 0;i < allA.length; i++){
                allA[i].num = i;//定义一个属性，用于记录第几个导航标签
                allA[i].onclick = function(){
                    clearInterval(timer);
                    index = this.num;
                    setA();
                    move(imglist,"left",-650*index,5,function(){
                        autoChange();
                    });
                }
            }
            //定义一个方法使标签导航变色
            function setA(){
                //判断是否为最后一张
                if(index >= imgArr.length-1){
                    index = 0;
                    imglist.style.left = 0 + "px";
                }
                for(var i = 0;i < allA.length; i++){
                    //取消内联样式
                    allA[i].style.backgroundColor = "";
                }
                allA[index].style.backgroundColor = "black";
            }
            //定义自动切换
            var timer;
            function autoChange(){
                //开启定时器 自动切换
                timer = setInterval(function(){
                    index++;
                    index %= imgArr.length;
                    move(imglist,"left",-650*index,5,function(){
                        setA();
                    });
                },3000);
            }
            autoChange();
        }
    </script>
    <body>
        <div id="outer">
            <ul id="imglist">
                <li><img src="img/1.jpg"/></li>
                <li><img src="img/2.jpg"/></li>
                <li><img src="img/3.jpg"/></li>
                <li><img src="img/4.jpg"/></li>
                <li><img src="img/5.jpg"/></li>
                <li><img src="img/1.jpg"/></li>
            </ul>
            <div id="navDiv">
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
            </div>
        </div>
    </body>
</html>