图片滚动效果

前段时间写了一个图片滚动的效果,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处理图片切换逻辑,可能利用 ... 阅读详情

相关推荐

专栏丨华为HN8145XR光猫获取超级管理员密码

摘要:本文详细介绍了华为HN8145xr光猫获取超级管理员权限的完整步骤。首先通过ONT使能工具补全shell,然后利用Telnet登录光猫后台进行操作。文章提供了多种获取超级密码的方法,包括配置文件解密、一键查询工具等,并针对联通光猫特别说明了默认密码格式(CUAdmin+后八位数字)。此外,还介绍了恢复出厂设置、修改SSID等实用操作,帮助用户完全掌控光猫设备。文末附有详细的命令行操作指南,适合有一定技术基础的用户参考。

8250

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

先制作向上滚动的效果:   插入代码: 〈!-- 指向链接图片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

C/C++关于VScode报错“终端将被任务重用,按任意键关闭”的解决方案

这其实不是一种报错,有这个提示的原因是本地端口是被共享的,所以必须关闭一个进程才能执行另一个,只需要对 tasks.json文件做一些修改即可。 报错时候 此时的tasks.json为: { "version": "2.0.0", "command": "g++", "args": ["-g","${file}","-o","${fileDirname}/${fileBasenameNoExtension}.exe"], // 编译命令参数 "problemMatche

Jerry Man的博客 6424

HTML中实现图片滚动效果

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

LB228988的专栏 1万+

Zotero PDF Translate插件实战:DeepL API免费申请与高效翻译配置指南

本文提供Zotero PDF Translate插件配置DeepL API的完整实战指南。详细介绍了如何免费申请DeepL API密钥,解决国内访问问题,并在插件中完成精细配置,实现文献阅读时的无缝划词翻译,大幅提升科研人员和学生的英文文献阅读效率。

rum55的博客 455

基于uniapp实现自定义日历页面、年份月份选择、动态日历渲染、日期标记及备忘录、无组件依赖、多端兼容

基于UniApp框架下自定义日历组件的完整实现方案,涵盖基础日历渲染、年月选择器集成、动态数据标记等核心功能。提供完整代码段,帮助开发者快速构建高性能、高定制化的日历模块,适用于日程管理、预订系统等场景。

商务合作 / 项目定制 / 学习交流。个人vx:lovely_wml 1万+

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

【Power Compiler手册】13.UPF多电压设计实现(2)

在这个场景中,在约束传播期间,工具会比较BLOCK中的原子电源域与TOP设计中的原子电源域,并且确认所有属性都匹配。因此,域合并成功,工具会丢弃来自BLOCK的域。在这个场景中,在约束传播期间,工具会比较BLOCK中的原子电源域与TOP设计中的非原子电源域,发现电源域不匹配。在这个场景中,在约束传播期间,工具会比较BLOCK中的非原子电源域与TOP设计中的原子电源域,发现电源域不匹配。在这个场景中,在约束传播期间,工具会比较BLOCK中的原子电源域与TOP设计中的原子电源域,发现它们的一些属性不匹配。

QRBQ 750

图片翻页滚动效果

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

xinem的专栏 2014

7、刚度矩阵与弹簧元素:有限元分析的核心

本文深入探讨了有限元分析中的核心概念——刚度矩阵与弹簧元素。详细介绍了刚度矩阵的定义、构建方法及其对称性、正定性和稀疏性等性质,同时解析了弹簧和阻尼器元素的特性及其在模拟复杂系统中的应用,如液压缸、减震器等。通过结合刚度矩阵与弹簧元素,可以提高结构模型的精度并模拟复杂的工程系统。文章还讨论了优化策略、验证流程、误差分析及实际应用案例,展示了这些技术在桥梁分析、汽车悬挂系统等领域的重要作用,并展望了其在未来新材料、智能结构和数字孪生技术中的发展潜力。

nice1的博客 234

【人工智能 Open AI】程序员怎样提升研发效率?从技术、业务、项目管理等等多个方面来阐述。

程序员要想提升研发效率,需要从技术、业务、项目管理等多方面着手,多靠工具配合实践实现,从而提升研发效率。

AI天才研究院 5526

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

SAP 打印输出中 `#` 字符替代日文汉字的根本原因与全面解决方案

只要认清设备类型 / 字符集 / 字体三角关系,并合理利用PDFUCSWINCF或 UPE + URDT,LP01里那些恼人的就会彻底消失,日文汉字将在纸面与 PDF 中如预览一样完美呈现。

2007 年 ~ 2025 年,深耕 SAP 技术 18 年 814

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,实现了发现蓝牙,使能蓝牙,通过蓝牙发送消息。

文档:亲测可用解决vnc灰屏,黑屏,鼠标大黑叉情况

主要解决vnc-viewer灰屏,黑屏,鼠标大黑叉等现象,详细见文档。

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

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

weixin_42501331的博客 465

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

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

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

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

图片翻页滚动效果(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、付费专栏及课程。

余额充值