固定尺寸的图片焦点图案例

Posted 2020-08-26 汪洋是大大的海

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了固定尺寸的图片焦点图案例相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta charset="utf-8">
    <style>
    ul,
    li {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    #banner {
        width: 730px;
        height: 454px;
        margin: 10px auto;
        position: relative;
        overflow: hidden;
    }
    
    #banner ol {
        position: absolute;
        right: 10px;
        bottom: 10px;
    }
    
    #banner ol li {
        float: left;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        font-size: 12px;
        color: #fff;
        background: orange;
        margin-right: 5px;
        font-weight: bold;
    }
    
    #left,
    #right {
        position: absolute;
        top: 200px;
        width: 30px;
        height: 60px;
        background: #000;
        opacity: 0.8;
    }
    
    #left {
        left: 20px;
    }
    
    #right {
        right: 20px;
    }
    
    #banner ol li.bg {
        color: #000;
        background: red;
    }
    </style>
</head>

<body>
    <div id="banner">
        <ul>
            <li><img src="img/1.jpg"></li>
            <li><img src="img/2.jpg"></li>
            <li><img src="img/3.jpg"></li>
            <li><img src="img/4.jpg"></li>
            <li><img src="img/5.jpg"></li>
        </ul>
        <ol>
            <li class="bg">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
        <div id="left"></div>
        <div id="right"></div>
    </div>
    <script>
    var banner, left, right, pics, nums;
    banner = document.getElementById("banner")
    left = document.getElementById("left")
    right = document.getElementById("right")
    pics = document.getElementsByTagName("ul")[0].getElementsByTagName("li")
    nums = document.getElementsByTagName("ol")[0].getElementsByTagName("li")

    //自动播放的开始
    var k
    k = 0

    function auto() {

        for (var i = 0; i <= pics.length - 1; i++) {

            pics[i].style.display = "none"
            nums[i].className = ""
        }

        k++;
        if (k > pics.length - 1) {
            k = 0
        }

        pics[k].style.display = "block"
        nums[k].className = "bg"


    }

    sl = setInterval(auto, 1000)

    //自动播放的结束

    //鼠标滑过对应的数字的时候，对应的图片出现开始
    for (var j = 0; j <= nums.length - 1; j++) {
        nums[j].index = j
        nums[j].onmouseover = function() {
            for (var i = 0; i <= pics.length - 1; i++) {

                pics[i].style.display = "none"
                nums[i].className = ""

            }

            pics[this.index].style.display = "block"
            this.className = "bg"
            k = this.index

        }
    }
    //鼠标滑过对应的数字的时候，对应的图片出现结束

    //单击上一张  下一张开始


    right.onclick = function() {

        k++;
        if (k > pics.length - 1) {
            k = 0
        }
        for (var i = 0; i <= pics.length - 1; i++) {

            pics[i].style.display = "none"
            nums[i].className = ""

        }

        pics[k].style.display = "block"
        nums[k].className = "bg"



    }


    left.onclick = function() {
        k--;
        if (k < 0) {
            k = pics.length - 1
        }
        for (var i = 0; i <= pics.length - 1; i++) {

            pics[i].style.display = "none"
            nums[i].className = ""

        }

        pics[k].style.display = "block"
        nums[k].className = "bg"

    }

    //单击上一张  下一张结束





    banner.onmouseover = function() {

        clearInterval(sl)
        left.style.display = "block"
        right.style.display = "block"
    }

    banner.onmouseout = function() {

        sl = setInterval(auto, 1000)
        left.style.display = "none"
        right.style.display = "none"
    }
    </script>
</body>

</html>

以上是关于固定尺寸的图片焦点图案例的主要内容，如果未能解决你的问题，请参考以下文章

谁有uno和2560的尺寸图，要做个板固定住arduino

支持鼠标滚轮图片自适应的焦点图代码等

React.js扭曲相册焦点图动画

案例如何用jquery实现仿百度新闻焦点图

案例：网页轮播图