简洁的JS图片滚动代码
非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止。
它的特点是JS和图片地址分离,这样做你就经易的从数据库动态调用每张图片的地址,方便控制,因此它非常的有用。
<!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>图片滚动</title>
</head>
<body>
<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 500px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
-->
</style>
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="/jscss/demoimg/wall_s1.jpg" border="0" /></a>
<a href="#"><img src="/jscss/demoimg/wall_s2.jpg" border="0" /></a>
<a href="#"><img src="/jscss/demoimg/wall_s3.jpg" border="0" /></a>
<a href="#"><img src="/jscss/demoimg/wall_s4.jpg" border="0" /></a>
<a href="#"><img src="/jscss/demoimg/wall_s5.jpg" border="0" /></a>
<a href="#"><img src="/jscss/demoimg/wall_s6.jpg" border="0" /></a>
<a href="#"><img src="/jscss/demoimg/wall_s7.jpg" border="0" /></a>
<a href="#"><img src="/jscss/demoimg/wall_s8.jpg" border="0" /></a>
<a href="#"><img src="/jscss/demoimg/wall_s9.jpg" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
</div>
<script>
<!--
var speed=10;
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.οnmοuseοver=function() {clearInterval(MyMar)};
tab.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>
</body>
</html>
简洁的JS图片滚动代码相关推荐
- 常用JS图片滚动代码大全
原文地址:http://www.codefans.net/jscss/code/1801.shtml 本源代码收集了一些常用的网页图片滚动,无缝滚动,效果很平滑,包括上下左右四个方向的滚动,或许你现在 ...
- JS+CSS控制左右切换鼠标可控的无缝图片滚动代码
代码简介: 以前见过这种效果,但是是基于FLASH技术,现在是纯用JS实现的,代码有点多,不过效果还不错,实际上它也是一个图片滚动,只不过它完全是用鼠标点击控制的,也就是说鼠标不点击的时候它是静止的, ...
- 一款JS+CSS实现的无缝平滑图片滚动代码
代码简介: 非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止.它的特点是JS和图片地址分离,这样做你就经易的从数据库动态调用每张图片的地址,方便控制,因此它非常的应用. 代码内容 ...
- 10款js图片代码_图片滚动代码_图片切换代码_图片特效代码_图片轮播代码(三)
jquery banner滑块导航条幻灯片轮播图片滚动 jQuery blockSlide插件熔岩灯标签导航banner焦点图片切换 jquery图片冒泡插件鼠标悬停图片冒泡动画展示 jquery h ...
- 常用JS图片滚动(无缝、平滑、上下左右滚动)
常用JS图片滚动(无缝.平滑.上下左右滚动)代码大全 <head> <-----> </head> <body> <!--向下滚动代码开始--&g ...
- php图片左右滚动代码怎么写,css图片滚动代码怎么写?轮播图横向滚动展示
在日常工作中网页上的轮播图展示必不可少,那么对于刚入门的小白而言本篇文章关于css图片滚动代码的介绍更是浅显易懂.希望本篇文章对大家有所帮助. css图片滚动代码示例具体如下: css图片滚动代码示例 ...
- js图片滚动无缝衔接
js图片滚动无缝衔接 <style>*{margin:0;padding:0;}div{width:600px;height:200px;position:relative;border: ...
- html背景图片随鼠标滚动条,博客音效代码、滚动条代码、单张图片滚动代码、背景图片代码、个性鼠标(2)...
[99补]隐形博客音效代码 一句代码直接插入,比你从任何地方看到的都要简单: dynsrc=http://www.smartclub.com.cn/smart_sms/music/male/hktk. ...
- 10款js图片代码_图片滚动代码_图片切换代码_图片特效代码_图片轮播代码(二)
js电影图片滑动放大展示特效 jQuery列表图片全图滚动预览 jQuery游戏图片手风琴切换代码 响应式图片文字横幅布局代码 swiper新闻大图滚动组合特效 swiper图文标题滚动轮播特效 js ...
最新文章
- 基于vue-cli、elementUI的Vue超简单入门小例子
- 全球及中国数字电视产业盈利模式及发展动态建议报告2021-2027年
- 自定义AlertDialog布局
- 折叠玻璃体球囊手术介绍
- 飞机游戏项目完整代码(详解JAVA300集)
- CentOS6.9下ssh密钥登录配置步骤(免密码登录)和ssh-keygen 命令常用参数
- 基于 CoreAudio 的音频编解码(二):音频编码
- php置顶文章,zblogphp不同情况置顶文章调用方法
- ant批量处理word文件内容_word多个文件批量替换内容
- 几款不错的整站下载工具
- 计算机中插入背景图片怎样操作,word插入背景图片_Word 2007中插入图片的背景设置妙招_word中插入背景图片_word插入图片做背景...
- GEF原理及实现系列(二、模型)
- js操作cookie有效期至当天晚上23点59分59秒的cookie
- java8 stream运行原理之并行流原理详解
- QQ安装时注册组件不动的解决方法
- 我参加了资金盘培训,get了这些“知识点”
- 小帅功能软件测试经验总结
- java的抽象方法和抽象类
- 计算机科学与物流工程国际学术会议,第一届通信工程与物流管理国际会议
- 关于QQ的相关代码收集整理
热门文章
- PostgreSQL Java 开发者手册
- 水泵微型计算机辅助设计内容,基于CFD技术的脱硫浆液泵节能技术研究
- 信息课为什么不叫计算机课,信息技术课
- Fabric实战(四)-多机部署fabric网络-solo
- 监控系统一些告警方式对比:短信、Email手机端、IM
- 全国各地凉面 冷面 拌面做法大全(转)
- win10自动添加打印机设备
- FCKeditor使用初步
- 安装Hadoop,让word count飞起来
- 弹性盒子display:flex——justify-content主轴方向对齐方式、align-items交叉轴对齐方式、 flex-direction修改主轴方向、flex-wrap换行