猫史档案馆

效果：

center_image

代码：

./imdex.html

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="icon" type="image/x-icon" href="static/icon.ico" />
    <title>PointCode</title>
</head>
<body>
    <div class="topnav">
        <h1>PointCode</h1>
        <a href="index.html">首页</a>
        <a href="article.html">文章</a>
        <a href="project.html">项目</a>
    </div>
    <div class="main">
        <div class="container">
            <img class="on" src="static/img1.jpg" />
            <img src="static/img2.jpg" />
            <img src="static/img3.jpg" />
            <img src="static/img4.jpg" />
            <img src="static/img5.jpg" />

            <div class="left"><</div>
            <div class="right">></div>

            <ul>
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <script type="text/javascript" src="js/slide.js"></script>
        </div>
        <div class="adcard" id="card-lt">
            <a>
                <img scr="static/PointCode.jpg" alt="pic" />
                <h2>PointCode官网建立</h2>
                <p>说明</p>
            </a>
        </div>
        <div class="adcard" id="card-lb">
            <a>
                <img scr="static/PointCode.jpg" alt="pic" />
                <h2>技术快报2021-3-1</h2>
                <p>说明</p>
            </a>
        </div>
        <div class="footer"></div>
    </div>
</body>
</html>

.static/：存有图片文件

.css/style.css:

@keyframes link-hover {
    from {
        background-color: #EB6C15;
    }

    to {
        background-color: #F6AB00;
    }
}

body {
    margin: 0px;
}

/* navbar div */
.topnav {
    overflow: hidden;
    position: relative;
    background-color: #EB6C15;
}

.topnav h1 {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding-left: 40px;
    padding-right: 70px;
    cursor: pointer;
}

/* navbar link */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 22px;
    /* set fixed size */
    width: 80px;
    /* set align */
    line-height: 60px;
    text-align: center;
}

/* link - when hovering */
.topnav a:hover {
    animation-name: link-hover;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

/* slide image */
div, ul, li {
    margin: 0;
    padding: 0;
}

.container {
    width: 50%;
    height: 85%;
    position: relative;
    top: 8%;
    margin: 0 auto;
    /*border: 1px solid #ccc;*/
}

.container img {
    position: absolute;
    width: 100%;
    height: 100%;
    transition-duration: 1s;
    opacity: 0;
    border-radius: 3%;
    }

.container img.on {
    opacity: 1;
}

.main {
    height: 800px;
    overflow: auto;
}

.left, .right {
    position: absolute;
    top: 40%;
    width: 60px;
    height: 100px;
    line-height: 100px;
    background-color: #666;
    opacity: 0.5;
    text-align: center;
    font-size: 60px;
    color: #ccc;
    display: none;
    cursor: pointer;
}

.left {
    left: 0;
}

.right {
    right: 0;
}

.container:hover .left, .container:hover .right {
    display: block;
}

.left:hover, .right:hover {
    color: #fff;
}

.container ul {
    position: absolute;
    right: 7%;
    margin: 0 auto;
    bottom: 7%;
    padding: 5px;
    display: table;
}

.container ul li {
    list-style: none;
    float: left;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-left: 10px;
    background-color: #ccc;
    cursor: pointer;
}

.container ul li.active {
    background-color: #fff;
}

.adcard {
    position: absolute;
    background-color: #eee;
    width: 20%;
    height: 35%;
    border-radius: 5%;
}

.adcard img {
    position: relative;
    width: 90%;
    height: 60%;
    top: 6%;
    border-radius: 5%;
    display: table;
    margin: 0 auto;
}

.adcard h2, p{
    position: relative;
    padding-left: 20px;
}

#card-lt {
    top: 16%;
    left: 3%;
}

#card-lb {
    top: 53%;
    left: 3%;
}

.js/slide.js:

var aImgs = document.querySelectorAll('.container img');
var aLis = document.querySelectorAll('.container li');
var btnLeft = document.querySelector('.container .left');
var btnRight = document.querySelector('.container .right');

var index = 0;
var lastIndex = 0;

function right() {
    lastIndex = index;

    aImgs[lastIndex].className = '';
    aLis[lastIndex].className = '';

    index++;
    index %= aImgs.length;
    aImgs[index].className = 'on';
    aLis[index].className = 'active';
}

function left() {
    lastIndex = index;
    aImgs[lastIndex].className = '';
    aLis[lastIndex].className = '';

    index--;
    if (index < 0) {
        index = aImgs.length - 1;
    }
    aImgs[index].className = 'on';
    aLis[index].className = 'active';
}

//Timed display
var timer = null;
clearInterval(timer);
timer = setInterval(right, 4000);

//Button switch
btnRight.onclick = right;
btnLeft.onclick = left;

烦请各位帮忙解决下

猫史档案馆

【html求助】本地html图片不显示

回复