您的位置:首页 > 编程学习 > > 正文

js 定时切换图片(JavaScript定时器实现无缝滚动图片)

更多 时间:2022-03-30 20:23:36 类别:编程学习 浏览量:608

js 定时切换图片

JavaScript定时器实现无缝滚动图片

本文实例为大家分享了JavaScript实现无缝滚动图片的具体代码,供大家参考,具体内容如下

js 定时切换图片(JavaScript定时器实现无缝滚动图片)

文本:

  • setInterval 开启间隔型定时器
  • clearTimeout 关闭定时器
  • offsetWidth 获取宽度
  • offsetLeft 获取向左偏移量
  • <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>无缝移动</title>
        <style>
            *{margin: 0;   padding: 0;}
            #li1{width:520px;  height:170px; margin:20px auto; position: relative;   /* !!!  li1 的位置是相对的  */
                    background: pink;   overflow: hidden}    /* !!!    overflow: hidden    */
            #li1  ul{position: absolute; left:0;  top:0;}      /* !!!  ul 的 position:绝对的,控制left的值   */
            #li1 ul li{float:left; width:130px; height:170px; list-style: none}
        </style>
        <script>
            window.onload=function () {
                var oli=document.getElementById('li1');
                var oUl=oli.getElementsByTagName('ul')[0];
                var aLi=oUl.getElementsByTagName('li');
                var speed = 2;
    
                oUl.innerHTML+=oUl.innerHTML;    // 相当于 4*2 张图像在移动
                oUl.style.width=aLi[0].offsetWidth  *  aLi.length  +  'px';   //  !!!!!!   offsetWidth
    
                function Move() {
                    if(oUl.offsetLeft  < - oUl.offsetWidth/2){      //  移动到左边的一半 就 回来
                        oUl.style.left='0';
                    }
                    if(oUl.offsetLeft>0){      // //  移动到右边的一半就回来
                        oUl.style.left  = - oUl.offsetWidth/2 +'px';
                    }
                    oUl.style.left=oUl.offsetLeft + speed + 'px';     //  !!!!!!!!  offsetLeft
                }
    
                var Timer1= setInterval(Move, 30);    //   setInterval    开启间隔型定时器
                oli.onmouseover=function () {
                    clearTimeout(Timer1);
                };
                oli.onmouseout=function () {
                    Timer1=setInterval(Move, 30);
                };
    
                document.getElementsByTagName('a')[0].onclick=function () {
                    speed=-2;   //  向左的速度
                };
                document.getElementsByTagName('a')[1].onclick=function () {
                    speed=2;     // 向右的速度
                };
            };
        </script>
    
    </head>
    <body>
    <a href="javascript:;" >向左移动</a>
    <a href="javascript:;" >向右移动</a>
        <li id="li1">
            <ul>
                <li><img src="img/aa.jpg" alt="js 定时切换图片(JavaScript定时器实现无缝滚动图片)" border="0" />
    
  • 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    标签:js 无缝滚动