向上滚动，并且每张图片停两秒

最新推荐文章于 2021-06-09 19:06:38 发布
最新推荐文章于 2021-06-09 19:06:38 发布
阅读量1.2k 收藏
点赞数
分类专栏： JAVASCRIPT 文章标签： function javascript vbscript border html table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baby97/article/details/1429463
版权

用网上一段代码改写的。

用的图片是32X32。如要换图片只须替换脚本和样式中32就可以了。

<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<style type="text/css">
#ScrollArea {
 CLEAR: both; MARGIN: 0px 0px 0px 8px; OVERFLOW: hidden; WIDTH: 32px; HEIGHT: 32px
}
</style>
<script language="javascript">
var gScroll;
var gSpeed = 30;
var m = 0;

function fScroll() {
 var a = document.getElementById("ScrollArea");
 var b = document.getElementById("ScrollDiv1");
 if(a.scrollTop>=b.scrollHeight){
  a.scrollTop=0;
 }else{
  if(a.scrollTop % 32 == 0){
   if(m > 67){
    m = 0;
    a.scrollTop++;
   }
   else
    m = m + 1
  }
  else
   a.scrollTop++;
 }
}
function fStopScroll() {
 clearInterval(gScroll);
}
function fContScroll() {
 gScroll=setInterval(fScroll,gSpeed);
}
function fStartScroll() {
 document.getElementById('ScrollDiv2').innerHTML=document.getElementById('ScrollDiv1').innerHTML;
 var a = document.getElementById('ScrollDiv1');
 var b = a.getElementsByTagName('img');
 var c = a.getElementsByTagName('list');
 for(var i=0;i<b.length;i++){
  b[i].onmouseover = fStopScroll;
  b[i].onmouseout = fContScroll;
  b[i].parentNode.target = "_blank";
 }
 gScroll=setInterval(fScroll,gSpeed);
}
</script>
<body>
<div  id="ScrollArea">
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td id="ScrollDiv1"><table width="32" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><img src="1.gif" width="32" height="32"></td>
      </tr>
      <tr>
        <td><img src="122.gif" width="32" height="32"></td>
      </tr>
      <tr>
        <td><img src="12.gif" width="32" height="32"></td>
      </tr>
      <tr>
        <td><img src="1222.gif" width="32" height="32"></td>
      </tr>
    </table></td></tr>
 <tr>
 <td id="ScrollDiv2"></td>
  </tr>
</table>
</div>
   <script language="JavaScript" type="text/javascript">
<!--
var a = document.getElementById("ScrollArea");
a.scrollTop = 10*Math.floor(Math.random()*50)+100;
setTimeout("fStartScroll()",1000);
//-->
</script>
</body>
</html>
 

银狐被占用
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
无缝向上滚动（图片文字效果）
06-24
网页上出现的图片或文字向上滚动显示效果，很不错值得推荐。
无缝隙图片向上滚动JS代码下载
11-16
2. **设置初始位置**：为每张图片设置合适的初始位置，通常是在屏幕之外。 3. **监听滚动事件**：使用`window.onscroll`或者`addEventListener('scroll')`监听用户的滚动动作。 4. **计算滚动位置**：在滚动事件...
轮播图
ZJQ12334的博客
07-25 426
细节部分 细节部分： 1、点击上图的左右箭头，分别跳转到上一张图或者下一张图！ （1）点击上一张图就是让一个变量进行递增，点击下一张就是让一个变量进行递减！ 2、点击右小角小圆点也可以进行图片的轮播 （1）通过索引让变量进行随意的修改 3、每间隔2秒时间，进行轮播图自动的切换 （1）涉及到定时器 关于DOM0级事件和DOM2级事件： 1、DOM0级事件：只能给一个元素的某一个行为绑定一次事件，第二次绑定的话会把前面的覆盖掉！ 2、DOM2级事件：可以给某一个元素的同一个行为绑定多个，不同的办法！ 关于监.
图片向上滚动
09-21 397
ShowHeader="False" BorderStyle="None" GridLines="None">                       Text=''>     '>
图片无缝向上滚动
fh2627的博客
06-30 291
亲测有效<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> #demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; height:
jquery 首次加载页面 图片向上滚动
weixin_44426639的博客
06-05 313
jquery 首次加载页面 图片向上滚动 之前没学jq 网上大都是一些看不懂 或者草席的文章 我佛了 自己看了看大概就是这样一行简单的代码 $(document).ready(function(){ $(‘html, body’).animate({ scrollTop:‘400px’}); // 向上滚动距离 }); 样式如这个网站 ...
html5图片向上滚动代码,简短几句jquery代码的实现一个图片向上滚动切换
weixin_39724889的博客
06-09 313
animate()参数介绍：animate() 方法执行 CSS 属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。只有数字值可创建动画(比如 "margin:30px")。字符串值无法创建动画(比如 "background-color:red")。PS:但是如果你引用了最新jquery ui框架的话backgroudCol...
js无缝滚动代码制作js图片无缝滚动向上无缝滚动
11-17
- 使用`setInterval`定时器每间隔一定时间调整`left`属性，模拟向上滚动效果。 - 当`left`值达到一定程度时，将其重置回负的总宽度，实现“无缝”效果。 ```javascript let scrollArea = document.getElementById...
jQuery,图片走马灯，向上滚动
03-18
本教程将介绍如何使用jQuery实现一个简单的图片向上滚动效果。 jQuery是一个轻量级的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理和动画制作。在实现图片走马灯效果时，jQuery的优势在于其简洁的API...
图片循环向上滚动.zip
09-17
在本项目中，"图片循环向上滚动.zip" 文件是一个包含JavaScript代码实现的小游戏，目标是模拟三张图片的循环滚动效果。游戏规则是这样的：三张图片会依次向上滚动，如果三张图片完全相同，玩家将获得大奖；如果有两...
向上滚动翻页js,翻页停几秒
03-04
向上滚动翻页js,翻页停几秒 向上滚动翻页js,翻页停几秒
js网页图片向上滚动实例
12-29
首先，我们将所有待滚动的图片存储在一个数组中，然后设置一个定时器，在每次定时器触发时，显示数组中的下一张图片，同时将当前图片的位置向上移动，模拟出图片向上滚动的效果。 以下是一份简单的实现步骤： 1. *...
jquery 实现滚动向上滚动图片上一张停顿一下在上一张效果
weixin_34212762的博客
10-05 198
因工作需要做一个图片向上滚停滚效果，因此用jquery实现了这一功能，个人觉得代码很简洁，希望给需要的朋友们一些参考。 前台html代码如下（css样式表文件我就不粘贴了，因为我觉得那个一般人都会）： <div class="picshow"> <ul> <asp:Repeater ID="Picshowrp" runa...
CSS特效（14）——纯 CSS 方式实现 CSS 动画的暂停与播放
weixin_33777877的博客
09-07 150
纯 CSS 方式实现 CSS 动画的暂停与播放 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <m...
jquery图片上下滚动暂停几秒，这个思路比较清晰
weixin_33695450的博客
11-01 212
$(function() { loadNewsPage() }); function loadNewsPage() { var isRoll = true; $("#news_list").mouseover(function() { isRoll = false }).mouse...
jQuery轮播图之上一张下一张
十一的博客
06-30 2190
如图实例：html代码： &lt;div class="global_module prolist"&gt; &lt;h3&gt;新款上市&lt;/h3&gt; &lt;div class="prolist_content"&gt; &lt;ul&gt;
js图片滚动显示五张，鼠标指向图片暂停滚动，显示每秒变化的日期和时间，另一处由下向上滚动图片
最新发布
06-09
可以使用JavaScript实现同时满足以下两个功能： 1. 实现图片滚动显示五张，鼠标指向图片暂停滚动，显示每秒变化的日期和时间； 2. 另一处页面实现由下向上滚动图片。 以下是一种实现方式： 首先，在HTML中创建两个包含图片和日期时间的容器： ```html <div class="image-container"> <img src="image1.jpg"> <img src="image2.jpg"> <img src="image3.jpg"> <img src="image4.jpg"> <img src="image5.jpg"> <div class="datetime"></div> </div> <div class="scroll-container"> <img src="image6.jpg"> <img src="image7.jpg"> <img src="image8.jpg"> <img src="image9.jpg"> <img src="image10.jpg"> </div> ``` 然后，在CSS中定义两个容器的样式。第一个容器的样式与上一个回答中相同，第二个容器的样式为： ```css .scroll-container { height: 200px; overflow: hidden; position: relative; } ``` 接下来，在JavaScript中实现第一个容器的滚动和日期时间显示的功能。首先获取第一个容器和所有的图片元素： ```javascript var container1 = document.querySelector('.image-container'); var images1 = container1.querySelectorAll('img'); ``` 然后定义一个计数器变量来记录当前显示的图片索引，初始值为0： ```javascript var currentIndex = 0; ``` 接下来，使用setInterval函数来定时切换图片。在每个定时周期内，将当前显示的图片隐藏，然后显示下一张图片。如果当前已经是最后一张图片，则将计数器重置为0，重新从第一张开始显示。以下是示例代码： ```javascript var timer = null; function startTimer() { timer = setInterval(function() { images1[currentIndex].classList.remove('active'); currentIndex++; if (currentIndex === images1.length) { currentIndex = 0; } images1[currentIndex].classList.add('active'); }, 3000); } function stopTimer() { clearInterval(timer); } container1.addEventListener('mouseover', stopTimer); container1.addEventListener('mouseout', startTimer); startTimer(); ``` 在上述代码中，定义了两个函数startTimer和stopTimer，分别用于启动和停止定时器。在startTimer函数中，使用setInterval函数每隔3秒执行一次匿名函数。每次执行时，将当前显示的图片隐藏，然后显示下一张图片。如果当前已经是最后一张图片，则将计数器重置为0，重新从第一张开始显示。通过给当前显示的图片添加一个"active"类来实现显示和隐藏。在stopTimer函数中，使用clearInterval函数停止定时器。在页面加载完成后，调用startTimer函数启动定时器。同时，使用addEventListener函数为鼠标移入和移出事件添加处理函数，当鼠标移入图片容器时，停止定时器，当鼠标移出图片容器时，重新启动定时器。 接下来，在JavaScript中实现第一个容器的日期时间显示的功能。首先获取日期时间元素： ```javascript var datetime = container1.querySelector('.datetime'); ``` 然后使用setInterval函数来定时更新日期时间。在每个定时周期内，获取当前日期时间，然后将其显示在页面上。以下是示例代码： ```javascript setInterval(function() { var now = new Date(); datetime.textContent = now.toLocaleString(); }, 1000); ``` 在上述代码中，setInterval函数每隔1秒执行一次匿名函数。每次执行时，获取当前日期时间，然后将其显示在页面上。通过调用toLocaleString函数将日期时间转换为本地字符串。 最后，在JavaScript中实现第二个容器的图片滚动功能。首先获取第二个容器和所有的图片元素： ```javascript var container2 = document.querySelector('.scroll-container'); var images2 = container2.querySelectorAll('img'); ``` 然后定义一个变量来表示当前显示的图片索引，初始值为0： ```javascript var currentIndex2 = 0; ``` 接下来，使用setInterval函数来定时滚动图片。首先获取图片容器和所有的图片元素，然后在每个定时周期，将当前显示的图片向上移动一个图片高度，然后将下一张图片显示在容器底部，更新当前显示的图片索引，直到显示完所有图片为止。以下是示例代码： ```javascript setInterval(function() { container2.scrollTop += images2[currentIndex2].clientHeight; currentIndex2++; if (currentIndex2 === images2.length) { currentIndex2 = 0; container2.scrollTop = 0; } else { container2.scrollTop -= images2[currentIndex2 - 1].clientHeight; } }, 3000); ``` 在上述代码中，setInterval函数每隔3秒执行一次匿名函数。每次执行时，将当前显示的图片向上移动一个图片高度，然后将下一张图片显示在容器底部，更新当前显示的图片索引，直到显示完所有图片为止。通过scrollTop属性来实现滚动。如果当前已经是最后一张图片，则将计数器重置为0，重新从第一张开始显示。在每次切换图片前，需要先将上一张图片的高度从scrollTop属性中减去，使得下一张图片能够显示在容器底部。 以上就是一种实现图片滚动显示五张，鼠标指向图片暂停滚动，显示每秒变化的日期和时间，另一处由下向上滚动图片的方法。你可以根据自己的实际需求进行调整。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值