制作网站图片自动轮播功能

1. 创建HTML结构

2. 添加CSS样式

#slider {
    width: 600px;
    height: 400px;
    position: relative;
    border: 3px solid #333;
    overflow: hidden;
    margin: 0 auto;
}
#list {
    width: 4200px;
    height: 400px;
    position: absolute;
    z-index: 1;
}
#list img {
    float: left;
}
#buttons {
    position: absolute;
    height: 10px;
    width: 100px;
    z-index: 2;
    bottom: 20px;
    left: 250px;
}
#buttons span {
    cursor: pointer;
    float: left;
    border: 1px solid #fff;
    background-color: rgba;
    margin: 0 5px;
}
#buttons span:hover {
    background-color: rgba;
}
    

3. 编写JavaScript代码

$.ready {
    var imgWidth = $.width;
    var imgCount = $.length;
    var currentIndex = 0;
    function updateSlider {
        $.animate({
            left: -currentIndex * imgWidth
        }, 500);
    }
    $.click {
        var index = $.index;
        currentIndex = index;
        updateSlider;
    });
    setInterval {
        currentIndex =  % imgCount;
        updateSlider;
    }, 3000);
});
    

4. 引入必要的库