轮播图！！！！

佚名 7年前 (2019-04-17) 随笔 1661人围观抢沙发百度已收录

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript">
    var arr=null;
    var tp=null;
    var index=0;
    //当页面加载完成以后执行
    window.onload=function(){
        //定义一个数组装有图片地址
        arr=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"];
        //获取img元素
        tp=document.getElementById("tp");
        start();
    }
    function change(obj){
        //获取用户点的是哪个按钮
        index=obj.value;
        alert(index);
        tp.src=arr[index];
    }
    //下一张
    function next(){
        //如果当前图片是最后一张
        if(index==arr.length-1){
            index=0;
        }else{
            index=index+1;
        }
        tp.src=arr[index];
    }
    //上一张
    function up(){
        //如果当前图片是最后一张
        if(index==0){
            index=arr.length-1;
        }else{
            index=index-1;
        }
        tp.src=arr[index];
    }
    //开始轮播
    function start(){
        var timer=setInterval("next()",5000);
    }
</script>
</head>

<body>
<img src="img/1.jpg" id="tp">
<input type="button" value="上一页" onClick="up()">
<input type="button" value="0" onClick="change(this)">
<input type="button" value="1" onClick="change(this)">
<input type="button" value="2" onClick="change(this)">
<input type="button" value="3" onClick="change(this)">
<input type="button" value="下一页" onClick="next()">

</body>
</html>