制作轮播图所需知识：

  1. CSS基本知识
  2. JS中的DOM操作的相关知识
  3. 定时器的相关知识

相关代码如下：

  1. CSS代码：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    /*取消浏览器默认样式*/
    *{
        margin: 0;
        padding: 0;
    }
    body{
        background-color:#fff;;
    }
    /*设置container样式*/
    #container{
        /*设置宽和高，根据自己的图片的宽高所设置*/
        width: 520px;
        height: 333px;
        /*居中*/
        margin: 80px auto;
        background-color:greenyellow;
        padding: 10px 0;
        position: relative;
        overflow: hidden;
    }
    #pic{
        /*去除项目符号*/
        list-style: none;
        /*设置ul宽度，使图片有足够的控件使之横着放置*/
        /*开启绝对定位*/
        position: absolute;
    }
    #pic li{
        float: left;
        /*设置外边距*/
        margin: 0 10px;
    }
    #navDiv{
        position: absolute;
        bottom: 15px;
    }
    #navDiv a{
        float: left;
        width: 20px;
        height: 20px;
        background-color:red;
        margin: 0 6px;
        opacity: 0.7;
        /*兼容IE8透明*/
        filter: alpha(opacity=70);
    }
    /*设置鼠标移入的效果*/
    #navDiv a:hover{
        background-color:black;
    }
  2. JS和HTML相关代码：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>轮转图</title>
        <link rel="stylesheet" href="css/轮播图.css">
        <script src="js/tools.js"></script>
        <script>
            window.onload = function(){
                var pic = document.getElementById("pic");
                /*获取页面中所有的图片*/
                var imgArr = document.getElementsByTagName("img");
                /*设置pic的宽度,使之能够自动根据图片的多少调整宽度*/
                pic.style.width = 520 * imgArr.length + "px";
                //设置导航按钮居中
                var navDiv = document.getElementById("navDiv");
                var container = document.getElementById("container");
                //设置navDiv的left值
                navDiv.style.left = (container.offsetWidth - navDiv.offsetWidth) / 2 + "px";
                //获取所有的a
                var allA = document.getElementsByTagName("a");
                //设置默认图片为第一张
                var index = 0;
                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;
                        // pic.style.left = -520*index + "px";
                        setA();
                        /*使用move函数*/
                        move( pic ,"left", -520*index , 20 , function(){
                            //动画执行完毕，开启自动切换
                            exchange();
                        });
                    }
                }
                //自动切换图片
                exchange();
                var timer;
                //创建一个函数，看是否启动自动切换图片
                function exchange(){
                    //开启一个定时器，用于自动切换图片
                    timer = setInterval(function(){
                        index++;
                        index %= imgArr.length; 
                        //执行动画，切换图片
                        move( pic ,"left", -520*index , 20 , function(){
                            //设置导航按钮
                            setA();
                        });
                    },3000);
                }

                //创建一个方法，用来选中a
                function setA(){
                    //判断当前索引是否是最后一张
                    if(index >= imgArr.length-1){
                        index = 0;
                        pic.style.left = 0;
                    }
                    for(var i=0; i<allA.length; i++){
                        allA[i].style.backgroundColor = "";
                    }
                    allA[index].style.backgroundColor = "black";
                }
            };
        </script>
    </head>
    <body>
        <!--创建一个容器-->
        <div id="container">
            <!--创建一个ul用于放置图片-->
            <ul id="pic">
                <li><img src="img/picture/1.jpg" alt=""></li>
                <li><img src="img/picture/2.jpg" alt=""></li>
                <li><img src="img/picture/3.jpg" alt=""></li>
                <li><img src="img/picture/4.jpg" alt=""></li>
                <li><img src="img/picture/5.jpg" alt=""></li>
                <li><img src="img/picture/1.jpg" alt=""></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>
  3. JS包中的代码：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    //尝试创建一个可以执行简单动画的函数
    /*
     * 参数：
     * 	obj:要执行动画的对象
     * 	attr:要执行动画的样式，比如：left top width height
     * 	target:执行动画的目标位置
     * 	speed:移动的速度(正数向右移动，负数向左移动)
     *  callback:回调函数，这个函数将会在动画执行完毕以后执行
     */
    function move(obj, attr, target, speed, callback) {
    	//关闭上一个定时器
    	clearInterval(obj.timer);

    	//获取元素目前的位置
    	var current = parseInt(getStyle(obj, attr));

    	//判断速度的正负值
    	//如果从0 向 800移动，则speed为正
    	//如果从800向0移动，则speed为负
    	if(current > target) {
    		//此时速度应为负值
    		speed = -speed;
    	}

    	//开启一个定时器，用来执行动画效果
    	//向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识
    	obj.timer = setInterval(function() {

    		//获取box1的原来的left值
    		var oldValue = parseInt(getStyle(obj, attr));

    		//在旧值的基础上增加
    		var newValue = oldValue + speed;

    		//判断newValue是否大于800
    		//从800 向 0移动
    		//向左移动时，需要判断newValue是否小于target
    		//向右移动时，需要判断newValue是否大于target
    		if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
    			newValue = target;
    		}

    		//将新值设置给box1
    		obj.style[attr] = newValue + "px";

    		//当元素移动到0px时，使其停止执行动画
    		if(newValue == target) {
    			//达到目标，关闭定时器
    			clearInterval(obj.timer);
    			//动画执行完毕，调用回调函数
    			callback && callback();
    		}

    	}, 30);
    }

    /*
     * 定义一个函数，用来获取指定元素的当前的样式
     * 参数：
     * 		obj 要获取样式的元素
     * 		name 要获取的样式名
     */
    function getStyle(obj, name) {

    	if(window.getComputedStyle) {
    		//正常浏览器的方式，具有getComputedStyle()方法
    		return getComputedStyle(obj, null)[name];
    	} else {
    		//IE8的方式，没有getComputedStyle()方法
    		return obj.currentStyle[name];
    	}

    }

    最终动图效果

本文代码来自于李立超老师前端课程，本人在学习时所记，如有侵权，请联系我删除