Javascript图片无缝滚动_妙味课堂

来源：互联网发布：搜狗输入法 mac 3.0 编辑：程序博客网时间：2024/05/16 11:06
<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport"          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title>    <style>        *{            margin: 0;            padding: 0;        }        #div1{            position: relative;            width: 680px;            height: 132px;            margin:10px auto;            border: 1px solid black;            overflow: hidden;        }        #div1 ul{            position: absolute;            left:0px;        }        #div1 ul li{            list-style: none;            float:left;            width:150px;            height:112px;            padding: 10px;        }        #div1 ul li img{            width: 150px;            height: 112px;        }    </style>    <script>        window.onload=function () {            var oDiv=document.getElementById('div1');            var oUl=oDiv.getElementsByTagName('ul')[0];            var aLi=oUl.getElementsByTagName('li');            var aA=document.getElementsByTagName('a');            var timer=null;            var iSpeed=3;            oUl.innerHTML+=oUl.innerHTML;            oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';            function fnMove() {                if(oUl.offsetLeft<-oUl.offsetWidth/2) {                    oUl.style.left = 0;                }                else if(oUl.offsetLeft>0){                    oUl.style.left=-oUl.offsetWidth/2+'px';                    //视频中此处没有'px'单位，但是在视频中能运行                }                oUl.style.left=oUl.offsetLeft+iSpeed+'px';            };            timer=setInterval(fnMove,30);            aA[0].onclick=function () {                iSpeed=-10;            };            aA[1].onclick=function () {                iSpeed=10;            };            oDiv.onmouseover=function () {                clearInterval(timer);            };            oDiv.onmouseout=function(){                timer=setInterval(fnMove,30);            }        }    </script></head><body><a href="javascript:;"><---</a><a href="javascript:;">---></a><div id="div1">    <ul>        <li><img src="1.jpg" alt=""></li>        <li><img src="2.jpg" alt=""></li>        <li><img src="3.jpg" alt=""></li>        <li><img src="4.jpg" alt=""></li>    </ul></div></body></html>
0 0