图片轮播（基础）

案例一 横轴滚动

1.实现效果

2. 知识点：

1. 图片之间默认有缝隙，给左浮动float:left清除缝隙
2. 设置计时器和清除计时器没有强制要求使用同样名称只是为了规范代码
3. scrollleft默认值为0，且值不带单位是纯数字值
4. 清除滚动：一圈结束后，最后一张图片到第一张图片会有抖动，可以增加一个相同内容的div或者增加可视区域图片数量的相同图片（原理相同）

1） 可视区域为三张图片

2） 再增加一个相同的div,更保险一些的做法

3.设计思路：

1. 利用滚动轴，当滚动轴移动到最左边，即a.scrollLeft <= 0时，跳到第二部分图开始的位置，因为速度很快且两组图可视区域显示的内容相同所以看不到切换的效果，则实现了无缝滚动
2. 一般把定时器里的延长时间设置为变量speed来控制切换速度
3. 为了方便添加鼠标进入和离开时间，今后在设置计时器时可以直接赋给变量timer,timer要先清空等于null,并封装在函数show()中方便重新启动计时器，如下

  a.onmouseenter = function () {/*鼠标进入事件*/
        clearInterval(time);/*清除计时器*/
    }
    a.onmouseleave = function () {/*鼠标离开事件*/
        show();/*重新启动*/
    }

变量声明

    var a = document.getElementsByClassName("a")[0];
    var b = document.getElementsByClassName("b")[0];
    var c = document.getElementsByClassName("c")[0];
    c.innerHTML = b.innerHTML;
    var speed = 30;//每一百毫秒向左移动的距离
    var time;

计时器

 show();
    function show() {
        time = setInterval(function () {
            a.scrollLeft -= speed;
            if (a.scrollLeft <= 0) {
                a.scrollLeft = 1200;
            }
        }, 100)
    }

4.cursor的各种常用鼠标属性效果


补充：not allowed为禁用图标

案例二：简单轮播

1.功能及实现步骤

1. 自动轮播
2. 下方的点跟图片对应
3. 左右按钮可切换图片并对应点的效果

2.实现效果

3.设计思路

1. 内函数取不到for里面的i值，要用索引记录btn[i].index = i;
2. 动态的给点添加颜色，定义变量num，num++实现点的效果，大于4时赋值1
3. 轮播效果通过动态修改图片路径实现，添加的图片刚好与num值对应，所以实现了点和图片的对应
4. 按钮功能主要实现点和图片对应，利用num值，重新添加图片路径和对应点（索引为num-1）变色，即再次调用上面的方法
5. 清除之前的点变色使用for循环将所有点的颜色取消

变量声明

    var a = document.getElementsByClassName("a")[0];
    var imglist = document.getElementsByClassName("imglist")[0];
    var point = document.getElementsByClassName("point")[0].children;
    var btn = document.getElementsByClassName("btn")[0].children;


    var num = 1;
    var speed = 1000;
    var time = null;
    point[0].style.backgroundColor = "red";

点的功能

show();
    function show() {
        time = setInterval(function () {
            num++;
            for (var i = 0; i < point.length; i++) {
                point[i].style.backgroundColor = "";
            }

            if (num > 4) {
                num = 1;
            }
            point[num - 1].style.backgroundColor = "red";
            imglist.src = "./img/" + num + ".jpg";
        }, speed)
    }

鼠标进入和离开

    a.onmouseenter = function () {
        clearInterval(time);
    }
    a.onmouseleave = function () {
        show();
    }

左右按钮效果——注意索引获取

  /* 不能直接取到for循环中的i值*/
    for (var i = 0; i < btn.length; i++) {
        btn[i].index = i;
        btn[i].onclick = function () {
            if (this.index == 1) {/*i=1为右按钮*/
                num++;
                if (num > 4) {
                    num = 1;
                }
            }
            else {
                num--;
                if (num < 1) {
                    num = 4;
                }
            }
            imglist.src = "./img/" + num + ".jpg";
            for (var i = 0; i < point.length; i++) {
                point[i].style.backgroundColor = "";
            }
            point[num - 1].style.backgroundColor = "red";
        }
    }