图片滚动效果

前段时间写了一个图片滚动的效果,js还没封装,回头在更新。

-------------------
已更新,支持ie了
贴出来的代码更新了,附件没有更新 :oops:
-------------------

function mmove(){
clearInterval(move);
move = setInterval(moveEvent,30);
}

function moveEvent(){
mleft--;
picList.style.marginLeft = mleft + 'px';
if ( mleft == arr[img.length/2-1]-110){
mleft=0;
}
for(var i=0; i<arr.length;i++){
if(arr[i] == mleft){
clearInterval(move);
setTimeout(mmove, 3000);
m = 110;
}
}
}


if(document.getElementById('picList')){

var picList = document.getElementById('picList');
var img = picList.getElementsByTagName('a');
var mleft = 0;
var move = setInterval(moveEvent,30);
var info = picList.innerHTML;
info += info ;
picList.innerHTML = info;

for(var i=0;i<img.length;i++ ){
img[i].onmousemove = function(){
clearInterval(move);
}
img[i].onmouseout = function(){
setTimeout(mmove,30);
}
}
var arr = new Array();
for ( var i=0; i<img.length/2; i++){
arr[i] = -110*i;
}
}


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<style>
#picView { width:330px; margin-left:100px; height:110px; overflow:hidden;}
#picList { width:1320px; height:110px;}
#picView img { width:100px; width:100px; margin:5px; border:0; }
#picView a { width:110px; height:110px; float:left;}
</style>

</head>
<body>
<div id="picView">
<div id="picList">
<a href="#"><img src="images/1.jpg" /></a>
<a href="#"><img src="images/2.jpg" /></a>
<a href="#"><img src="images/3.jpg" /></a>
<a href="#"><img src="images/4.jpg" /></a>
<a href="#"><img src="images/5.jpg" /></a>
<a href="#"><img src="images/6.jpg" /></a>
</div>
</div>

</body>
<script src="js/picMove.js" type="text/javascript" ></script>
</html>
自制图片滚动效果的实现与应用 本文还有配套的精品资源,点击获取 简介:图片滚动效果是网页设计中常用元素,能够动态展示图片集,提高视觉吸引力。源码下载提供了基于JavaScript和CSS3的简单自制图片滚动效果,适合开发者在网页或应用中使用。本文将详细探讨实现原理、相关技术及应用场景。通过定时器和事件监听器控制图片显示,HTML和CSS负责样式和布局,而JavaScript处理图片切换逻辑,可能利用 ... 阅读详情

相关推荐

手把手教你用srec_cat生成带CRC校验的STM32固件(解决OTA常见校验失败问题)

本文针对STM32 OTA升级中常见的固件校验失败问题,提供了一套使用srec_cat工具自动生成带CRC32校验固件的实战解决方案。文章详细拆解了命令参数,指导开发者如何为固件嵌入CRC值、处理地址偏移及合并文件,从而确保Bootloader能可靠校验固件完整性,提升远程更新的稳定性。

kappa的博客 783

多张图片连续滚动效果的制作方法

先制作向上滚动的效果:   插入代码: 〈!-- 指向链接图片url --〉 〈base href="http://www.it365cn.com"〉 〈div id=demo style=overflow:hidden;;height:150;;width:90;;background:#214984;;color:#ffffff〉 〈div id=demo1〉 〈!-- 定义图片 --〉 〈i

科长专栏 5827

Spatio-Temporal Graph Convolutional Networks: A Deep Learning Framework for Traffic Forecasting 论文笔记

Spatio-Temporal Graph Convolutional Networks: A Deep Learning Framework for Traffic Forecasting 论文笔记-----GCN在交通领域的应用(二) 一、论文翻译: 1、摘要: 及时准确地交通预测对于城市交通控制和指导具有至关重要的意义。由于交通流量的非线性和复杂性,传统的方法不能满足中长期预测任务的需求,并且往往会忽略时空数据的时间和空间依赖特性。在这篇论文中,为了处理在交通领域的时间序列预测问题...

cy_believ的博客 1916

HTML中实现图片滚动效果

HTML中实现滚动效果网页中多的不能再说了,一般的网站都有图片滚动效果,突然滚动出一个美女让你点击,这样也是一个网站获取流量的方式,今天我也做了个测试,实现简单的图片滚动效果 注释: 1) scrollAmount。它表示速度,值越大速度越快。 2) 加入onmouseover=stop() onmouseout=start()代码,鼠标真想图片的时候图片停止滚动,当鼠标离开图片

LB228988的专栏 1万+

Unity动画状态机实战:Trigger和Bool参数到底怎么选?附5个常见场景解析

本文深入解析Unity动画状态机中Trigger和Bool参数的核心差异与应用场景。通过对比两者在描述瞬时事件与持续状态上的本质区别,并结合角色移动、攻击连招、跳跃落地、受击死亡及环境交互等5个实战场景,提供了清晰的选择逻辑与避坑指南,帮助开发者构建更健壮、易维护的动画逻辑。

weixin_29009501的博客 120

Springboot信息泄露以及heapdump的利用

努力是为了不平庸~安全有些时候是枯燥的,这一次,让我们先人一步,趣学渗透!

LiBai'S BLOG 3万+

Unity 图片滚动效果

Unity 图片滚动效果看效果代码展示 看效果 代码展示 using System.Collections; using System.Collections.Generic; using UnityEngine; using DG.Tweening; public class ControlMode : MonoBehaviour { public int currentIndex; public float speedTime = 0.5f; private Canva

qq_19323929的博客 1753

【异常】飞书OpenClaw机器人 HTTP 401: Invalid Authentication 报错排查与解决方案

HTTP 401 是HTTP协议标准定义的未授权(Unauthorized)状态码,核心含义为请求方身份认证无效,服务端拒绝执行本次请求。飞书开放平台服务端对自建机器人的全链路鉴权校验失败。无论是机器人接收飞书事件推送的上行请求,还是机器人主动调用飞书开放平台API的下行请求,只要身份凭证无效、鉴权逻辑校验不通过,飞书服务端就会返回该报错,并最终透传到飞书客户端会话窗口中。

奶爸的编程之路,也就一周冷个三天 3759

图片翻页滚动效果

JavaScript实现的图片翻页滚动效果Content-Type content=text/html; charset=gb2312>JavaScript>var scrollerheight=160;                                                //定义每个区域显示的高度var html,total_area=0,wait_flag

xinem的专栏 2014

踩坑实录:C#上位机YOLOv11从2FPS到45FPS,ONNX Runtime GPU加速全解析

算力迁移:将推理核心从CPU迁移至GPU(核心提速手段);内存复用:避免重复分配/释放内存,减少GC压力;维度固定:工业场景固定输入分辨率,关闭动态维度;资源限制:合理限制GPU/CPU/内存占用,避免资源耗尽;解耦设计:推理线程与UI线程解耦,避免跨线程问题。

这里只有干货:从 Modbus 通信到 MES 对接,从 YOLO 训练到工控机部署,带你搞定工业软件开发全流程。 570

【软考高级架构】论文范文12——论生成式AI在软件开发中的应用与挑战

随着生成式AI技术的跨越式发展,以大语言模型为代表的生成式AI正在深刻改变软件开发的传统模式。在代码生成、测试构造、文档编写等环节,生成式AI展现出显著的效率提升潜力,但其应用也面临着代码质量不可控、安全漏洞植入、版权合规等严峻挑战。本文以笔者主导的某大型金融企业智能研发辅助平台建设项目为案例,围绕生成式AI在软件开发中的应用实践与应对挑战的策略展开论述。笔者担任系统架构师,负责平台架构设计、模型选型、质量保障机制及安全防线构建。

qq837993702的博客 275

jquery实现可控方向的图片滚动效果

可控方向的图片滚动效果 .scroll{ position:relative; background-color:#CCC; padding:2px; width:600px; height:150px; overflow:hidden; } .items{ margin:0px 0px; padding:0px 0px; list-st

zhaoxinglei0309的专栏 1665

2025爬虫实战:某音直播间实时弹幕获取原理及源码分析

某音直播弹幕虽然没有直接挂在 DOM 上,但由于用的是西瓜播放器,弹幕是通过 JS 接口动态渲染的,这就给了我们 Hook 的机会。关键点是找到调用的位置,然后拦截并输出对象里的message字段。这个思路其实也适用于其他前端渲染的播放器,比如 B 站的 DPlayer、HLS.js、甚至很多自研播放器都有类似结构。

代码简单说 Vue、JAVA、PHP、Node.js 熟练运用,接口、架构、性能全搞定。 1811

Android开发图片滚动效果

Android开发图片滚动效果 效果图: 设置适配来设置图片位置大小 package com.example.gallary; import android.content.Context; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import andr...

weixin_43918957的博客 2930

android 蓝牙通讯demo

android 下蓝牙通讯demo,实现了发现蓝牙,使能蓝牙,通过蓝牙发送消息。

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

el图片滚动_如何在HTML中实现图片的滚动效果?

展开全部素材的准备。为了更好的表现网站的风格和特色,具备一些更富表现力和吸引力的e5a48de588b63231313335323631343130323136353331333365633939图片是必不可少的。同理,小编也准备了一些与网页主题密切相关的图片,用于做为实现图片滚动效果的素材。打开Dreamweaver8,新建一网页文件,并保存为名为“index.html"文件。切换至代码编辑界面...

weixin_42501331的博客 465

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用,资源的后缀为tar.gz格式的压缩包

前端页面实现图片轮播滚动效果

1.滚动效果:http://www.yayihouse.com/taobao.html 2.完整html页面代码: <!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>图片循环滚动</title> <style> #box div, box ul,b..

qq_30908729的博客 5370

图片翻页滚动效果(JavaScript)

var scrollerheight=160;                                                //定义每个区域显示的高度var html,total_area=0,wait_flag=true;      //初始化html串,总显示区域数,是否等待.var bMouseOver = 1;                     

groupliu的专栏 1872

图片不间断滚动效果

<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="description" content="" /> <title>图片不间断滚动效果(兼容火狐和IE) iygh.top收集</title> <...

qq_35606790的博客 1206

3D图片滚动效果

3D图片滚动效果

zichenblog的博客 978

如何在HTML中实现图片的滚动效果

<MARQUEE onmouseover=stop() onmouseout=start() scrollAmount=3 loop=infinite deplay="0"><IMG src="第一张图片地址" ><IMG src="第二张图片地址"></MARQUEE>注释:1) scrollAmount。它表示速度,值越大速度越快。2) 加入on...

weixin_30918415的博客 3万+

左右滚动的图片效果

左右滚动的图片效果 - 51windows.Net                                         http://www.51windows.net/mypic/sight/page_01.htm" target="_blank">http://www.51windows.net/51wfolder_1/jsimg/TN_Feng016.JPG" border=

groupliu的专栏 625

JS 配合Div 滚动图片效果

用div实现向左右无缝滚动图片效果 2008年07月05日 星期六 上午 11:01 div+css学习笔记22(用div实现向左无缝滚动图片效果)JavaScript实现走马灯效果[无缝连接、循环滚动] 无缝跑马灯效果 以下代码在IE6、Fi...

aizhiliu7114的博客 211

图片连续循环滚动效果

以下的代码可以直接使用的,但必须把图片换成本地或网上的 <divid=demostyle="overflow:hidden;width:258px;height:854px;"> <divid=demo1> <imgsrc="images/huan.gif"/><br> <...

243

给html页面图片制造滚动效果(详细注释)

给html页面图片制造滚动效果html部分源码css部分源码javascript部分源码 html部分源码 设置4个图片div <body> <div class="nivoSlider" style="height: 200px;width: 780px;"> <div class="slide"> <img src="./static/xinjiang/banner.jpg" s> </

shizuguilai的博客 1万+

图片循环滚动效果

* { margin:0;padding:0} .containerBox { position: relative;overflow: hidden; width: 900px; height:60px;margin:50px auto;border: 1px solid red;} .containerBox ul { position:absolute;ov

zsf53543831的博客 764

如何实现图片无间断滚动效果。

//2019.3.3 没有最好的程序,只有更好的程序。 如何实现图片无间断滚动效果。 个人设计思路: ①我们先把我们想要滚动的图片,放入一个列表(表格)中,按序排列好。然后再创建一个列表(表格),复制上一个列表内的内容。它们必须在同一行。 当然,上述两个列表(表格)都必须放在同一个div中,并且给div的样式中设置好宽高,以及overflow:hidden;(为了移动时隐藏多余部分)。...

HelloCode的博客 1692
下一篇: ie6下hover实现
dxtiger
博客等级 码龄22年 0粉丝 2原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值