图片上下左右滚动实例

最新推荐文章于 2021-06-10 02:52:14 发布
原创 最新推荐文章于 2021-06-10 02:52:14 发布 · 853 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#border #function #div #table #javascript

向上滚动图片

<body>
<div id=demo style="background: #ffffff; overflow: hidden; width:400px; color: #0000ff; height: 500px"> 
    <div id=demo1> 
        <img id="img0" height=500px alt="" src="http://photo8.yupoo.com/20070730/110535_1428097478_yuniakfi.jpg" width=375px border=0 />
        <img id="img1" height=500px alt="" src="http://photo8.yupoo.com/20070730/110558_1774342009_clqycalf.jpg" width=375px border=0 />
        <img id="img2" height=500px alt="" src="http://photo8.yupoo.com/20070730/110537_739931759_gxvvqlxy.jpg" width=375px border=0 />
        <img id="img3" height=500px alt="" src="http://photo6.yupoo.com/20070730/110537_666202854_mpbiqknx.jpg" width=375px border=0 />
        <img id="img4" height=500px alt="" src="http://photo6.yupoo.com/20070730/110536_205022051_orocyrqg.jpg" width=375px border=0 />
        <img id="img5" height=500px alt="" src="http://photo8.yupoo.com/20070730/110535_1653741312_foruuosr.jpg" width=375px border=0 />
    </div>
    <div id=demo2>
    </div>
</div>

<script language="javascript">
    var speed=1;
    demo2.innerHTML=demo1.innerHTML;
    function Marquee(){
        if(demo2.offsetTop-demo.scrollTop<=0){
            demo.scrollTop-=demo1.offsetHeight;
        }
        else{
            demo.scrollTop++;
        }
    }
    var MyMar=setInterval(Marquee,speed);
    demo.onmouseover=function() {clearInterval(MyMar)};
    demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
</script>
</body>

 

向下滚动图片

<body>
<div id=demo style="background: #ffffff; overflow: hidden; width:400px; color: #0000ff; height: 500px"> 
    <div id=demo1> 
        <img id="img0" height=500px alt="" src="http://photo8.yupoo.com/20070730/110535_1428097478_yuniakfi.jpg" width=375px border=0 />
        <img id="img1" height=500px alt="" src="http://photo8.yupoo.com/20070730/110558_1774342009_clqycalf.jpg" width=375px border=0 />
        <img id="img2" height=500px alt="" src="http://photo8.yupoo.com/20070730/110537_739931759_gxvvqlxy.jpg" width=375px border=0 />
        <img id="img3" height=500px alt="" src="http://photo6.yupoo.com/20070730/110537_666202854_mpbiqknx.jpg" width=375px border=0 />
        <img id="img4" height=500px alt="" src="http://photo6.yupoo.com/20070730/110536_205022051_orocyrqg.jpg" width=375px border=0 />
        <img id="img5" height=500px alt="" src="http://photo8.yupoo.com/20070730/110535_1653741312_foruuosr.jpg" width=375px border=0 />
    </div>
    <div id=demo2>
    </div>
</div>

<script> 
    var speed=1 
    demo2.innerHTML=demo1.innerHTML 
    demo.scrollTop=demo.scrollHeight 
    function Marquee(){ 
        if(demo1.offsetTop-demo.scrollTop>=0) 
            demo.scrollTop+=demo2.offsetHeight 
        else{ 
            demo.scrollTop-- 
        } 
    } 
    var MyMar=setInterval(Marquee,speed) 
    demo.onmouseover=function() {clearInterval(MyMar)} 
    demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} 
</script> 
</body>

 

向右滚动图片

<body>
<div id=demo style="background: #ffffff; overflow: hidden; width:670px; color: #0000ff; height: 500px">
    <table cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td id="demo1" valign="top" align="center">
                <table cellpadding="2" cellspacing="0" border="0">
                    <tr align="center">
                        <td><img id="img0" height=500px alt="" src="http://photo8.yupoo.com/20070730/110535_1428097478_yuniakfi.jpg" width=375px border=0 /></td>
                        <td><img id="img1" height=500px alt="" src="http://photo8.yupoo.com/20070730/110535_1653741312_foruuosr.jpg" width=375px border=0 /></td>
                        <td><img id="img2" height=500px alt="" src="http://photo6.yupoo.com/20070730/110536_205022051_orocyrqg.jpg" width=375px border=0 /></td>
                        <td><img id="img3" height=500px alt="" src="http://photo6.yupoo.com/20070730/110537_666202854_mpbiqknx.jpg" width=375px border=0 /></td>
                        <td><img id="img4" height=500px alt="" src="http://photo8.yupoo.com/20070730/110537_739931759_gxvvqlxy.jpg" width=375px border=0 /></td>
                        <td><img id="img5" height=500px alt="" src="http://photo8.yupoo.com/20070730/110558_1774342009_clqycalf.jpg" width=375px border=0 /></td>
                    </tr>
                </table>
            </td>
            <td id="demo2" valign="top"></td>
        </tr>
      </table>
</div>

<script>
    var speed=1
    demo2.innerHTML=demo1.innerHTML
    function Marquee(){
        if(demo.scrollLeft<=0)
            demo.scrollLeft+=demo2.offsetWidth
        else{
            demo.scrollLeft--
        }
    }
    var MyMar=setInterval(Marquee,speed)
    demo.onmouseover=function() {clearInterval(MyMar)}
    demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
</body>

 

向左滚动图片

<body>
<div id=demo style="background: #ffffff; overflow: hidden; width:670px; color: #0000ff; height: 500px">
    <table cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td id="demo1" valign="top" align="center">
                <table cellpadding="2" cellspacing="0" border="0">
                    <tr align="center">
                        <td><img id="img0" height=500px alt="" src="http://photo8.yupoo.com/20070730/110535_1428097478_yuniakfi.jpg" width=375px border=0 /></td>
                        <td><img id="img1" height=500px alt="" src="http://photo8.yupoo.com/20070730/110535_1653741312_foruuosr.jpg" width=375px border=0 /></td>
                        <td><img id="img2" height=500px alt="" src="http://photo6.yupoo.com/20070730/110536_205022051_orocyrqg.jpg" width=375px border=0 /></td>
                        <td><img id="img3" height=500px alt="" src="http://photo6.yupoo.com/20070730/110537_666202854_mpbiqknx.jpg" width=375px border=0 /></td>
                        <td><img id="img4" height=500px alt="" src="http://photo8.yupoo.com/20070730/110537_739931759_gxvvqlxy.jpg" width=375px border=0 /></td>
                        <td><img id="img5" height=500px alt="" src="http://photo8.yupoo.com/20070730/110558_1774342009_clqycalf.jpg" width=375px border=0 /></td>
                    </tr>
                </table>
            </td>
            <td id="demo2" valign="top"></td>
        </tr>
      </table>
</div>

<script language="javascript">
    var speed=1
    demo2.innerHTML=demo1.innerHTML
    function Marquee(){
        if(demo2.offsetWidth-demo.scrollLeft<=0)
            demo.scrollLeft-=demo1.offsetWidth
        else{
            demo.scrollLeft++
        }
    }
    var MyMar=setInterval(Marquee,speed)
    demo.onmouseover=function() {clearInterval(MyMar)}
    demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
</body>

 

marquees方法向上滚动图片

<body>
<div id="marquees" style="background: #ffffff; overflow: hidden; width:400px; color: #0000ff; height: 500px">   
      <img id="img0" height=500px alt="" src="http://photo8.yupoo.com/20070730/110558_1774342009_clqycalf.jpg" width=375px border=0 />
      <br>
      <img id="img1" height=500px alt="" src="http://photo8.yupoo.com/20070730/110537_739931759_gxvvqlxy.jpg" width=375px border=0 />
      <br>
      <img id="img2" height=500px alt="" src="http://photo6.yupoo.com/20070730/110537_666202854_mpbiqknx.jpg" width=375px border=0 />
      <br>
      <img id="img3" height=500px alt="" src="http://photo6.yupoo.com/20070730/110536_205022051_orocyrqg.jpg" width=375px border=0 />
      <br>
      <img id="img4" height=500px alt="" src="http://photo8.yupoo.com/20070730/110535_1653741312_foruuosr.jpg" width=375px border=0 />
      <br>
      <img id="img5" height=500px alt="" src="http://photo8.yupoo.com/20070730/110535_1428097478_yuniakfi.jpg" width=375px border=0 />
      <br> 
</div>     

<script language="JavaScript">
    marqueesHeight=200;   
    stopscroll=false;  
    with(marquees){   
        style.width=0;   
        style.height=marqueesHeight;   
        style.overflowX="visible";   
        style.overflowY="hidden";   
        noWrap=true;   
        onmouseover=new   Function("stopscroll=true");   
        onmouseout=new   Function("stopscroll=false");   
    }
    
    document.write('<div   id="templayer"   style="position:absolute;z-index:1;visibility:hidden"></div>');    
    preTop=0;   currentTop=0;
    
    function   init(){   
        templayer.innerHTML="";   
        while(templayer.offsetHeight<marqueesHeight){   
            templayer.innerHTML+=marquees.innerHTML;   
        }   
        marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;   
        setInterval("scrollUp()",10);//越大越慢   
    }  
   
    document.body.onload=init;   
    
    function   scrollUp(){   
        if(stopscroll==true)   return;   
        preTop=marquees.scrollTop;   
        marquees.scrollTop+=1;   
        if(preTop==marquees.scrollTop){   
            marquees.scrollTop=templayer.offsetHeight-marqueesHeight;   
            marquees.scrollTop+=1;   
        }   
    }   
</script> 
</body>
超简单的图片左右切换滑动
weixin_34247299的博客
03-18 1万+
网上看过很多图片左右切换滑动的效果，不过大都是使用插件实现。插件虽方便，但是对于新手的学习并不是最好的。本文使用jquery这个由原生的JavaScript封装的库，用最简短的代码实现此功能效果预览如下图：代码部分（直接复制代码便可使用，注意对应的图片路径改成自己的图片路径，图片大小建议300*300）<!DOCTYPE html> <html> <head> ...
JS实现的相册图片左右滚动完整实例
11-29
本文实例讲述了JS实现的相册图片左右滚动效果。分享给大家供大家参考，具体如下： 执行左移右移函数： var $get = function(id) { return "string" == typeof id ? document.getElementById(id) : id; }; var Extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } return destination; } v
相册图片左右滚动完整实例
weixin_34280237的博客
06-27 631
代码 执行左移右移函数：var$get=function(id){return"string"==typeofid?document.getElementById(id):id;};varExtend=function(destination,source){for(varpropertyinsource){dest...
相册左右滑动html,JS实现的相册图片左右滚动完整实例
weixin_39718286的博客
06-10 704
本文实例讲述了JS实现的相册图片左右滚动效果。分享给大家供大家参考，具体如下：执行左移右移函数：var $get = function(id) {return "string" == typeof id ? document.getElementById(id) : id;};var Extend = function(destination, source) {for (var property...
页面图片浮动左右滑动效果实现案例
ABCJIECBA的专栏
04-09 397
[img]http://dl.iteye.com/upload/attachment/0066/2240/73d1eb83-9286-3c7e-80fa-3d0fb6e422c6.jpg[/img] 核心代码： 1.css：16sucai.css html,body { height: 100%; margin: 0px; padding: 0px; }...
图片左右滚动特效，很简单，你绝对看的懂
04-19
这是一个左右图片滚动的特效，代码很短，但是功能却完成实现了，你绝对可以看的懂。
js实现图片上下左右滚动代码[参考].pdf
10-19
总的来说，这些代码实例展示了如何利用 JavaScript 和 CSS 实现图片的上下滚动效果。通过修改速度变量 `speed` 可以调整滚动速度，改变 `colee` 或 `colee_bottom` 的高度和宽度可以调整图片显示的数量和容器大小。...
javascript上下左右定时滚动插件
10-29
JavaScript 上下左右定时滚动插件是一种用于网页动态效果的代码，它可以实现文本或图片等内容在页面上自动循环滚动，提供了一种吸引用户注意力的方式。这种滚动通常被应用于新闻滚动、公告栏或者广告展示等场景。 ...
principle案例上下左右滚动效果.zip
05-08
这个“principle案例上下左右滚动效果.zip”压缩包文件似乎包含了一个小的演示项目，它可能是一个用于教学或者展示如何在移动应用中实现上下左右滚动效果的实例。 在移动应用设计中，滚动效果是非常常见且重要的一...
实用上下左右滚动的跑马灯JS
10-27
在本实例中，我们关注的是一个实现"实用上下左右滚动的跑马灯JS"的代码。这个效果是通过JavaScript语言来实现的，它可以将文本或图片等内容按照设定的方向（上、下、左、右）进行滚动展示，增加网站的互动性和用户...
图片左右循环滚动JS代码.zip
05-20
【标签】"图片滚动"指的是网页中图片的动态展示方式，即图片不是静止不动，而是按照某种规则（如左右滑动、上下滚动）进行切换。"js"代表JavaScript，这是一种广泛应用于网页开发的脚本语言，能实现各种动态效果。...
探探(百合网,珍爱网)卡片左右滑动效果，滑动流畅，卡片view无限重生
02-16
探探(百合网,珍爱网)卡片左右滑动效果，滑动流畅，卡片view无限重生,这个是androidStudio版本的,效果地址 http://blog.csdn.net/qq_21036939/article/details/50673900
卡片左右切换
07-28
利用DragHelper实现卡片左右切换
jQuery单排卡片左右滚动代码.zip
07-05
jQuery单排卡片左右滚动代码是一款通过左右箭头按钮控制滚动效果，鼠标悬停卡片高亮突出显示。
图片滚动（左右切换）
weixin_34377919的博客
07-02 232
2019独角兽企业重金招聘Python工程师标准>>> ...
css 实现 图片左右滑动查看的效果
业余前端的职业经历
01-21 1万+
其实除了除了轮播图的那种图片效果外，图片滑动查看的效果 在网站中引用也是很多的，特别是在移动端，pc端的也有 就是我们是通过鼠标点击滑动的效果 我们先来看下效果吧 这样的效果 其实没必要用到js 直接用纯css就能实现 思路大概是 父元素 包括一个子元素 然后 如果高度和子元素高度不一致的话 还得再竖向方向上设置一个 hidden 然后里面 子元素 要设置一个比较长的 宽度 父元素 设置 overflow-x : auto; 就可以了 我们看下代码实现吧 dom布局 ...
dw的php选择滑动图片效果,页面图片浮动左右滑动效果的简单实现案例
weixin_36070797的博客
04-13 2287
核心代码：1.css：16sucai.csshtml,body {height: 100%;margin: 0px;padding: 0px;}a {outline: none;}img{ border:0;}a img {vertical-align: top;}a img.last {margin-right: 0; }.box {width: 850px;height: auto;overf...
jQuery实现一个图片左右滚动
前端岚枫
09-03 2468
jQuery实现的一个图片左右循环滚动的例子， html代码如下：       我是第1张图片     我是第2张图片     我是第3张图片     我是第4张图片     我是第5张图片     我是第6张图片     我是第7张图片     我是第N张图片       当前显示的是第 1 张图片 css代码如下：
html图片左右无缝循环滚动示例
热门推荐
喻志强的博客
11-28 4万+
首先，最外层的宽高要给个固定值，然后给个overflow: hidden;，放不下的图片隐藏。 原理：（以左方向为例）先向左移动一个图片的宽度，此时第一个图片已经看不见了，这个时候将第一个标签元素克隆后追加到末尾，然后将第一个元素移除。达到循环滚动的效果。右移也是同理。下面是代码实现和demo<!DOCTYPE html> <html> <head> <meta charse
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值