我自己也在用的,网页常用!分享出来

  最简单易懂源码

<!--下面是向上滚动代码-->

<div id=butong_net_top style=overflow:hidden;height:;width:;>
<div id=butong_net_top1>
<img src="插入需要滚动的图片">
<img src="插入需要滚动的图片">
<img src="插入需要滚动的图片">
<img src="插入需要滚动的图片">
<img src="插入需要滚动的图片">
</div>
<div id=butong_net_top2></div>
</div>
<script>
var speed=
butong_net_top2.innerHTML=butong_net_top1.innerHTML //克隆butong_net_top1为butong_net_top2
function Marquee1(){
//当滚动至butong_net_top1与butong_net_top2交界时
if(butong_net_top2.offsetTop-butong_net_top.scrollTop<=)&<;&<;
butong_net_top.scrollTop-=butong_net_top1.offsetHeight //butong_net_top跳到最顶端
else{
butong_net_top.scrollTop++;
}
}
var MyMar1=setInterval(Marquee1,speed)//设置定时器
//鼠标移上时清除定时器达到滚动停止的目的
butong_net_top.οnmοuseοver=function() {clearInterval(MyMar1)}
//鼠标移开时重设定时器
butong_net_top.οnmοuseοut=function(){MyMar1=setInterval(Marquee1,speed)}
</script> <!--向上滚动代码结束--> <br> <!--下面是向下滚动代码--> <div id=butong_net_bottom style=overflow:hidden;height:;width:;>
<div id=butong_net_bottom1>
<img src="插入需要滚动的图片">
<img src="插入需要滚动的图片">
<img src="插入需要滚动的图片">
<img src="插入需要滚动的图片">
<img src="插入需要滚动的图片">
</div>
<div id=butong_net_bottom2></div>
</div>
<script>
var speed=
butong_net_bottom2.innerHTML=butong_net_bottom1.innerHTML
butong_net_bottom.scrollTop=butong_net_bottom.scrollHeight
function Marquee2(){
if(butong_net_bottom1.offsetTop-butong_net_bottom.scrollTop>=)
butong_net_bottom.scrollTop+=butong_net_bottom2.offsetHeight
else{
butong_net_bottom.scrollTop--
}
}
var MyMar2=setInterval(Marquee2,speed)
butong_net_bottom.οnmοuseοver=function() {clearInterval(MyMar2)}
butong_net_bottom.οnmοuseοut=function() {MyMar2=setInterval(Marquee2,speed)}
</script> <!--向下滚动代码结束--> <br> <!--下面是向左滚动代码--> <div id="butong_net_left" style="overflow:hidden;width:500px;">
<table cellpadding="" cellspacing="" border="">
<tr><td id="butong_net_left1" valign="top" align="center">
<table cellpadding="" cellspacing="" border="">
<tr align="center">
<td><img src="<img src="插入需要滚动的图片"></td>
<td><img src="插入需要滚动的图片"></td>
<td><img src="插入需要滚动的图片"></td>
<td><img src="插入需要滚动的图片"></td>
<td><img src="插入需要滚动的图片"></td>
</tr>
</table>
</td>
<td id="butong_net_left2" valign="top"></td>
</tr>
</table>
</div>
<script>
var speed=//速度数值越大速度越慢
butong_net_left2.innerHTML=butong_net_left1.innerHTML
function Marquee3(){
if(butong_net_left2.offsetWidth-butong_net_left.scrollLeft<=)
butong_net_left.scrollLeft-=butong_net_left1.offsetWidth
else{
butong_net_left.scrollLeft++
}
}
var MyMar3=setInterval(Marquee3,speed)
butong_net_left.οnmοuseοver=function() {clearInterval(MyMar3)}
butong_net_left.οnmοuseοut=function() {MyMar3=setInterval(Marquee3,speed)}
</script> <!--向左滚动代码结束--> <br> <!--下面是向右滚动代码--> <div id="butong_net_right" style="overflow:hidden;width:500px;">
<table cellpadding="" cellspacing="" border="">
<tr><td id="butong_net_right1" valign="top" align="center">
<table cellpadding="" cellspacing="" border="">
<tr align="center">
<td><img src="插入需要滚动的图片"></td>
<td><img src="插入需要滚动的图片"></td>
<td><img src="插入需要滚动的图片"></td>
<td><img src="插入需要滚动的图片"></td>
<td><img src="插入需要滚动的图片"></td>
</tr>
</table>
</td>
<td id="butong_net_right2" valign="top"></td>
</tr>
</table>
</div>
<script>
var speed=//速度数值越大速度越慢
butong_net_right2.innerHTML=butong_net_right1.innerHTML
function Marquee4(){
if(butong_net_right.scrollLeft<=)
butong_net_right.scrollLeft+=butong_net_right2.offsetWidth
else{
butong_net_right.scrollLeft--
}
}
var MyMar4=setInterval(Marquee4,speed)
butong_net_right.οnmοuseοver=function() {clearInterval(MyMar4)}
butong_net_right.οnmοuseοut=function() {MyMar4=setInterval(Marquee4,speed)}
</script> <!--向右滚动代码结束-->

做项目的时候我就是拿这个来用,分享给大家源码出自:https://blog.csdn.net/sikong00/article/details/78628984

html 图片滚动代码的更多相关文章

  1. HTML网页图片滚动代码

    <!--下面是向上滚动代码--> <div id=butong_net_top style=overflow:hidden;height:100;width:90;> < ...

  2. JS图片滚动代码(无缝、平滑)

    非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止.它的特点是JS和图片地址分离,这样做你就经易的从数据库动态调用每张图片的地址,方便控制,因此它非常的应用. <!DOCTY ...

  3. jquery图片无缝滚动代码左右 上下无缝滚动图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 原生js实现tab选项卡里内嵌图片滚动特效代码

    <!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...

  5. 常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全

    innerHTML:    设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度. scrollLeft:   设置或获取位于对象左边界和窗口中目前可见内容的 ...

  6. 图片滚动(UP)的JS代码详解(offsetTop、scrollTop、offsetHeigh)【转】

    源地址 信息技术教材配套的光盘里有一段设置图片滚动的JS代码,与网络上差不多,实现思路:一个设定高度并且隐藏超出它高度的内容的容器demo,里面放demo1和 demo2,demo1是滚动内容,dem ...

  7. 可以左右移动横向无缝滚动的JS图片展示代码

    在酷站网站下的,具体路径忘了,稍微改了一下,让它看起来像组滑动 1)被引用的js文件ScrollPic.js ?){){i+=l.length;)I=document.cookie.length;o= ...

  8. 图片滚动js代码

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  9. 图片左右循环连续滚动代码,解决marquee的留白问题

    <marquee ONMOUSEOUT="this.start()" ONMOUSEOVER="this.stop()" DIRECTION=" ...

随机推荐

  1. Java后端面经总结:拿下蚂蚁金服美团头条 offer 秘诀

    笔者在面过 猿辅导,去哪儿,旷视, 陌陌,头条, 阿里, 快手, 美团, 腾讯之后,除了收获一大堆面试问题,还思考到如何成为面试官眼中的”爱技术,爱思考,靠谱,有潜力候选人的”一些”套路”. 面试问题 ...

  2. java XML解析防止外部实体注入

    /** * 增加防止部实体注入逻辑 * <功能详细描述> * @param reader * @throws SAXException * @see [类.类#方法.类#成员] */ pu ...

  3. Deep Q Network(DQN)原理解析

    1. 前言 在前面的章节中我们介绍了时序差分算法(TD)和Q-Learning,当状态和动作空间是离散且维数不高时可使用Q-Table储存每个状态动作对的Q值,而当状态和动作空间是高维连续时,使用Q- ...

  4. 201871010126 王亚涛《面向对象程序设计(Java)》第十二周学习总结

      内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p/ ...

  5. 283.移动零 关于列表list与remove原理*****(简单)

    题目: 给定一个数组 nums,编写一个函数将所有 0 移动到数组的末尾,同时保持非零元素的相对顺序. 注意,该题目要求不开辟行的数组空间,在原数据上进行操作. 示例: 输入: [0,1,0,3,12 ...

  6. 配置nginx 支持php

    一.确保php-fpm已经启动: ps -A | grep php-fpm 如果没有启动,则启动php-fpm: /usr/local/sbin/php-fpm 查看是否启动成功: root@iZ25 ...

  7. Nginx配置文件nginx.conf(八)

    原文链接:https://www.cnblogs.com/knowledgesea/p/5175711.html 在nginx.conf的注释符号是#. 默认的nginx.conf内容为: #user ...

  8. 【使用篇二】SpringBoot异常处理(9)

    异常的处理方式有多种: 自定义错误页面 @ExceptionHandler注解 @ControllerAdvice+@ExceptionHandler注解 配置SimpleMappingExcepti ...

  9. Docker容器数据卷(七)

    Docker致力于: 将运用与运行的环境打包形成容器运行 ,运行可以伴随着容器,但是我们对数据的要求希望是持久化的 容器之间希望有可能共享数据 Docker容器产生的数据,如果不通过docker co ...

  10. VIJOS-P1045 Kerry 的电缆网络

    JDOJ 1229: VIJOS-P1045 Kerry 的电缆网络 https://neooj.com/oldoj/problem.php?id=1229 Description         K ...