轮播图！！！！

最新推荐文章于 2025-09-12 16:56:45 发布

转载最新推荐文章于 2025-09-12 16:56:45 发布 · 71 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/pandam/p/10724160.html

文章标签：

#javascript #ViewUI

本文介绍了一个使用HTML和JavaScript实现的简易图片轮播功能，包括上一张、下一张及手动选择图片的功能。通过定时器自动切换图片，并提供按钮供用户手动控制。

<!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>