【jquery】jQuery实现轮播图

效果图

HTML

<body>
    <div class="scroll">
        <div id="num">
            <a href="javascript:;">1</a>
            <a href="javascript:;">2</a>
            <a href="javascript:;">3</a>
            <a href="javascript:;">4</a>
            <a href="javascript:;">5</a>
        </div>
        <img src="img/伽罗.jpg" id="photo" width="800px" />
    </div>
</body>

CSS

* {
    margin: 0;
    padding: 0;
}

/* 让图片不要基于文字基线对齐 */
img {
    border: 0;
    vertical-align: middle;
}

a {
    text-decoration: none;
    color: #000000;
}
/**
* 整体水平居中
* 相对定位：小圆点绝对定位需要
* 还要给盒子一个宽度
*/
.scroll {
    position: relative;
    /* 宽度等于最大图片的宽度 */
    width: 800px;
    margin: 50% auto;
}

#num {
    position: absolute;
    bottom: 10px;
    right: 15px;
}

#num a {
    overflow: hidden;
    display: inline-block;
    width: 20px;
    height: 20px;
    font-size: 0.75rem; /*12px*/
    text-align: center;
    line-height: 20px;
    color: #ffffff;
    border: 1px solid #f5f5f5;
    border-radius: 50%;
}

JQUERY

$(function() {
    setInterval("changeImg()", 1500);
});
var index = 0;
function changeImg() {
    var imgarr = [
        'img/伽罗.jpg',
        'img/高渐离.jpg',
        'img/公孙离.jpg', 
        'img/宫本武藏.jpg', 
        'img/干将莫邪.jpg'
    ];
    var photo = $("#photo");
    var a = $("#num a");
    //清除未选中项的聚焦点背景色
    a[index].style.backgroundColor = "";
    // 根据余数改变图片索引
    // 1    4   1
    // 2    4   2
    // 3    4   3
    // 4    4   0
    index = (index + 1) % imgarr.length;
    //将索引对应图片取出并赋值给img的src属性,替换当前图片（即要显示的下一张图片）
    photo.attr("src", imgarr[index]);
    //设置选中的聚焦点背景颜色
    a[index].style.backgroundColor = "pink";
}

小结

　　1.后续将要完成点击小圆点跳转到相应图片

　　2.后续为轮播图添加上/下轮播图切换图标并实现