Javascript第八天学习总结offset家族及简单轮播图

最新推荐文章于 2022-06-20 20:59:37 发布

YanTuTwo

最新推荐文章于 2022-06-20 20:59:37 发布

阅读量591

点赞数

分类专栏：前端学习从入门到翻车文章标签： offset-轮播图

前端学习从入门到翻车专栏收录该内容

14 篇文章 0 订阅

订阅专栏

offset家族：
* offsetWidth/offsetHeight:检测盒子的宽高：width+padding+border;
* offsetLeft/offsetTop:检测盒子距离有定位的父元素的距离
* offsetParent:盒子的有定位的父元素

先封装一个移动的函数：

 function animate(obj,target) {
            clearInterval(obj.timer);
            //匀速动画原理：物体当前位置 = 物体原来的位置+步长（leader = obj.offsetLeft+speed）
            obj.timer = setInterval(function () {
                //一次走10px
                //到target就停下来
                //我是希望不管obj原来在哪里都能到达target
//                if(obj.offsetLeft>target){
//                    var speed = -10;
//                }else{
//                    var speed = 10;
//                }
                var speed = (obj.offsetLeft>target?-20:20);
                if(Math.abs(obj.offsetLeft-target)<20){
                    //就是物体原来位置距离目标不到一步，直接一步到target
                    obj.style.left = target+"px";
                    clearInterval(obj.timer);
                }else{
                    obj.style.left = obj.offsetLeft+speed+"px";
                }
            },20)
        }

具体代码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            div {
                width: 730px;
                height: 454px;
                margin: 100px auto;
                position: relative;
                box-shadow: 0 0 10px 2px #ccc;
                overflow: hidden;
            }

            ul.img {
                width: 1000%;
                position: absolute;
                top: 0;
                left: 0;
            }

            ul.img li {
                list-style: none;
                float: left;
            }

            ul.point {
                position: absolute;
                left: 50%;
                bottom: 10px;
                margin-left: -75px;
            }

            ul.point li {
                float: left;
                margin: 0 5px;
                width: 20px;
                height: 20px;
                text-align: center;
                line-height: 20px;
                background: pink;
                list-style: none;
                cursor: pointer;
                border-radius: 50%;
            }

            ul.point li.now {
                background: red;
                color: #fff;
            }

            .arrow {
                position: absolute;
                left: 0;
                width: 100%;
                top: 50%;
                margin-top: -25px;
                color: white;
            }

            .arrow li {
                list-style: none;
                width: 35px;
                height: 50px;
                text-align: center;
                line-height: 50px;
                font-size: 30px;
                background: rgba(0, 0, 0, .2);
                cursor: pointer;
            }

            .left {
                float: left;
            }

            .right {
                float: right;
            }
        </style>
        <script src="myjq.js"></script>
    </head>

    <body>
        <div>
            <ul class="img">
                <li><img src="img/22.jpg"></li>
                <li><img src="img/33.jpg"></li>
                <li><img src="img/44.jpg"></li>
                <li><img src="img/55.jpg"></li>
                <li><img src="img/66.jpg"></li>
            </ul>
            <ul class="point">
            </ul>
            <ul class="arrow">
                <li class="left"><</li>
                <li class="right">></li>
            </ul>
        </div>

        <script type="text/javascript">
        //需求分析：
        //1、在最后一幅图后面添加第一幅图
        //2、我们必须动态添加小圆点，同时点亮第一个
        //3、点击小圆点，ul移动到相应的图片
        //4、同时点亮小圆点
        //5、左右箭头切换图片
        //6、添加自动轮播功能
            var box=document.getElementsByTagName("div")[0];
            var imgul=box.children[0];//图片ul
            var point=box.children[1];//小圆点ul
            var arrow=box.children[2];//左右键ul
            var previous=arrow.getElementsByTagName("li")[0];//上一张
            var next=arrow.getElementsByTagName("li")[1];//下一张
            var index=0;
            //1、在最后一幅图后面添加第一幅图
            var lastli=imgul.children[0].cloneNode(true);
            imgul.appendChild(lastli);
            var imglis=imgul.children;

            //2、我们必须动态添加小圆点，同时点亮第一个
            for(var i=1;i<imgul.children.length;i++){
                var li=document.createElement("li");
                li.innerHTML=i;
                point.appendChild(li);              
            }
            var points = point.children;//小圆点的集合
            points[0].className="now";

            //3、点击小圆点，ul移动到相应的图片
            //4、同时点亮小圆点
            //点亮小图标函数
            function light(){
                for(var i=0;i<points.length;i++){
                        points[i].className="";
                    }
                if(index>4){
                    points[0].className="now";
                }else{
                    points[index].className="now";
                }                   
            }
            for(var j=0;j<points.length;j++){
                points[j].index=j;
                points[j].onclick=function(){
                    index=this.index;
                    animate(imgul,-box.offsetWidth*index);
                    light();
                }
            }

            //5、左右箭头切换图片
            next.onclick=autoplay;
            function autoplay(){
                index++;
                if(index>imglis.length-1){
                    imgul.style.left=0;//直接跳到第一張圖
                    index=1;//進行第二張圖的移動
                }
                animate(imgul,-box.offsetWidth*index);
                light();
            }
            previous.onclick=function(){
                index--;
                if(index<0){                    
                    imgul.style.left=-box.offsetWidth*(imglis.length-1)+"px";//相当于跳到最后一张图，然后再移动
                    index=imglis.length-2;//移动前，把index设为即将显示的倒数第二张图，然后再移动
                }
                animate(imgul,-box.offsetWidth*index);
                light();
            }
            //6、添加自动轮播功能
            var timer=setInterval(autoplay,2000);
            box.onmouseover=function(){
                clearInterval(timer);
            }
            box.onmouseout=function(){
                clearInterval(timer);
                timer=setInterval(autoplay,2000);
            }

        </script>
    </body>

</html>

如果有错误，欢迎指出。

YanTuTwo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Javascript第八天学习总结offset家族及简单轮播图

offset家族： * offsetWidth/offsetHeight:检测盒子的宽高：width+padding+border; * offsetLeft/offsetTop:检测盒子距离有定位的父元素的距离 * offsetParent:盒子的有定位的父元素先封装一个移动的函数： function animate(obj,target) {
复制链接

扫一扫