js轮播图

最新推荐文章于 2021-06-09 16:03:42 发布
原创最新推荐文章于 2021-06-09 16:03:42 发布 · 338 阅读
0 ·
CC 4.0 BY-SA版权
前端界面js特效专栏收录该内容
5 篇文章
订阅专栏
<html>
    <head>
        <meta charset="utf-8" />
        <title>爱萝莉</title>
        <style type="text/css">
            *{ 
                margin: 0; padding: 0; text-decoration: none; 
             }
            body{
                padding:20px;
            }
            #container{
                width:600px; height:392px; border:3px solid #333; overflow: hidden; position:relative;margin:0 auto; 
            }
            #list{
                width: 4200px; height: 400px; position: absolute; z-index: 1;
            }
            #list img{
                width:600px;
                float:left;
            }
            #pots{
                position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 250px;
            }
            #pots span{
                cursor: pointer; float: left; border:1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px;
            }
            #pots .on{
                background: orange;
            }
            .arrow{
                cursor: pointer; display: none; line-height: 30px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 40px; position: absolute; z-index: 2; top: 180px; background-color: RGBA(0,0,0,.5); color:white; 
            }
            .arrow:hover{
                background-color: RGBA(0,0,0,.7);
            }
            #container:hover .arrow{
                display:block;
            }
            #prev{
                left:20px;
            }
            #next{
                right: 20px;
            }
        </style>
        <script type="text/javascript">
            window.onload = function (){
                let container = document.getElementById('container');
                let list = document.getElementById('list');
                let pots = document.getElementById('pots').getElementsByTagName('span');
                let prev = document.getElementById('prev');
                let next = document.getElementById('next');
                let index = 1;//显示第几个小圆点
                let changed = false;//切换状态值无切换
                let timer;

                function showPot(){//点亮小圆点
                    for(let i = 0;i < pots.length; i++){
                            pots[i].className = '';
                    }
                    pots[index - 1].className = 'on';//改变classname改变小圆点的样式
                }
                function change(offset){//切换图片函数
                    changed = true;
                    let new_left = parseInt(list.style.left) + offset;

                    let time = 300;//位移总时间（ms）
                    let interval = 10;//每一帧间隔
                    let speed = offset/(time/interval);//每帧移动的距离

                    function go(){
                        if((speed < 0 && parseInt(list.style.left) > new_left)||(speed > 0 && parseInt(list.style.left) < new_left)){
                             list.style.left = parseInt(list.style.left) + speed + 'px';
                               setTimeout(go,interval);//每隔interval执行一次go，回调自己
                        }
                        else{
                            changed = false;
                            list.style.left = new_left + 'px';//防止有偏移一两像素后期越来越大，所以最后要归位

                            if(new_left > -600){//
                                list.style.left = -3000 + 'px';
                            }
                            if(new_left < -3000){//因为最后一张图片已经小于-3000，所以最后一张图片结束的时候会跳回第二张
                                list.style.left = -600 + 'px';
                            }
                        }
                    }
                    go();
                }

                function play(){//自动切换函数
                    timer = setInterval(function(){
                        next.onclick();
                    },3000);
                }
                play();
                container.onmouseover = function(){//移入鼠标停止自动轮播
                    clearInterval(timer);
                }
                container.onmouseout = function(){//移开鼠标自动轮播
                    play();
                }
                next.onclick = function() {//右箭头点击事件
                    if(!changed){
                        if(index == 5){
                            index = 1;
                        }
                        else{
                            index += 1;
                        }
                        showPot();
                        change(-600);
                    }
                }
                prev.onclick = function() {//左箭头点击事件
                    if(!changed){
                        if(index == 1){
                            index = 5;
                        }
                        else{
                            index -= 1;
                        }
                        showPot();
                        change(600);
                    }
                }
                //为小圆点添加点击事件
                for(let i =0; i <pots.length; i++){
                    pots[i].onclick = function(){
                        //判断如果点击对应以打开图片，退出函数
                        // if(this.classname == 'on'){
                        //     return;
                        // }
                        //获取自定义或动态属性
                       if(!changed){ 
                        console.log(index);
                            let new_index = parseInt(this.getAttribute('index'));
                            let offset = 600 * (index - new_index);
                            index = new_index;
                            showPot();
                            change(offset);
                       } 
                    }
                }
            }
        </script>
    </head>
    <body>
        <div id = "container">
            <div id = "list" style = "left:-600px;">
                <img src="img/5.jpg" alt="" />
                <img src="img/1.jpg" alt="" />
                <img src="img/2.jpg" alt="" />
                <img src="img/3.jpg" alt="" />
                <img src="img/4.jpg" alt="" />
                <img src="img/5.jpg" alt="" />
                <img src="img/1.jpg" alt="" />  
            </div>
            <div id = "pots">
                <span index="1" class="on"></span>
                <span index="2"></span>
                <span index="3"></span>
                <span index="4"></span>
                <span index="5"></span>
            </div>
            <a href="javascript:;" class="arrow" id="prev">&lt;</a>
            <a href="javascript:;" class="arrow" id="next">&gt;</a>
        </div>
    </body>
</html>