轮播图2

Posted 2020-08-28 程序员入门到放弃

tags:

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
        *{
            margin:0;
            padding:0;
        }

        img{
            display: block;
        }

        ul{
            list-style:none;
        }

        #wrap{
            margin-left:200px;
        }

        #banner{
            position:relative;
            width:638px;
        }

        /* .banner img{
            display: none;
        }*/
        
        #banner img{
            display: block;
            width:638px;
        } 

        #prev,#next{
            display: block;
            width:48px;
            height:48px;
            background:rgba(0,0,0,0.5);
            color:#fff;
            position:absolute;
            top:50%;
            font:bold 30px/48px "幼圆";
            text-align: center;
            margin-top: -24px;
            border-radius: 100px;
            cursor:pointer;
            -webkit-user-select:none;
            user-select:none
        }

        #prev{
            left:22px;
        }

        #next{
            right:22px;
        }

        #prev:hover,#next:hover{
            background:rgba(0,0,0,0.8);
        }

        #pointer{
            position:absolute;
            right:272px;
            bottom:50px;
        }

        #pointer li{
            width:10px;
            height:10px;
            border-radius: 100px;
            background: #fff;
            float: left;
            margin-left: 5px;
        }

        #pointer li#active{
            background:blue;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="banner">

            <a><img src="pic0.jpg"></a>

            <span id="prev"> < </span>
            <span id="next"> > </span>
            <ul id="pointer">
                <li class="li"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>

    <script type="text/javascript">

        var banner = document.getElementById("banner");
        var next = document.getElementById("next");
        var prev = document.getElementById("prev");
        var imgs = banner.getElementsByTagName("img")[0];
        var lis = banner.getElementsByTagName("li");
        var len = lis.length;
        var index = 0;

        next.onclick = function(){
            index++;
            if(index == 5){
                index = 0;
            }
            change(index);
        }

        prev.onclick = function(){
            index--;
            if(index == -1){
                index = 4;
            }
            change(index);
        }

        function change(index){
            //console.log("pic" + index + ".jpg")
            imgs.src = "pic" + index + ".jpg";

            for(var i = 0; i < lis.length; i++){
                lis[i].style.background = \'#fff\';
            }
            //console.log(lis.length);
            lis[index].style.background = "#ccc";
        }


        while(len--){
            lis[len].index = len;
            
            lis[len].onmouseover = function(){
                change(this.index + 1)
            }
        }
    </script>
</body>
</html>

以上是关于轮播图2的主要内容，如果未能解决你的问题，请参考以下文章

jquery 图片轮播代码啥意思啊

织梦DEDE轮播代码，从几个网站复制了几段轮播代码过来，轮播图有图，但不轮播，为啥？没用CSS和JS