javaScript实现图片滚动

迷南。 2022-08-10 11:49 144阅读 0赞

<!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8" >
    <title>Demo Text</title>
    <style type="text/css">
    *{margin: 0;padding: 0;}
    #frame{width: 752px;height: 180px;position: absolute;margin:60px 60px;border: 1px solid green;overflow: hidden;}
    #frame ul{position: absolute;}
    #frame ul li{width: 188px;height: 180px;float: left;list-style: none;}
    </style>
    <script type="text/javascript">
    window.οnlοad=function(){
         var oDiv=document.getElementById('frame');
         var oUl=document.getElementById('ul1');
         oUl.innerHTML+=oUl.innerHTML;
         oUl.style.width=oUl.getElementsByTagName('li').length*188+'px';
         var timerId=null;
         timerId=setInterval(function(){
            move(5);
         },50);	
         oUl.οnmοuseοver=function(){
             clearInterval(timerId);
         }
         oUl.οnmοuseοut=function(){
             timerId=setInterval(function(){
         	 move(5);
         	 },30);
        }
    function move(speed){
             var pad=oUl.offsetLeft;
         	 if(pad>=0){
               oUl.style.left=-oUl.offsetWidth/2+'px';
         	 }
         	 if(pad<=-oUl.offsetWidth/2){
                 oUl.style.left=0;
         	 }
         	 oUl.style.left=oUl.offsetLeft+speed+'px';
         };
    };	
    </script>
    </head>
    <body>
    <div id="frame">
    	<ul id="ul1">
    		<li><img src="./images/test/1.jpg"/></li>
    		<li><img src="./images/test/2.jpg"/></li>
    		<li><img src="./images/test/3.png"/></li>
    		<li><img src="./images/test/4.jpg"/></li>
    	</ul>
    </div>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，144人围观）

还没有评论，来说两句吧...

相关阅读

相关 javascript 实现全屏滚动

全屏滚动的过程会逐步优化，从最基本的功能开始。全屏滚动每张图都占满整个浏览器窗口，当滑动鼠标或者触摸板时，图片切换。效果可以看到，滑动鼠标或者触摸板时，

缺乏、安全感/ 2022年11月25日 00:44/ 0 赞/ 183 阅读

相关 html实现图片自动滚动效果,js实现图片左右滚动效果

需求：页面显示教师信息列表，列表中每一条数据显示图片滚动插件，每张图片的长宽及长宽比例各不相同。前提条件：美工把静态页面写好 HTML代码： @using Models

曾经终败给现在/ 2022年10月05日 12:44/ 0 赞/ 276 阅读

相关 javaScript实现图片滚动

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" > <title>Demo Te

迷南。/ 2022年08月10日 11:49/ 0 赞/ 145 阅读

相关图片滚动...............

模仿的google的一个效果 [http://www.google.cn/help/ig/art/ ][http_www.google.cn_help_ig_art_]

电玩女神/ 2022年08月06日 11:16/ 0 赞/ 131 阅读

相关 Javascript基础——利用定时器实现的图片无缝滚动(offsetLeft)

1、无缝滚动原理：（1）让div动起来，让ul一直向左/向右移动；（2）即利用定时器让物体从左到右或从右到左进行滚动。采用offsetLeft——如oU

柔光的暖阳◎/ 2022年07月15日 06:30/ 0 赞/ 160 阅读

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

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

本是古典何须时尚/ 2022年07月14日 11:18/ 0 赞/ 133 阅读

相关 javascript实现滚动窗口

一.实现的效果图 ![20181107180155309.gif][] 二.涉及到的知识点 window.open();方法用于打开一个新的浏览器窗口或查找一个

红太狼/ 2022年04月18日 03:10/ 0 赞/ 225 阅读

相关 javascript实现单张或多张图片持续无缝滚动

javascript实现单张或多张图片持续无缝滚动图片滚动原理同图片轮播原理，同样也适用于文字滚动等一系列滚动，通过复制最后一张图片或最后一堆文字插入第一行，或复制第一...

红太狼/ 2020年06月06日 16:51/ 0 赞/ 545 阅读

相关 js实现图片无缝滚动

js实现图片无缝滚动实现原理：图片滚动原理同图片轮播原理，同样也适用于文字滚动等一系列滚动，通过复制最后一张图片或最后一堆文字插入第一行，或复制第一张图片或一堆文字插...

红太狼/ 2020年06月03日 13:47/ 0 赞/ 735 阅读

相关 javascript实现单张或多张图片持续无缝滚动

想要实现图片持续滚动，既然使用js,就千万不要加css动画、过渡等相关样式，如果想要滚动的平滑一下，可以一像素一像素的感动，则很平滑，如果加了过渡动画，当图片重置为0时，...

朱雀/ 2020年05月10日 16:51/ 0 赞/ 627 阅读