js轮播图

时间:2020-03-27
本文章向大家介绍js轮播图,主要包括js轮播图使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

思路:

  

设置一个窗口,让将图片放在li中,然后依次通过窗口,其中在放图片时,第一张和最后一张相同(防止过度不顺畅)

1.实现自动循环

2.点击按钮循环

3.现价导航循环

其中动画效果,我用的是定时器来实现的(个人感觉比较复杂),后期做过一个用CSS3实现的动画(比较简单易懂)

CSS布局就不多做介绍,主要介绍一下JS实现的逻辑功能:

<style type="text/css">
            *{
                margin: 0px;
                padding: 0px;
                /* transition: all 1.5s; */
            }
            #main{
                position: relative;
                width: 600px;
                height: 720px;
                margin: 50px auto;
            }
            #inner{        
                position: relative;
                width: 520px;
                height: 720px;    
                margin: 0px auto;
                background-color: greenyellow;
                overflow: hidden;    
            }
            #inner ul{
                position: absolute;
                /* width: 2200px; */
                /* left: -780px; */
                list-style: none;                                
            }
            #inner li{
                float: left;
                margin: 10px;
            }
            #inner img{
                width: 500px;
                height: 700px;
            }
            #btn{
                position: absolute;
                top: 50%;
                width: 100%;
                height: 50px;
                /* background-color: red; */
                /* opacity: 0.5; */
                overflow: hidden;
            }
            #btn i{
                display: block;
                width: 50px;
                height: 50px;
                background-color: rgba(0,0,250,0.3);
                font-size: 45px;
                font-style: normal;
                line-height: 50px;
                text-align: center;
            }
            #btn i:hover{
                cursor: pointer;
                font-size: 50px;
            }
            #btn .btn-left{                
                float: left;                
            }
            #btn .btn-right{                
                float: right;
            }
            #bar{
                margin-top: 10px;
            }
            #bar ul{
                text-align: center;
            }
            #bar li{
                display: inline-block;
                margin: 0 3px;
                width: 50px;
                height: 10px;                
                background-color: rgba(255,0,0,0.6);
                transition: all 0.5s;
            }
            #bar li:hover{
                cursor: pointer;
                height: 15px;
            }
        </style>

html如下:

<body>
        <div id="main">
            <div id="inner">
                <ul id="ul1" class="ssss">
                    <li><img src='./img/1.jpg'/></li>
                    <li><img src='./img/2.jpg' /></li>
                    <li><img src='./img/4.jpg' /></li>
                    <li><img src='./img/5.jpeg' /></li>    
                    <li><img src='./img/1.jpg'/></li>
                </ul>
            </div>                
                <div id="bar">
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
                
                <div id="btn">
                    <i class="btn-left"><</i>
                    <i class="btn-right">></i>
                </div>        
        </div>

JS如下:

写的时候,因为考虑用定时器来做动画,后面还要重复用到,于是就把定时器动画封装在一个方法中,
move(target,speed)接受两个参数,第一个参数表示移动的目标距离,第二个参数表示移动的速度,速度为正表示向左移动,速度为负表示向右移动(这里的左移动,右移动都表示的是ul整体相对于窗口的移动)
setli()用来给导航设置颜色
autoChange()自动轮播函数

这里index贯穿所有的函数,所有的操作都依赖于index的值.

在动画函数中,要注意的就是红色部分
clearInterval(ul.activ);用对象ul的属性activ来保存定时器动画,方便清除,在每次调用move()函数时都要清除上一次的动画,防止产生冲突.




window.onload = ()=>{ const imglist = document.getElementsByTagName("img"); const ul = document.getElementById("ul1"); const btn_left = document.getElementsByClassName('btn-left')[0]; const btn_right = document.getElementsByClassName('btn-right')[0]; const allLi = document.querySelectorAll("#bar li") const aLi = Array.from(allLi); let index = 0;
         let active; let oldLeft
= 0; ul.style.width = imglist.length*520 + "px"; aLi[0].style.backgroundColor = 'rgba(0,255,0,0.5)';//默认第一张颜色为绿色 //为所有的下标添加点击事件 for(let i=0;i<aLi.length;i++) aLi[i].onclick = ()=>{ clearInterval(active); if(index<i) { index = i; move(-520*index,-8);//向前走 } else { index = i; move(-520*index,8);//向后走 }
              autoChange(); setli(index); }
//自动轮播函数 function autoChange(){ active = setInterval(()=>{ index++; index%=imglist.length; move(-520*index,-8); setli(index); },3000); } autoChange();//自动执行 //设置下标的颜色 function setli(index){ for(let i=0;i<aLi.length;i++){ aLi[i].style.backgroundColor = 'rgba(255,0,0,0.5)'; } if(index==imglist.length-1) aLi[0].style.backgroundColor = 'rgba(0,255,0,0.5)'; else aLi[index].style.backgroundColor = 'rgba(0,255,0,0.5)'; } //动画函数 function move(target,speed){ clearInterval(ul.activ);//每次调用move函数都要清除上一次的定时器动画 ul.activ = setInterval(()=>{ let oldLeft = ul.offsetLeft; let curret = getComputedStyle(ul,null)['left'];//获取ul的left样式值 let newLeft = oldLeft + speed; //console.log("curren:"+curret,"oldLeft:"+oldLeft); //if(window.getComputedStyle) //获取属性值 //console.log(getComputedStyle(ul,null)['left']); if((speed < 0 && newLeft < target) || (speed > 0 && newLeft > target)){//当图片移动高德距离不能正好出现在窗口时,就需要调整newLeft=target //移动的距离不正好等于-520倍数时 newLeft = target; //ul.style.left = newLeft + 'px'; } ul.style.left = newLeft + 'px'; if(newLeft==target)//每一栋一张图片 就短暂暂停一下 { clearInterval(ul.activ); callback1();//从最后一张直接返回到第一张 //第一张和最后一张一样,在视觉上 造成连续动画 } function callback1(){ if(index>=imglist.length-1)//显示为最后一张图片 立马切换为第一张 { console.log("返回第一张图片..."); index=0; ul.style.left = 0 + 'px'; } } },20) console.log(index); } //左右按钮点击事件 btn_left.addEventListener('click',()=>{ btnC(btn_left,8); }); btn_right.addEventListener('click',()=>{ btnC(btn_right,-8); }); function btnC(obj,speed){ //console.log(obj); if(speed<0){//右移 index++; if(index>imglist.length-1){ index = 0; } }else{//左移 index--; if(index<0){ //第一张到最后一张 直接设置 ul.style.left = -520*(imglist.length-1) + 'px'; index = 3; } } clearInterval(active);//开始移动之前,清除之前的动画 move(-520*index,speed); autoChange();//动画执行完,要开启自动模式 setli(index); } }

效果如下:

  

  

原文地址:https://www.cnblogs.com/Tisou1/p/12583080.html