图片轮播与选择器-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42707540/article/details/81406960

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        #content {
            width: 400px;
            height: 400px;
            background-color: grey;
            margin: 100px auto;
        }

        #pager {
            width: 400px;
            margin: 100px auto;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="content">
        <img id="cimg" src="" alt="图片的描述问题" width="400px" height="400px"> 
    </div>
    <div id="pager">
    </div>
    <select id="sel" onchange="changeImg(this);">
    </select>
    <script type="text/javascript">

        // 图片数据源
        var imgArray = [
        "http://placehold.it/400x400/333333/00a2ff.png&text=1",
        "http://placehold.it/400x400/333333/00a2ff.png&text=2",
        "http://placehold.it/400x400/333333/00a2ff.png&text=3",
        "http://placehold.it/400x400/333333/00a2ff.png&text=4",
        "http://placehold.it/400x400/333333/00a2ff.png&text=5"];


        var i = 1; // 全局变量i，用于指定显示哪种图片

        var achangeImg = function(v) {
            document.getElementById("cimg").src = imgArray[v];
            i = v;
        }

        var changeImg = function(sel) {
            document.getElementById("cimg").src = imgArray[sel.value];
            i = sel.value;
        }

        // 初始化select标签中option的内容
        var selOptions = "";
        var as = "";
        for (var k = 0; k < imgArray.length; k++) {
            selOptions += "<option value='"+k+"'>第"+(k+1)+"张</option>";
            as += "<a href='javascript:achangeImg("+k+")'>"+(k+1)+"</a>&nbsp;";
        }
        document.getElementById("sel").innerHTML = selOptions;
        document.getElementById("pager").innerHTML = as;


        document.getElementById("cimg").src =  imgArray[0];

        var ci = function() {
            document.getElementById("cimg").src = imgArray[i]; // 显示图片
            // 准备下一张图片
            i++; // 1
            // 如果i加完的结果超过了图片的长度，则初始化i=1
            if (i == imgArray.length) {
                i = 0;
            }
        }
        setInterval(ci, 1000);
    </script>
</body>
</html>