js实现图片滚动

最新推荐文章于 2024-09-24 15:19:32 发布
最新推荐文章于 2024-09-24 15:19:32 发布
阅读量3.1k 收藏 2
点赞数 1
分类专栏： javascript 文章标签： function border table xhtml div html

<!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>向上下左右不间断无缝滚动图片的效果(兼容火狐和IE) 源码爱好者收集 codefans.net</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>

<!--向上滚动代码结束-->

<br>

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

<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>

<!--向下滚动代码结束-->

<br>

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

<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>

<!--向左滚动代码结束-->

<br>

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

<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>

<!--向右滚动代码结束-->
</body>
</html>

wangsky2
关注
专栏目录
常用JS图片滚动（无缝、平滑、上下左右滚动）代码大全
珍惜所有的一切
11-18 2661
常用JS图片滚动（无缝、平滑、上下左右滚动）代码大全   innerHTML:    设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度。 scrollLeft:   设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:    设置或获取位于对象最顶端和窗口中可见内容的最顶端之间
js 图片滚动代码。
erfeiffff的博客
03-23 387
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...
实现图片无限循环滚动的JavaScript特效
最新发布
weixin_35756690的博客
09-24 861
本文还有配套的精品资源，点击获取 简介：本文介绍了一个基于JavaScript的图片滚动特效实现方法，适用于网页设计中提升用户体验。通过定时器定期改变图片位置，利用HTML、CSS和JavaScript创建动态的图片滚动效果。代码示例展示了如何设置HTML结构、CSS样式以及JavaScript逻辑来实现这一特效。此外，还讨论了如何通过CSS3过渡效果、手动控制以及屏幕适配...
滚动图片JS代码
weixin_30773135的博客
02-21 110
借鉴了博客园上 http://www.cnblogs.com/blueSkys/archive/2010/03/15/1686476.html 该博主的滚动图片代码。 修改了一个div版本了，向左滚动图片代码： <html><head><title></title></head><body><!--下面是向左滚动...
JS滚动图片代码（含横向和纵向）
咖皮球文摘
12-16 1158
 横向onmouseout="doscroll()">图片URL" height=20 width=104 border=0>图片URL" height=20 width=104 border=0>var t=demo.scrollWidthdemo1.innerHTML+=demo1.innerHTMLfunction doMarquee(){demo.scrollLeft=
原生javascript实现图片滚动、延时加载功能
10-24
下面将详细解释如何使用原生JavaScript实现图片滚动、延时加载功能的思路与方法。 ### 知识点一：图片滚动加载原理 图片滚动加载的核心思想是懒加载（Lazy Loading），即只在用户滚动到图片即将进入可视区域时才...
HTML+CS+JS实现图片滚动
04-27
通过以上步骤，我们可以成功地使用HTML、CSS和JavaScript实现了图片滚动的功能。这个项目不仅展示了基本的前端开发技能，也体现了JavaScript库（如jQuery）在提升开发效率和实现复杂动画效果方面的优势。
JS实现图片滚动效果
11-30
在“JS实现图片滚动效果”中，我们通常会用到JavaScript的事件处理、定时器以及DOM操作等技术。例如，通过监听用户的行为（如点击按钮），触发图片的切换；使用setInterval或setTimeout函数创建定时器，实现自动轮播...
图片滚动js代码
loongwong2011的博客
07-15 393
轮播图实现效果见下图，图片能自己轮播，点击左右按钮进行翻页轮播，鼠标悬停图片或者标题上，停止轮播； 效果图为： 复制代码代码如下: 带左右箭头图片轮播 .rollBox{width:770px;height:260px;overflow:hidden;padding:10px;margin:0 auto;border:1px soli
简洁的JS图片滚动代码
风达的专栏
10-05 3222
非常平滑的JS图片滚动特效代码，无缝循环，速度可自定义，鼠标悬停时停止。 它的特点是JS和图片地址分离，这样做你就经易的从数据库动态调用每张图片的地址，方便控制，因此它非常的有用。 图片滚动 <!-- #demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; width: 500px; } #d
【前端】实现图片无缝滚动·教程
qq_45677671的博客
02-04 884
文章目录效果图：需求分析：源代码：所用图片： 效果图： 需求分析： 实现无缝滚动 源代码： 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
web前端js基础------制作滚动图片
m0_64148419的博客
11-07 1821
web前端基础使用JS制作一个滚动图片
【图片轮播】Vue如何实现移动端图片轮播效果，支持左右滑动（附图文及代码）
赏樱看雪撸代码
06-15 9679
vue实现移动端图片轮播，移动端相册制作，vant3实现图片轮播效果，swipe轮播实现过程，swipe轮播组件实现照片轮播，vant3中swipe轮播组件应用。
使用 HTML + CSS + JavaScript 实现无缝滚动轮播图
Allen-
11-05 7268
JavaScript 学习经典案例：使用 HTML + CSS + JavaScript 实现无缝滚动轮播图
图片滑动代码
小麦先生
08-03 2610
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 280
<!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; }
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值