JS图像无缝滚动脚本非常好用


Posted in Javascript onFebruary 10, 2014

找了好长时间,终于找到一个合适的了,根据需要改改宽度和图像个数就可以了,用循环动态调用数据库代码就OK了

<!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> 
</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.onmouseover=function() {clearInterval(MyMar)}; 
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}; 
--> 
</script> 
</body> 
</html>
Javascript 相关文章推荐
常见JS效果之图片减速度滚动实现代码
Dec 08 Javascript
jQuery.buildFragment使用方法及思路分析
Jan 07 Javascript
jquery+css实现动感的图片切换效果
Nov 25 Javascript
JS判断字符串字节数并截取长度的方法
Mar 05 Javascript
JS区分浏览器页面是刷新还是关闭
Apr 17 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
May 23 Javascript
Bootstrap栅格系统的使用和理解2
Dec 14 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
Aug 09 Javascript
JQuery属性操作与循环用法示例
May 15 jQuery
微信小程序—setTimeOut定时器的问题及解决
Jul 26 Javascript
谈谈JavaScript令人迷惑的==与+
Aug 31 Javascript
JavaScript实现网页下拉菜单效果
Nov 20 Javascript
ExtJS判断IE浏览器类型的方法
Feb 10 #Javascript
利用js读取动态网站从服务器端返回的数据
Feb 10 #Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
Feb 10 #Javascript
js判断undefined类型示例代码
Feb 10 #Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
Feb 10 #Javascript
js网页实时倒计时精确到秒级
Feb 10 #Javascript
js格式化时间和js格式化时间戳示例
Feb 10 #Javascript
You might like
PHP+APACHE实现用户论证的方法
2006/10/09 PHP
php在页面中调用fckeditor编辑器的方法
2011/06/10 PHP
PHP使用SOAP调用.net的WebService数据
2013/11/12 PHP
ThinkPHP3.1新特性之对分组支持的改进与完善概述
2014/06/19 PHP
Thinkphp无限级分类代码
2015/11/11 PHP
php 根据自增id创建唯一编号类
2017/04/06 PHP
JQuery 国际象棋棋盘 实现代码
2009/06/26 Javascript
基于jquery可配置循环左右滚动例子
2011/09/09 Javascript
JavaScript高级程序设计 阅读笔记(十七) js事件
2012/08/14 Javascript
JavaScript 产生不重复的随机数三种实现思路
2012/12/13 Javascript
JS判定是否原生方法
2013/07/22 Javascript
js检测浏览器版本、核心、是否移动端示例
2014/04/24 Javascript
javascript修改图片src的方法
2015/01/27 Javascript
js 声明数组和向数组中添加对象变量的简单实例
2016/07/28 Javascript
微信小程序 生命周期详解
2016/10/12 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
2017/04/11 jQuery
vue.js的安装方法
2017/05/12 Javascript
vue webuploader 文件上传组件开发
2017/09/23 Javascript
2分钟实现一个Vue实时直播系统的示例代码
2020/06/05 Javascript
javascript实现下拉菜单效果
2021/02/09 Javascript
python利用装饰器进行运算的实例分析
2015/08/04 Python
Python yield 使用方法浅析
2017/05/20 Python
Python通过future处理并发问题
2017/10/17 Python
python字符串循环左移
2019/03/08 Python
Python搭建Spark分布式集群环境
2019/07/05 Python
Python中pyecharts安装及安装失败的解决方法
2020/02/18 Python
智能家居、吸尘器、滑板车、电动自行车网上购物:Geekmaxi
2021/01/18 全球购物
学生党员思想汇报范文
2014/01/09 职场文书
汇源肾宝广告词
2014/03/20 职场文书
商务宴请邀请函范文
2015/02/02 职场文书
大学生求职意向书
2015/05/11 职场文书
法人身份证明书
2015/06/18 职场文书
2015新员工工作总结范文
2015/10/15 职场文书
python设置 matplotlib 正确显示中文的四种方式
2021/05/10 Python
Python实现学生管理系统并生成exe可执行文件详解流程
2022/01/22 Python
ConditionalOnProperty配置swagger不生效问题及解决
2022/06/14 Java/Android