HTML 实现轮播页面(包含跨域页面)

原创已于 2023-06-07 16:31:57 修改 · 950 阅读

本内容遵循CC 4.0 BY-SA版权协议

于 2023-06-07 16:23:59 首次发布

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon" />
    <title>轮播</title>
</head>
<body>

<div style="width: 100%;height: 100%" id="content">

</div>


<iframe   src="http://10.90.01.11:8888/#/dashboard" style="width: 100%;height: 372px;z-index: -1" id="iframe">


</iframe>

</body>

<script src="/jquery-3.3.1.min.js" ></script>
<script type="text/javascript">
    var height = window.innerHeight ;//windows窗口的高度
    console.log(height);
    $("#iframe").height(height);//iframe和div全部是100%高
    $("#content").height(height);
    var urls = ['/mes/drcl','/mes/gz','/mes/gxjtkb','3'];//此处的3是个随意值
    var i = 0;
    go_page(0);
    function go_page(){
        if(i == 3){
            $("#content").hide();
            i = 0;
        }else{
            $("#content").show();

        }
        $.ajax({
            type: 'get',
            url: urls[i], //请求后台页面，我后台是spingboot的返回的thymeleaf
            data: {},
            cache: false,
            processData: false,
            contentType: false,
            success: function (res) {
                document.getElementById("content").innerHTML = res;//返回渲染好的页面写入到div里
                i ++;

            }
        })
    }
//定时 5秒轮播一次
    setInterval(function () {
        go_page();
    },5000);


</script>

</html>