javascripts 滚动图片

最新推荐文章于 2024-07-23 11:32:13 发布
最新推荐文章于 2024-07-23 11:32:13 发布
阅读量569 收藏
点赞数
文章标签： border function table javascript

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Copyright" content="村人漫画网 http://www.cunrentj.com/" />
<meta name="description" content="村人漫画,漫画新闻,漫画评论" />
<meta content="村人漫画" name="keywords" />

<title>haha</title>
<style type="text/css">
td {font-size: 12px;}
</style>
</head>

<BODY leftmargin="0" topmargin="0">

<CENTER>

<!---------------------这个表格是为了固定位置的～-------------------------------->
  <DIV id=demo style="OVERFLOW: hidden; WIDTH: 100%; COLOR: #ffffff">
<TABLE width=2483 align=center style="BORDER: #ccc 1px solid;" bgcolor="#FFFFCC" height="161" cellSpacing=0 cellPadding=0 border=0 >
<TBODY>
<TR>
<TD  id="marquePic1" width="2481" height="161">
 

  <TABLE cellSpacing=0 cellPadding=0 align=left border=0 cellspace="0" bgcolor="#9CBCC2" height="161">
  <TBODY>
        <TR>
  <TD id=demo1 vAlign=top>
      <table width="2471" height="161"  border="0" cellpadding="0" cellspacing="0">
     <tr>
     <td colspan="33" height="11" background="http://www.cunrentj.com/images/bg.gif"></td>
     </tr>
     <tr align="center">
     <td height="11" > 　逍遥奇侠</td>
     <td height="11" >胡桃夹子</td>
     <td height="11" >逍遥奇侠</td>
     <td height="11" >济公传奇</td>
     <td height="11" >胡桃夹子</td>
     <td height="11" >济公传奇</td>
     <td height="11" >三国演义</td>
     <td height="11" >村人插画</td>
     <td height="11" >红楼美图</td>
     <td height="11" >红楼美图</td>
     <td height="11" >村人插画</td>
     <td height="11" >红楼美图</td>
     <td height="11" >红楼美图</td>
     <td height="11" >红楼美图</td>
     <td height="11" >水浒美图</td>
     <td height="11" >红楼美图</td>
     <td height="11" >三国演义</td>
     <td height="11" >红楼美图</td>
     <td height="11" >西游记-火魔红孩儿</td>
     <td width="1" height="11" ></td>
     </tr>
     <tr align="center" height="127">
     <td width="130" height="134"><a href="comic_pic_001.htm" target="_blank"><img src="http://www.cunrentj.com/images/pic/pic_01.jpg"  width="122" height="137"  border="0"/></a></td>
     <td width="130" ><a href="comic_pic_002.htm" target="_blank"><img src="http://www.cunrentj.com/images/pic/pic_02.jpg"  width="122" height="137"  border="0"/></a></td>
     <td width="130" ><a href="comic_pic_004.htm" target="_blank"><img src="http://www.cunrentj.com/images/pic/pic_04.jpg"  width="122" height="137"  border="0"/></a></td>
     <td width="130" ><a href="comic_pic_005.htm" target="_blank"><img src="http://www.cunrentj.com/images/pic/pic_05.jpg"  width="122" height="137"  border="0"/></a></td>
     <td width="130" ><a href="comic_pic_006.htm" target="_blank"><img src="http://www.cunrentj.com/images/pic/pic_06.jpg"  width="122" height="137"  border="0"/></a></td>
     <td width="130" ><a href="comic_pic_007.htm" target="_blank"><img src="http://www.cunrentj.com/images/pic/pic_07.jpg"  width="122" height="137"  border="0"/></a></td>
     <td width="130" ><a href="comic_pic_008.htm" target="_blank"><img src="http://www.cunrentj.com/images/pic/pic_08.jpg"  width="122" height="137"  border="0"/></a></td>
     <td width="130" ><a href="comic_pic_009.htm" target="_blank"><img src="http://www.cunrentj.com/images/pic/pic_09.jpg"  width="122" height="137"  border="0"/></a></td>


     <td width="130" ><a href="comic_pic_010.htm" target="_blank"><img src="http://www.cunrentj.com/images/pic/pic_10.jpg"  width="122" height="137"  border="0"/></a></td>
     <td width="130" ><a href="comic_pic_011.htm" target="_blank"><img src="http://www.cunrentj.com/images/pic/pic_11.jpg"  width="122" height="137"  border="0"/></a></td>
     <td width="130" ><a href="comic_pic_012.htm" target="_blank"><img src="http://www.cunrentj.com/images/pic/pic_12.jpg"  width="122" height="137"  border="0"/></a></td>
     <td width="130" ><a href="comic_pic_013.htm" target="_blank"><img src="http://www.cunrentj.com/images/pic/pic_13.jpg"  width="122" height="137"  border="0"/></a></td>

     <td width="130" ><a href="comic_pic_015.htm" target="_blank"><img src="http://www.cunrentj.com/images/pic/pic_15.jpg"  width="122" height="137"  border="0"/></a></td>
     <td width="130" ><a href="comic_pic_016.htm" target="_blank"><img src="http://www.cunrentj.com/images/pic/pic_16.jpg"  width="122" height="137"  border="0"/></a></td>
     <td width="130" ><a href="comic_pic_017.htm" target="_blank"><img src="http://www.cunrentj.com/images/pic/pic_17.jpg"  width="122" height="137"  border="0"/></a></td>
     <td width="130" ><a href="comic_pic_018.htm" target="_blank"><img src="http://www.cunrentj.com/images/pic/pic_18.jpg"  width="122" height="137"  border="0"/></a></td>
     <td width="130" ><a href="comic_pic_019.htm" target="_blank"><img src="http://www.cunrentj.com/images/pic/pic_19.jpg"  width="122" height="137"  border="0"/></a></td>

     <td width="130" ><a href="comic_pic_020.htm" target="_blank"><img src="http://www.cunrentj.com/images/pic/pic_20.jpg"  width="122" height="137"  border="0"/></a></td>
     <td width="130" ><a href="comic_pic_021.htm" target="_blank"><img src="http://www.cunrentj.com/images/pic/pic_21.jpg"  width="122" height="137"  border="0"/></a></td>
              </tr>
      <tr>
                 <td colspan="33"  height="11" background="http://www.cunrentj.com/images/bg.gif"></td>
      </tr>
             </table>
  </TD>   
  </TR>
  </TBODY>
  </TABLE>
<TD id="marquePic2" vAlign=top>
</TD>
</TD>
</TR>
</TBODY>
</TABLE>
<script language=JavaScript src="scrollpic.js"></script>
</DIV>
</CENTER>
</BODY>
</HTML>

 

scrollpic.js

 

var speed=1
marquePic2.innerHTML=marquePic1.innerHTML
function Marquee(){
if(demo.scrollLeft>=marquePic1.scrollWidth){
demo.scrollLeft=0
}else{
demo.scrollLeft++
}}
var MyMar=setInterval(Marquee,speed)
demo.οnmοuseοver=function() {clearInterval(MyMar)}
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}

rosi1124
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS实现轮播图图片无缝滚动原理
unlilalila的博客
10-20 5226
当轮播图滚动至现有图片最后一张时，需要让轮播图下一跳回到第一张图片，从而实现无限无缝循环滚动效果，但是为什么需要采用克隆来实现呢？为什么不直接从最后一张回到第一张？ 原理：在我们采用 num 变量计算图片移动的次数时，增加了一个 if 的判断条件，用于判断图片是否滚动至最后一张图片位置，如果没有复制或者克隆来新增一个子节点，循环就会在到达最后一张图时num 和left 变为 0 ，但是结束了 if 判断后会有一个 num 自增的动作，所以 num 变为 1 ，就会直接跳到第二张图，故需要克隆第一张图片作.
随鼠标滚动的广告图片 JavaScript
sksjxx的博客
11-27 795
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>随鼠标滚动的广告图片</title> <style type="text/css"> #main { text-align: center; width: 1014px; m.
JavaScaript实现图片分页
dianjin3567的博客
12-25 140
<script type="text/javascript"> var page = 1; //当前页面 var pagesize = 2; //每页显示数量 var picnum = 18; //图片总数量 var pagenum; //总页面数 var showpage = ''; var showpage1 = ''; function showp...
javascript实现图片滚动
cmz的专栏
02-11 894
闲来无事捣鼓了一个原来的js图片滚动 首先看看 静态页的结构： body> a href="javascript: le()">向左a> a href="javascript: re()">向右a> div id="img"> ul id="imgul"> li>img src="img/1.jpg" height="150" width="200"/>li> li>img src
JavaScript广告图片跟随滚动
虾米大王的学习历程
12-31 1019
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> #adver { position: relative; } </style> <script&.
javascript设置无缝滚动图片
m0_37678565的博客
06-28 777
本文能够实现无缝滚动图片，并且能够控制左右滚动，初学javaScript，若觉得有什么不妥的地方欢迎留言。 无标题文档 * {margin:0; padding:0;} #div1 {width:712px; height:108px; margin:100px auto; position: relative; background:red; overflow:hidde
html中图片自动循环滚动代码,JavaScript代码实现图片循环滚动效果
weixin_39663258的博客
05-31 4842
1.概述循环滚动图片，不仅可以增添Web页面的动态效果，而且可以节省页面空间，有效地保证在有限的页面中显示更多的图片。2.技术要点主要应用setTimeout()方法实现图片的循环滚动效果。setTimeout()方法的语法格式如下：setTimeout(function,milliseconds,[arguments])参数说明：a. function：要调用的JavaScript自定义函数名称...
vue 实现图片滚动
qq_33240556的博客
06-29 1001
在Vue中实现图片滚动，可以通过几种不同的方法来完成，包括使用原生CSS、JavaScript以及现有的Vue组件库。这里提供一个基本示例，展示如何结合Vue和第三方库（如vue-seamless-scroll）来实现图片的左右滚动效果。
html5实现图片无缝滚动,原生javascript实现图片无缝滚动效果，javascript无缝滚动...
weixin_32264185的博客
06-04 489
原生javascript实现图片无缝滚动效果，javascript无缝滚动图片水平无缝滚动效果在大量的网站都有应用，特别是一些企业网站在展示产品的时候，因为是动态效果，所以能够给网站增色不少，相比静态图片展示更能够吸引用户的注意力，下面就通过实例代码介绍一下如何实现此效果。代码如下:登博教程#demo{background:#FFF;overflow:hidden;border:1px dashe...
JavaScript实现图片自动轮播
weixin_45746811的博客
11-07 9066
轮播图片、页面定时弹出广告、表单校验。
基于javascript滚动图片具体实现
10-26
JavaScript滚动图片是一种常见的网页动态效果，它通过编程方式让图片在页面上自动滑动，以吸引用户的注意力或展示更多的信息。在这个案例中，我们将探讨如何使用JavaScript实现一个简单的滚动图片功能。 首先，从...
Javascript 实现图片无缝滚动
10-25
主要介绍了Javascript 实现图片无缝滚动的相关资料,需要的朋友可以参考下
Javascript实现滚动图片新闻的实例代码
10-26
总结起来，这个JavaScript滚动图片新闻实例主要涉及到以下几个关键知识点： 1. JavaScript与DOM交互：通过`getElementById`获取DOM元素，修改其样式和属性。 2. 循环逻辑：使用模运算符`%`实现循环，确保索引始终在...
javascript图片滚动
07-12
JavaScript图片滚动是一种常见的网页动态效果，它通过编程方式实现图片的自动切换，为网站增添视觉吸引力。这种技术在网页设计中被广泛应用，特别是在新闻、产品展示或者轮播图等场景下。JavaScript作为客户端脚本...
使用Javascript简单实现图片无缝滚动
10-25
本文简单介绍了使用原生javascript实现简单的图片无缝滚动的方法，并附上示例代码，推荐给大家，直接可以用在项目中的。
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 332
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
计算机毕业设计Django+Vue.js知识图谱音乐推荐系统 音乐爬虫可视化 音乐数据分析 大数据毕设 大数据毕业设计 机器学习 深度学习 人工智能
从业计算机毕业设计10年，打算用一年时间分享10年毕设经验！
07-23 326
计算机毕业设计Django+Vue.js知识图谱音乐推荐系统 音乐爬虫可视化 音乐数据分析 大数据毕设 大数据毕业设计 机器学习 深度学习 人工智能
HarmonyOS应用开发者高级认证，Next版本发布后最新题库 - 多选题序号4
最新发布
Gusha_的博客
07-23 618
HarmonyOS应用开发者高级认证最新题库，编写于2024年7月19日，Next版本发布之后
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 922
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
javascript图片滚动思路
06-22
JavaScript 图片滚动通常指的是创建一个动态滚动效果，比如轮播图或懒加载图片。下面是一些基本的实现思路： 1. **轮播图**: - 使用 HTML 定义图像容器和图片列表。 - JavaScript 遍历图片列表，为每张图片设置 `src` 属性，并在容器中设置图片显示顺序（如索引位置）。 - 添加事件监听器（如 `mouseover` 或定时器）控制图片切换，当用户滑动或者达到切换条件时，改变当前显示图片。 2. **懒加载图片**: - 使用Intersection Observer API，当图片进入视口范围时，动态加载图片，而不是一开始就下载所有图片。 - 在图片元素上添加 `Intersection Observer` 实例，当图片被完全可见时，触发加载操作。 3. **响应式滚动加载**: - 对长列表或瀑布流布局，当用户滚动到底部时，动态加载更多内容，减少初始页面的加载压力。 4. **动画滚动**: - 如果需要平滑滚动效果，使用 CSS 或 JavaScript (如 ScrollMagic) 来实现图片滚动时的动画效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值