网页轮播图+缓动效果

迷南。 2023-07-12 06:17 28阅读 0赞

*实现某宝上面的网页轮播图+缓动效果*

--------------------

# 代码和注释： #

--------------------

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <style type="text/css">
                *{                                           /*清除浏览器原带的格式*/
                    margin: 0;
                    padding: 0;
                }
                #content{                                      /*注意不要向content添加border和margin属性 会影响offset的使用*/
                    width: 600px;
                    height: 300px;
                    margin: 0 auto;                     /*设置为0没事*/
                    font-size: 12px;
                    position: relative;                     /*添加定位并超过子元素父盒子部分隐藏*/
                    overflow: hidden;
                }
                #img-s li{ 
                    list-style-type: none;                     /*浮动定位，让li标签一排显示*/
                    float: left;
                }
                #img-s{ 
                    width: 600%;                                /*之所以要把ul设置这么大是因为要给li安排浮动，让li一排显示 */
                    position: absolute;                         /*如果ul太小li就无法浮动，而li仍然会一列显示 */
                }
                .pre{ 
                    list-style-type:none;                       /*设置小圆圈按钮选中之前的样式*/
                    width: 10px;
                    height: 10px;
                    cursor: pointer;
                    border:3px rgba(255,255,255,0.5) solid;
                    margin: 0 3px;
                    border-radius:50% 50% ;
                    float: left;
                }
                .current{ 
                     background-color: white;                    /*设置小圆圈按钮选中之后的样式*/
                     width: 12px;
                     height: 12px;
                     box-shadow: 2px 2px 10px white;
                 }
                #pot-s{ 
                    position: absolute;                 /*对小圆圈相对于content设置定位*/
                    top: 250px;
                    left: 100px;
                }
                
                img{ 
                    width: 600px;                                   /*图片大小*/
                    height: 300px;
                }
                a{ 
                    z-index: 3;                                     /*a标签样式*/
                    display: none;
                    font-size: 50px;
                    color: white;
                    text-align: center;
                    width: 60px;
                    height: 70px;
                    background-color:rgba(55,25,55,0.2) ;
                    text-decoration: none;
                    position: absolute;
                    top: 120px;
                }
                .arrow-l{ 
                    left: 20px;                                     /*左箭头*/
                }
                .arrow-r{ 
                    right: 20px;                                       /*右箭头*/
                }
            </style>
            <script type="text/javascript" defer="">
                window.addEventListener('load',function () { 
                    var content=document.querySelector('#content');
                    var img_s=document.querySelector('#img-s');
                    var pot_s=document.querySelector('#pot-s');
                    var arrow_l=document.querySelector('.arrow-l');
                    var arrow_r=document.querySelector('.arrow-r');
                    st_current_con();
                    content.addEventListener('mouseenter',function () {          //content鼠标放上去的时候左右箭头显示，且图片停止滚动
                        arrow_l.style.display='block';
                        arrow_r.style.display='block';
                        clearInterval(pot_s.timer);
                    });
                    content.addEventListener('mouseleave',function ( ) {         //content鼠标离开的时候左右箭头消失，且图片重新滚动
                        arrow_l.style.display='none';
                        arrow_r.style.display='none';
                        st_current_con();
                    });
                    for (let i=0;i<img_s.children.length;i++){ 
                        let li=document.createElement('li');                    //创建li标签并添加对应的css样式，设置自定义属性和对应的点击事件
                        li.className='pre';
                        li.setAttribute('data-index',i);                           //注意自定义属性是有一定的定义格式和访问格式的
                        pot_s.appendChild(li);
                        pot_s.children[i].addEventListener('click',function () { 
                            for (let j=0;j<pot_s.children.length;j++) {              //排他思想
                                pot_s.children[j].className='pre';
                            }
                            this.className='pre current';
                            moves(img_s,-img_s.parentElement.offsetWidth*pot_s.children[i].dataset.index);
                        })
                    }
                    pot_s.children[0].className='pre current';                      //初始化，点进网页的时候第一个小圆点亮
                    var num=0;                                                              //对应img图片设定对应的索引
                    var circle=0;                                                          //对应圆圈图片设定对应的索引
                    function st_current_con() {                                                  //页面图片自动缓动的封装函数
                            pot_s.timer=setInterval(function() { 
                                if (num === pot_s.children.length) {                      //如果超出长度，则对num进行处理，且图片瞬移到第一个
                                    num = 0;
                                    img_s.style.left=0+'px';
                                }
                                moves(img_s, (++num) * -img_s.parentElement.offsetWidth);     //滚动到下一个img
                                for (let j=0;j<pot_s.children.length;j++) {                  //排它思想
                                    pot_s.children[j].className='pre';
                                }
                                if (circle ===pot_s.children.length-1) {                             //如果超出长度，则对circle进行处理
                                    circle=-1;
                                }
                                pot_s.children[++circle].className='pre current';
                        },1500);
                    }
                    var pict=img_s.children[0].cloneNode(true);                                 //克隆第一个img
                    img_s.appendChild(pict);                                                         //把它加载最后面
                    arrow_l.addEventListener('click',function () {                       //左箭头的点击事件
                        if(!(img_s.offsetLeft%img_s.parentElement.offsetWidth)){             //只有当当前图片复原之后才可以缓动出下一个图片，否则会引起图片播放混乱
                            (function () { 
                                if (num ===0) {                      //如果超出长度，则对num进行处理，且图片瞬移到最后一个
                                    num = 4;
                                    img_s.style.left=-img_s.parentElement.offsetWidth*num+'px';
                                }
                                moves(img_s, (--num) * -img_s.parentElement.offsetWidth);     //滚动到下一个img
                                for (let j=0;j<pot_s.children.length;j++) {                  //排它思想
                                    pot_s.children[j].className='pre';
                                }
                                if (circle ===0) {                                           //如果超出长度，则对circle进行处理
                                    circle=pot_s.children.length;
                                }
                                pot_s.children[--circle].className='pre current';
                            }())
                        }
                    });
                    arrow_r.addEventListener('click',function () {                                   //右箭头的点击事件
                        if(!(img_s.offsetLeft%img_s.parentElement.offsetWidth)){                     //只有当当前图片复原之后才可以缓动出下一个图片，否则会引起图片播放混乱
                            (function () { 
                                if (num === pot_s.children.length) {                      //如果超出长度，则对num进行处理，且图片瞬移到第一个
                                    num = 0;
                                    img_s.style.left=0+'px';
                                }
                                moves(img_s, (++num) * -img_s.parentElement.offsetWidth);     //滚动到下一个img
                                for (let j=0;j<pot_s.children.length;j++) {                  //排它思想
                                    pot_s.children[j].className='pre';
                                }
                                if (circle ===pot_s.children.length-1) {                     //如果超出长度，则对circle进行处理
                                    circle=-1;
                                }
                                pot_s.children[++circle].className='pre current';
                            }())
                        }
                        
                    });
                    function moves(doc,target){                              //让img图片缓动的封装函数
                        clearInterval(doc.timer);
                        doc.timer=setInterval(function () { 
                            var x=(target-doc.offsetLeft)/10;
                            var step=x>0?Math.ceil(x):Math.floor(x);
                            doc.style.left=doc.offsetLeft+step+'px';
                            if (target===doc.offsetLeft){ 
                                clearInterval(doc.timer);
                            }
                        },30)
                    }
                })
            </script>
        </head>
        <body>
            <div id="content">
                <a href="javascript:;" class="arrow-l"><</a>             
                <a href="javascript:;" class="arrow-r">></a>              
                <ul id="img-s">
                    <li><img src="../images/image03.jpg" alt="" title=""/></li>
                    <li><img src="../images/image04.jpg" alt="" title=""/></li>
                    <li><img src="../images/image01.jpg" alt="" title=""/></li>
                    <li><img src="../images/image06.jpg" alt="" title=""/></li>
                </ul>
                <ul id="pot-s">
                </ul>
            </div>
        </body>
    </html>

--------------------

# 效果图： #

\*\*\*![在这里插入图片描述][20200308102707659.gif]  
本文只用于个人学习和纪录

[20200308102707659.gif]: https://img-blog.csdnimg.cn/20200308102707659.gif