自动播放-幻灯片效果

轮播图

    

        

        

        

        

        

    
    

        1
        2
        3
        4
        5
    

图片与右下角的数字可以根据索引对应

css

body {
            background-color: #000;
        }
        .container {
            position: relative;
            width: 400px;
            height: 200px;
            margin: 0 auto;
            border: 5px solid #fff;
            border-radius: 3px;
        }
        ul {
            position: relative;
            width: 400px;
            height: 200px;
            margin:0;
            padding: 0;
        }
        li {
            position: absolute;
            display: none;
        }
        img {
            width: 400px;
            height: 200px;
        }
        .num {
            position: absolute;
            bottom: 1px;
            right: 1px;
        }
        .num span {
            display: inline-block;
            width: 20px;
            height: 20px;
            line-height: 20px;
            border-radius: 50%;
            color: #fff;
            font-size: 14px;
            background-color: #d58512;
            text-align: center;
        }

JS部分

var img = document.getElementById('slider').getElementsByTagName('li');
    var num = document.getElementById('num').getElementsByTagName('span');
    img[0].style.display = 'block';
    num[0].style.backgroundColor = 'orange';
    var index = 1;
    setInterval(function () {
        num_bg();
        if (index > 4) index = 0;
        img[index].style.display = 'block';
        num[index].style.backgroundColor = 'orange';
        index++;
    }, 2000);

    function sli(obj) {
        index = parseInt(obj.innerText) - 1;
        num_bg();
        img[index].style.display = 'block';
        num[index].style.backgroundColor = 'orange';
    }
    function num_bg() {
        for (var i=0; i

window.onload = func(){}可以保证js在页面加载完成后执行,也可以把js代码放在页面后实现.
每一次移动时改变图片和右下角数字的背景颜色,在css中设置图片的display:none, 数字的背景色为统一的颜色,js初始化时先将第一个图片设置为display:block并改变第一个数字的背景色,之后再for循环

因为图片是自动改变,所以setInterval必不可少, setInterval属于window的对象方法
当鼠标滑动到不同数字时, 自动轮播图片的索引也需要改变, 所以将索引index设为全局变量
获取每一个轮播元素,通过for循环, 设置所有图片display:none, 数字背景色为黄色, 设置当前索引display:block, 数字背景色为橘色, 鼠标移动到其他数字时,再根据索引改变

setInterval() 方法重复调用一个函数或执行一个代码段，在每次调用之间具有固定的时间延迟。返回一个intervalID
语法: let intervalID = window.setInterval(func, delay);

• intervalID是此重复操作的唯一辨识符,可作为参数传递给clearInterval
• func是想要重复操作的函数
• delay是每次延迟的毫秒数

li {
  position: absolute;
  /*display: none;*/
  opacity: 0;
  filter: alpha(opacity=0);
}
li.current {
  opacity: 1;
  filter: alpha(opacity=100);
}
.num span.current {
   color: #fff;
   opacity: 1;
   filter: alpha(opacity=100);
   background: #f60;
}

opacity 不透明度, 有继承属性,也就是说设置opacity的元素, 其子元素也全部有opacity这个属性, 也理解了为什么之前在改变元素背景颜色并且设置了opacity时, 文本颜色的透明度也发生了改变
父元素设置opacity, 子元素也设置opacity, 子元素的opacity=父opacity*子opacity
rgba 没有继承属性
filter兼容IE8以及低版的IE浏览器，是IE特有的，filter:Alpha(opacity=50)，也有继承属性

切换按钮改变索引就可以

淡入淡出

function show(a) {
        idx = a;
        var alpha=0;
        //num[idx].classname = 'current';
        clearInterval(timer);
        timer = setInterval(function () {

            alpha += 2;
            alpha > 100 && (alpha=100);
            img[idx].style.opacity = alpha / 100;
            console.log(alpha/100);
            img[idx].style.filter = "alpha(opacity="+alpha+")";
            alpha == 100 && clearInterval(timer);
        }, 20);
    }

把元素的背景色设置为#fff, 在css中设置元素的opacity为0, 在每一个图片转换期间, 不断改变元素的alpha值,并在alpha的值等于100时清除定时器

自动改变方向

定义一个变量flag, flag为true, index++ , flag为false, index--, 并在索引为两边的界点时改变flag为相反值