js点击切换图片-蒲公英云

js点击切换图片

港控/mmm° 2022-01-14 09:41 517阅读 0赞

<style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .content{
                width: 390px;
                height: 300px;
                position: relative;
                margin: auto;
                overflow: hidden;
            }
            .imgContent{
                position: absolute;
                width: 1950px;
                left: 0px;
            }
            img{
                float: left;
                width: 390px;
                height: 300px;
            }
            p,.box{
                position: absolute;
                width: 100%;
            }
            p{
                background-color: rgba(0,0,0,0.5);
                left: 0;
                top: 0;
                height: 30px;
                text-align: center;
                line-height: 30px;
                color: white;
                z-index: 2;
            }
            .box{
                bottom: 10px;
                text-align: center;
            }
            .box span{
                display: inline-block;
                background-color: pink;
                width: 20px;
                height: 20px;
                text-align: center;
                line-height: 20px;
                cursor: pointer;
                color: white;
            }
            .spanActive{
                background-color: red !important;
            }
        </style>
    </head>
    <body>
        <div class="content">
            <p>美女1</p>
            <div class="imgContent">
                <img src="img/1.jpg"/>
                <img src="img/2.jpg"/>
                <img src="img/3.jpg"/>
                <img src="img/4.jpg"/>
                <img src="img/1.jpg"/>
            </div>
            <div class="box">
                <span class="spanActive">1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
            </div>
        </div>
    </body>
    <script src="js.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        var content = document.getElementsByClassName('content')[0];
        var imgContent = document.getElementsByClassName('imgContent')[0];
        var spanArr = document.getElementsByClassName('box')[0].getElementsByTagName('span');
        var timer;
        var ind = 0;
        //0 0px
        //1 -390px
        //2 -780px
        //3 -1170px
        timer = setInterval(autoNext,2000)
        //鼠标移入的事件
        content.onmouseover = function () {
            clearInterval(timer);
        }
        //鼠标移出的事件
        content.onmouseout = function () {
            timer = setInterval(autoNext,2000);
        }
        for(var i=0;i<spanArr.length;i++){
            spanArr[i].index = i;
            spanArr[i].onclick = function () {
                move(imgContent, 'left', 30, -390*this.index)
                for(var j=0;j<spanArr.length;j++){
                    spanArr[j].className = '';
                }
                this.className = 'spanActive';
                ind = this.index;
            }
        }
        function autoNext() {
            ind = ind + 1;
            //滚到第5张图片的时候 ind=4
            if(ind == 5){
                //当图片已经到达最后一张  把图片容器的位置放到 第一张
                imgContent.style.left = '0px';
                ind = 1;
            }
            var n = ind;
            move(imgContent, 'left', 30, -390*ind);
            if(ind == 4){
                n = 0;
            }
            for(var j=0;j<spanArr.length;j++){
                spanArr[j].className = '';
            }
            spanArr[n].className = 'spanActive';
        }
    </script>