Javascript——轮播图、document获取元素、scroll

最新推荐文章于 2022-04-17 23:52:06 发布

原创最新推荐文章于 2022-04-17 23:52:06 发布 · 224 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

学习笔记同时被 2 个专栏收录

128 篇文章

订阅专栏

javascript

56 篇文章

订阅专栏

本文详细讲解了如何使用JavaScript实现轮播图功能，包括动态创建小按钮、处理鼠标进入事件、图片平移及无缝连接效果。同时介绍了元素的offset系列属性用于获取样式属性，以及scrollWidth和scrollHeight在滚动事件中的应用。

    console.log(document.body);//获取的是元素——标签
    //获取title
    console.log(document.title);//标签中的值
    document.title="mayday";
    //获取html
    console.log(document.documentElement);

元素的样式属性是无法直接通过：对象.style.属性来获取（样式在style属性中设置）
offset系列
获取元素的相关的样式属性的值
offsetWidth:获取元素的宽，有边框
offsetHeight:获取元素的高，有边框
offsetLeft:获取元素距离左边位置的值
offsetTop:获取元素距离上面位置的值

完整轮播图
1.根据ul中li个数（图片个数）动态创建li，并且加入到ol中，作为小按钮来使用
2.为每个ol中的li添加鼠标进入事件，（添加事假之前先把索引保存在每个li的自定义属性中），鼠标进入li的时候做排他功能（背景颜色），移动图片（图片整体移动，移动的ul，每次移动的是一个图片的宽度，图片的宽度就是相框的宽度），调用的是动画函数，移动ul，移动的是索引值X图片的宽度，并且把索引值存储在一个全局变量中，pic
3.创建li之后，（1）设置ol中第一个li有默认的背景颜色；（2）把ul中的第一个li克隆一下（无缝连接的效果）追加到ul中所有的li最后面（无缝效果：页面中的第一个图片和最后一个图片是同一个图片）
4.左右焦点的div显示和隐藏
5.为左右按钮注册点击事件
每一次点击右边按钮，先判断pic的值是不是ul中li的length-1（pic的值最大是5），此时设置pic的值为0，同时设置ul距离左边的left值为0（初始值），此时pic立刻加1，移动ul，用户看到的就是第二个图片
6.设置小按钮的背景颜色：左边按钮，需要判断pic值是不是0，如果是0此时pic=5，ul的left值为5X图片宽度，立刻pic-1，然后ul移动一张图片，此时用户看到了第五个图片
7.自动播放在页面加载的时候，启动一个定时器，里面调用的就是右边按钮的点击事件的处理函数

鼠标在页面中移动，图片跟着鼠标移动

<body>
<img src="images/x.gif" alt="" id="im">
<script>
    document.onmousemove=function(e){
        //鼠标的移动的横坐标
        //鼠标的移动的纵坐标
        my$("im").style.left=e.clientX+"px";
        my$("im").style.top=e.clientY+"px";
    };
</script>
</body>

scroll
scrollWidth：元素中内容的实际的宽（没有边框），如果没有内容就是元素的宽
scrollHeight：元素中内容的实际的高（没有边框），如果没有内容就是元素的高

    console.log(my$("dv").scrollTop);//向上卷曲出去的距离
    console.log(my$("dv).scrollLeft);//向左卷曲出去的距离

封装scroll函数

    //获取浏览器向上卷曲出去的距离的值，向左卷曲出去的距离
    function getScroll(){
        return {
            left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft ||0
            top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop ||0
        };
    }