html 图片滚动代码
我自己也在用的,网页常用!分享出来
最简单易懂源码
<!--下面是向上滚动代码--> <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 图片滚动代码的更多相关文章
- HTML网页图片滚动代码
<!--下面是向上滚动代码--> <div id=butong_net_top style=overflow:hidden;height:100;width:90;> < ...
- JS图片滚动代码(无缝、平滑)
非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止.它的特点是JS和图片地址分离,这样做你就经易的从数据库动态调用每张图片的地址,方便控制,因此它非常的应用. <!DOCTY ...
- jquery图片无缝滚动代码左右 上下无缝滚动图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 原生js实现tab选项卡里内嵌图片滚动特效代码
<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...
- 常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全
innerHTML: 设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度. scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的 ...
- 图片滚动(UP)的JS代码详解(offsetTop、scrollTop、offsetHeigh)【转】
源地址 信息技术教材配套的光盘里有一段设置图片滚动的JS代码,与网络上差不多,实现思路:一个设定高度并且隐藏超出它高度的内容的容器demo,里面放demo1和 demo2,demo1是滚动内容,dem ...
- 可以左右移动横向无缝滚动的JS图片展示代码
在酷站网站下的,具体路径忘了,稍微改了一下,让它看起来像组滑动 1)被引用的js文件ScrollPic.js ?){){i+=l.length;)I=document.cookie.length;o= ...
- 图片滚动js代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
- 图片左右循环连续滚动代码,解决marquee的留白问题
<marquee ONMOUSEOUT="this.start()" ONMOUSEOVER="this.stop()" DIRECTION=" ...
随机推荐
- Vue实战狗尾草博客管理系统第一章
Vue实战狗尾草博客后台管理系统第一章 这里准备采用的技术栈为:vue全家桶+element-ui 这里因为是后台管理系统,没有做SSR的必要.所以这里就采用前后端分离来昨晚这个项目~ 项目搭建 vu ...
- Python 报错 MySQLdb._exceptions.OperationalError: (2059, )
Python连接MySQL数据时:报错提示MySQLdb._exceptions.OperationalError: (2059, <NULL>). Python包: mysqlclien ...
- 关与 @EnableConfigurationProperties 注解
@EnableConfigurationProperties注解的作用是: 让使用 @ConfigurationProperties 注解的类生效. 当@EnableConfigurationProp ...
- Microsoft Surface 2019新品发布会汇总
Microsoft Surface 2019 新品发布会汇总 10月2日晚,微软举行了Microsoft Surface 2019秋季新品发布会,本次发布会涉及如下设备内容等: SurfaceLapt ...
- 关于DFS的理解
DFS(深度优先搜索)相当于暴力寻找有效解的过程 如果把多种情况写成一个树的方式 那么DFS的实质就是遍历所有分枝来寻找最优解 而DFS中遍历所有解的方式采用了我们称之为回溯法的东西 如图所示 图中的 ...
- python cookie登录DVWA,phpstudy搭建DVWA参考https://www.jianshu.com/p/97d874548300
import requestsheader={"User-Agent": "Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleW ...
- Spring Boot Quartz 动态配置,持久化
Quartz 是一个很强大的任务调度框架在SpringBoot中也很容易集成 添加依赖: <dependency> <groupId>org.springframework&l ...
- mysql性能优化随笔
mysql性能优化是一个很大的命题,这里只记录一下近期的一些小经验. 曾经以为看了点create table时加index的语法就觉得自己知道怎么做mysql优化了,后来又看了点介绍mysql索引底层 ...
- es6之后,真的不需要知道原型链了吗?
3月份几乎每天都能看到面试的人从我身边经过,前段时间同事聊面试话题提到了原型链,顿时激起了我在开始学习前端时很多心酸的回忆.第一次接触js的面向对象思想是在读<js高程设计>(红宝书)的时 ...
- Debian 9 部分快捷键失效问题
教程 具体修复过程: 安装gnome-screensaver包,重启恢复正常.