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

最新推荐文章于 2024-03-29 08:09:33 发布

Apress92

最新推荐文章于 2024-03-29 08:09:33 发布

阅读量812

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/bin1813/article/details/53513065

版权

javascript 专栏收录该内容

49 篇文章 1 订阅

订阅专栏

<!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>

Apress92

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript图片无缝滚动_妙味课堂

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"> me
复制链接

扫一扫