<!--下面是向上滚动代码-->
<div id=butong_net_top style=overflow:hidden;height:100;width:90;>
<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=30
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<=0)&<60;&<60;
butong_net_top.scrollTop-=butong_net_top1.offsetHeight //butong_net_top跳到最顶端
else{
butong_net_top.scrollTop++;
}
}
var MyMar1=setInterval(Marquee1,speed)//设置定时器
//鼠标移上时清除定时器达到滚动停止的目的
butong_net_top.onmouseover=function() {clearInterval(MyMar1)}
//鼠标移开时重设定时器
butong_net_top.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
</script>
<!--向上滚动代码结束-->
<br>
<!--下面是向下滚动代码-->
<div id=butong_net_bottom style=overflow:hidden;height:100;width:90;>
<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=30
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>=0)
butong_net_bottom.scrollTop+=butong_net_bottom2.offsetHeight
else{
butong_net_bottom.scrollTop--
}
}
var MyMar2=setInterval(Marquee2,speed)
butong_net_bottom.onmouseover=function() {clearInterval(MyMar2)}
butong_net_bottom.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)}
</script>
<!--向下滚动代码结束-->
<br>
<!--下面是向左滚动代码-->
<div id="butong_net_left" style="overflow:hidden;width:500px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td id="butong_net_left1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<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=30//速度数值越大速度越慢
butong_net_left2.innerHTML=butong_net_left1.innerHTML
function Marquee3(){
if(butong_net_left2.offsetWidth-butong_net_left.scrollLeft<=0)
butong_net_left.scrollLeft-=butong_net_left1.offsetWidth
else{
butong_net_left.scrollLeft++
}
}
var MyMar3=setInterval(Marquee3,speed)
butong_net_left.onmouseover=function() {clearInterval(MyMar3)}
butong_net_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}
</script>
<!--向左滚动代码结束-->
<br>
<!--下面是向右滚动代码-->
<div id="butong_net_right" style="overflow:hidden;width:500px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td id="butong_net_right1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<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=30//速度数值越大速度越慢
butong_net_right2.innerHTML=butong_net_right1.innerHTML
function Marquee4(){
if(butong_net_right.scrollLeft<=0)
butong_net_right.scrollLeft+=butong_net_right2.offsetWidth
else{
butong_net_right.scrollLeft--
}
}
var MyMar4=setInterval(Marquee4,speed)
butong_net_right.onmouseover=function() {clearInterval(MyMar4)}
butong_net_right.onmouseout=function() {MyMar4=setInterval(Marquee4,speed)}
</script>
<!--向右滚动代码结束-->
分享到:
相关推荐
这是一个网页图片无缝循环滚动html代码,可以插入到文件中的任意位置。
html5实现的图片滚动效果.里面带有几张照片演示,体积略有点大
01 HTML5 + PHP 清爽靓丽风格全站生成静态深度seo整站纯绿色代码...................06 大气时间轴图片滚动扁平化风格html5模板07 收集一些HTML5+CSS3 +JS的网页常用实例源代码08 灰色居左简洁大气的HTML5网站模板09...
基本上实现了悬停功能.实现网页图片无缝滚动代码,更改滚动方式
4图片滚动的Flash广告代码,宽屏图片切换,调用的SWF框架,参数设置直接在调用时自定义,在index.html页面里面调用外部XML,设置图片路径和广告链接。
适合游戏类网站的JS图片滚动型焦点图代码,来自某门户网站的游戏频道,一次滚动切换多张图片的焦点图特效代码,左右两头的小箭头就是控制滚动的,图片可以3个3个一起添,这样可很好的完成批次滚动,做游戏官网的倒是...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <!-- saved from url=(0039)http://www.youthhero.com/banzhu/ckh.asp -->
用与课程公告文字滚动,或者图片滚动都可以用词代码,把里面的文字修改一下,就成了你的代码。
jquery响应式布局网页按钮控制商品列表图片左右滚动,适用于商城商品列表滚动展示效果。
页面精美小清新,包含div+css、图片、轮播图、JS滚动、Table布局、登录框,比较简单容易上手。 【大学生DW网页设计成品 大学校园简介静态HTML网页作业制作 dreamweaver网页作业代码下载】
静态HTML家居装修网页设计成品共5个页面,使用JS制作了图片滚动,使用dreamweaver采用DIV CSS布局制作。
HTML WEB前端大屏页面源代码 大数据可视化WEB页面源代码
html5+jquery 写的一个横向滚动条,通熟易懂,很实用,而且是自适应的,代码简洁,即使是初学者也可以看懂
照片自动滚动网页实例,这个实例 需要大家自己按照实际情况分修改
网页设计 随鼠标滚动的广告图片特效
基于JavaScript的网页上部大Banner广告特效及图片横向滚动代码,点击两侧的箭头即可实现图片按批次滚动,上部是自动切换的大Banner广告效果,可以广泛应用于许多网站,但是需要你有一定的HTML和CSS知识才可以,否则...
html5实现的页面滚动图片动画加载特效源码
原生JS图片循环滚动代码,很常用的网页特效,页面加载默认图片自动向右滚动,当鼠标移到图片列表的右边时,图片向左滚动,鼠标移到图片列表的左边时,图片向右滚动,鼠标移动图片列表中间时停止滚动,鼠标移开图片...