常用JS图片无缝滚动代码大全

最新推荐文章于 2023-06-15 22:00:00 发布
最新推荐文章于 2023-06-15 22:00:00 发布
阅读量124 收藏
点赞数
分类专栏： javascript 文章标签： html web javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_4187/article/details/82538196
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>[b]向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)</[/b]title>
</head>
<body>
<div id="colee" style="overflow:hidden;height:253px;width:410px;">
<div id="colee1">
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
</div>
<div id="colee2"></div>
</div>
<script>
var speed=30;
var colee2=document.getElementById("colee2");
var colee1=document.getElementById("colee1");
var colee=document.getElementById("colee");
colee2.innerHTML=colee1.innerHTML; //克隆colee1为colee2
function Marquee1(){
//当滚动至colee1与colee2交界时
if(colee2.offsetTop-colee.scrollTop<=0){
colee.scrollTop-=colee1.offsetHeight; //colee跳到最顶端
}else{
colee.scrollTop++
}
}
var MyMar1=setInterval(Marquee1,speed)//设置定时器
//鼠标移上时清除定时器达到滚动停止的目的
colee.οnmοuseοver=function() {clearInterval(MyMar1)}
//鼠标移开时重设定时器
colee.οnmοuseοut=function(){MyMar1=setInterval(Marquee1,speed)}
</script>
[b]<!--向上滚动代码结束-->[/b]
<br>
[b]<!--下面是向下滚动代码-->[/b]
<div id="colee_bottom" style="overflow:hidden;height:253px;width:410px;">
<div id="colee_bottom1">
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
</div>
<div id="colee_bottom2"></div>
</div>
<script>
var speed=30
var colee_bottom2=document.getElementById("colee_bottom2");
var colee_bottom1=document.getElementById("colee_bottom1");
var colee_bottom=document.getElementById("colee_bottom");
colee_bottom2.innerHTML=colee_bottom1.innerHTML
colee_bottom.scrollTop=colee_bottom.scrollHeight
function Marquee2(){
if(colee_bottom1.offsetTop-colee_bottom.scrollTop>=0)
colee_bottom.scrollTop+=colee_bottom2.offsetHeight
else{
colee_bottom.scrollTop--
}
}
var MyMar2=setInterval(Marquee2,speed)
colee_bottom.οnmοuseοver=function() {clearInterval(MyMar2)}
colee_bottom.οnmοuseοut=function() {MyMar2=setInterval(Marquee2,speed)}
</script>
[b]<!--向下滚动代码结束-->[/b]
<br>
[b]<!--下面是向左滚动代码-->[/b]
<div id="colee_left" style="overflow:hidden;width:500px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td id="colee_left1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
</tr>
</table>
</td>
<td id="colee_left2" valign="top"></td>
</tr>
</table>
</div>
<script>
//使用div时，请保证colee_left2与colee_left1是在同一行上.
var speed=30//速度数值越大速度越慢
var colee_left2=document.getElementById("colee_left2");
var colee_left1=document.getElementById("colee_left1");
var colee_left=document.getElementById("colee_left");
colee_left2.innerHTML=colee_left1.innerHTML
function Marquee3(){
if(colee_left2.offsetWidth-colee_left.scrollLeft<=0)//offsetWidth 是对象的可见宽度
colee_left.scrollLeft-=colee_left1.offsetWidth//scrollWidth 是对象的实际内容的宽，不包边线宽度
else{
colee_left.scrollLeft++
}
}
var MyMar3=setInterval(Marquee3,speed)
colee_left.οnmοuseοver=function() {clearInterval(MyMar3)}
colee_left.οnmοuseοut=function() {MyMar3=setInterval(Marquee3,speed)}
</script>
[b]<!--向左滚动代码结束-->[/b]
<br>
[b]<!--下面是向右滚动代码-->[/b]
<div id="colee_right" style="overflow:hidden;width:500px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td id="colee_right1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
</tr>
</table>
</td>
<td id="colee_right2" valign="top"></td>
</tr>
</table>
</div>
<script>
var speed=30//速度数值越大速度越慢
var colee_right2=document.getElementById("colee_right2");
var colee_right1=document.getElementById("colee_right1");
var colee_right=document.getElementById("colee_right");
colee_right2.innerHTML=colee_right1.innerHTML
function Marquee4(){
if(colee_right.scrollLeft<=0)
colee_right.scrollLeft+=colee_right2.offsetWidth
else{
colee_right.scrollLeft--
}
}
var MyMar4=setInterval(Marquee4,speed)
colee_right.οnmοuseοver=function() {clearInterval(MyMar4)}
colee_right.οnmοuseοut=function() {MyMar4=setInterval(Marquee4,speed)}
</script>
[b]<!--向右滚动代码结束-->[/b]</body>
</html>
iteye_4187
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现图片滚动
学习的约束力，提醒自己
03-23 3145
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">向上下左右不间断无缝滚动图片的效果(兼容火狐和IE) 源码爱好者收集 codefans.netvar speed=30;var colee2=document.getElementById("colee2");var cole
常用JS图片滚动（无缝、平滑、上下左右滚动）代码大全
珍惜所有的一切
11-18 2568
常用JS图片滚动（无缝、平滑、上下左右滚动）代码大全   innerHTML:    设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度。 scrollLeft:   设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:    设置或获取位于对象最顶端和窗口中可见内容的最顶端之间
js 图片滚动代码。
erfeiffff的博客
03-23 354
html 布局结构 <table width="2200px" id="demoTable" border=0 align=center cellpadding=1 cellspacing=1 cellspace=0 > <tr> <td valign=top id=marquePic1> <table width='1...
滚动图片JS代码
weixin_30773135的博客
02-21 98
借鉴了博客园上 http://www.cnblogs.com/blueSkys/archive/2010/03/15/1686476.html 该博主的滚动图片代码。 修改了一个div版本了，向左滚动图片代码： <html><head><title></title></head><body><!--下面是向左滚动...
JS滚动图片代码（含横向和纵向）
weixin_33752045的博客
08-10 138
1.横向 &lt;div id=demo style="overflow:hidden;width:200px;border:2px solid #e0e0e0;padding:2px;" onmouseover="stopscroll();" onmouseout="doscroll()"&gt; &lt;div id="demo1" style="white-space:n
常用JS图片滚动（无缝、平滑、上下左右滚动）代码大全(推荐)
10-20
JavaScript图片滚动是一种常见的网页动态效果，它可以为用户提供更生动、吸引人的浏览体验。本文将详细介绍如何使用JavaScript实现图片的无缝、平滑、上下左右滚动效果。 首先，我们要明白JavaScript图片滚动的基本...
JS实现图片无间断滚动代码汇总
01-19
本文整理汇总了JavaScript实现图片滚动的常见代码，可以实现向上下左右四个方向的无缝滚动的效果，这是前端设计开发时常用的一个图片特效，你可只用其中的一种滚动效果。 具体的实例代码如下： <!DOCTYPE ...
js实现图片无缝滚动或者文字滚动
11-16
而`无缝滚动.html`则可能是一个图片无缝滚动的示例，它可能包含了JS代码来处理图片的显示顺序和动画效果。 4. **实现步骤**： - 首先，需要创建HTML结构，包括要滚动的图片或文字元素。 - 其次，编写CSS样式，...
相册上下无缝滚动展示特效
04-25
此外，"JS常用代码"标签提示我们，这种特效可能包含了一些常见的JavaScript编程模式和函数，如事件监听器（event listeners）、DOM操作（修改元素样式、添加/删除类名等）、定时器（timers）等。这些代码可能是可...
常用JS图片滚动（无缝、平滑、上下左右滚动）代码
11-30
本源代码收集了一些常用的网页图片滚动，无缝滚动，效果很平滑，包括上下左右四个方向的滚动，或许你现在用不上这些代码，不过先收藏起来以备后用哦。
网页制作图片滚动特效代码
01-02
在网页制作过程中，添加一系列的图片，并实现滚动效果！
图片滚动js代码
loongwong2011的博客
07-15 374
轮播图实现效果见下图，图片能自己轮播，点击左右按钮进行翻页轮播，鼠标悬停图片或者标题上，停止轮播； 效果图为： 复制代码代码如下: 带左右箭头图片轮播 .rollBox{width:770px;height:260px;overflow:hidden;padding:10px;margin:0 auto;border:1px soli
简洁的JS图片滚动代码
风达的专栏
10-05 3198
非常平滑的JS图片滚动特效代码，无缝循环，速度可自定义，鼠标悬停时停止。 它的特点是JS和图片地址分离，这样做你就经易的从数据库动态调用每张图片的地址，方便控制，因此它非常的有用。 图片滚动 <!-- #demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; width: 500px; } #d
【前端】实现图片无缝滚动·教程
qq_45677671的博客
02-04 570
文章目录效果图：需求分析：源代码：所用图片： 效果图： 需求分析： 实现无缝滚动 源代码： HTML部分 <div id="box"> <ul id="u"> <li><img src="a.jpg" alt="" /></li> <li><img src="b.jpg" alt="" /></li> <li><img src="c.jpg" alt="" />&l
【图片轮播】Vue如何实现移动端图片轮播效果，支持左右滑动（附图文及代码）
赏樱看雪撸代码
06-15 8987
vue实现移动端图片轮播，移动端相册制作，vant3实现图片轮播效果，swipe轮播实现过程，swipe轮播组件实现照片轮播，vant3中swipe轮播组件应用。
图片滑动代码
小麦先生
08-03 2563
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档 #picBox_top{width:950px; height:
js简单的照片滑动
weixin_44808327的博客
11-18 258
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .image{ width: 999999999999px; overflow: hidden; } *{ margin: 0; padding: 0; }
js图片无缝滚动的原理
最新发布
08-11
JavaScript图片无缝滚动的原理是通过设置定时器，不断改变图片容器的left值来实现。 1. 首先，确定图片容器的宽度，该容器需要包含要滚动的图片。 2. 然后，计算每次滚动的距离，可以根据需求设置滚动速度。 3. 使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值