轮播图

js

<script>
    //控制上/下一张
    var imgs=['img/02.jpg','img/03.jpg','img/04.jpg','img/05.jpg','img/06.jpg','img/07.jpg']//这组数据后期应来自数据库
    var index=0
    function nextImg(num){
        var v_myImgObj=document.getElementById("myImg")
        index+=num;
        if(index>=imgs.length){
            index=0;
        }else if(num<0){
            index=imgs.length-1;
        }
        v_myImgObj.src=imgs;
    }
</script>

html

<img src="img/02.jpg" id="myImg" onmouseover="stop()" onmouseout="start()">
<br>
<input type="button" value="上一张" onclick="nextImg(-1)">
<span id="mySpan"></span>
<input type="button" value="上一张" onclick="nextImg(1)">

js

<script>
//自动间隔时间启动
var intervalId=window.setInterval("nextImg(1)",3000)
function stop(){
    window.clearInterval(intervalId)
}
function start(){
    intervalId=window.setInterval("nextImg(1)",3000)
}
//数字圆点部分
function setImg(num){
    index=num
    nextImg(0)
    stop()
    start()//停止再重启，还可防止下次切换图片时<3s
}
var v_mySpanObj=document.getElementById("mySpan")
for(var i=1;i<=img.length;i++){
    v_mySpanObj.innerHTML+='<a href="javascript:void(0)" onmousemove="setImg('+(i-1)+')">'+i+'</a>&nbsp;&nbsp;'
}
</script>