JS实现图片横向滚动效果示例代码


Posted in Javascript onSeptember 04, 2013
<!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> 
<!-----------图片Block的样式--------------> 
<style type="text/css"> 
.box{ margin:0 auto; height:70px; width:810px; padding:10px; border:1px solid #FF0000; } 
.box img{ margin-right:20px;} 
#goleft {width: 800px;height: 70px;overflow: hidden;} 
#goleft #gols {width: 33100px;} 
#goleft1, #goleft2 {width: auto;float: left;} 
</style> </head> 
<body> 
<!-----------图片横向滚动Block--------------> 
<div class="box"> 
<div id="goleft"> 
<div id="gols"> 
<div id="goleft1"> 
<a href="" ><img src="http://image.cnicif.com/big/2013/5/14/jpg20130514011700784.jpg" alt="6" width="100" height="70" /></a> 
<a href="" ><img src="http://image.cnicif.com/big/2013/5/14/jpg20130514011612885.jpg" alt="5" width="100" height="70" /></a> 
<a href="" ><img src="http://image.cnicif.com/big/2013/5/14/jpg20130514011552639.jpg" alt="4" width="100" height="70" /></a> 
<a href="" ><img src="http://image.cnicif.com/big/2013/5/14/jpg20130514011502241.jpg" alt="3" width="100" height="70" /></a> 
<a href="" ><img src="http://image.cnicif.com/big/2013/5/14/jpg20130514011344231.jpg" alt="2" width="100" height="70" /></a> 
<a href="" ><img src="http://image.cnicif.com/big/2013/5/14/jpg20130514011113601.jpg" alt="1" width="100" height="70" /></a> 
</div> 
<div id="goleft2"></div> 
</div> 
</div> 
</div> 
<!-----------图片滚动结束--------------> 
<script type="text/javascript"> 
//图片滚动JS代码 
var speed2=20; 
var FGgoleft=document.getElementById('goleft'); 
var FGgoleft1=document.getElementById('goleft1'); 
var FGgoleft2=document.getElementById('goleft2'); 
FGgoleft2.innerHTML=FGgoleft1.innerHTML 
function Marquee2(){ 
if(FGgoleft2.offsetWidth-FGgoleft.scrollLeft<=0) 
{ 
FGgoleft.scrollLeft-=FGgoleft1.offsetWidth 
} 
else{ 
FGgoleft.scrollLeft++; 
} 
} 
var MyMar2=setInterval(Marquee2,speed2) 
FGgoleft.onmouseover=function() { clearInterval(MyMar2) } 
FGgoleft.onmouseout=function() { MyMar2=setInterval(Marquee2,speed2) } 
</script> 
</body> 
</html>

效果: 
JS实现图片横向滚动效果示例代码 
Javascript 相关文章推荐
JavaScript中的Location地址对象
Jan 16 Javascript
prettify 代码高亮着色器google出品
Dec 28 Javascript
JS加jquery简单实现标签元素的显示或隐藏
Sep 23 Javascript
jquery复选框多选赋值给文本框的方法
Jan 27 Javascript
JS控制弹出新页面窗口位置和大小的方法
Mar 02 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
Mar 13 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
Jun 04 Javascript
JS中IP地址与整数相互转换的实现代码
Apr 10 Javascript
微信小程序 slider的简单实例
Apr 19 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
May 03 Javascript
微信小程序开发之map地图实现教程
Jun 08 Javascript
在HTML文档中嵌入JavaScript的四种方法
May 07 Javascript
javascript强大的日期函数代码分享
Sep 04 #Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
Sep 04 #Javascript
原生javascript图片自动或手动切换示例附演示源码
Sep 04 #Javascript
javascript 获取图片尺寸及放大图片
Sep 04 #Javascript
jQuery遍历Form示例代码
Sep 03 #Javascript
JS将秒换成时分秒实现代码
Sep 03 #Javascript
js导出table到excel同时兼容FF和IE示例
Sep 03 #Javascript
You might like
PHP 利用Mail_MimeDecode类提取邮件信息示例
2014/01/26 PHP
PHP根据传入参数合并多个JS和CSS文件的简单实现
2014/06/13 PHP
php中字符串和正则表达式详解
2014/10/23 PHP
解决PHP curl或file_get_contents下载图片损坏或无法打开的问题
2019/10/11 PHP
通用javascript脚本函数库 方便开发
2009/10/13 Javascript
JavaScript 用Node.js写Shell脚本[译]
2012/09/20 Javascript
在js文件中写el表达式取不到值的原因及解决方法
2013/12/23 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
js canvas仿支付宝芝麻信用分仪表盘
2016/11/16 Javascript
vuejs父子组件之间数据交互详解
2017/08/09 Javascript
tween.js缓动补间动画算法示例
2018/02/13 Javascript
vue单页应用在页面刷新时保留状态数据的方法
2018/09/21 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
2019/04/17 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
2019/09/02 Javascript
layer弹出层倒计时关闭的实现方法
2019/09/27 Javascript
[02:55]含熏伴清风,风行者至宝、屠夫身心及典藏宝瓶二展示
2020/09/08 DOTA
在Python中使用列表生成式的教程
2015/04/27 Python
python实现SMTP邮件发送功能
2020/06/16 Python
python 判断网络连通的实现方法
2018/04/22 Python
django 实现将本地图片存入数据库,并能显示在web上的示例
2019/08/07 Python
Python安装及Pycharm安装使用教程图解
2019/09/20 Python
Python API自动化框架总结
2019/11/12 Python
解决Python命令行下退格,删除,方向键乱码(亲测有效)
2020/01/16 Python
Python使用pdb调试代码的技巧
2020/05/03 Python
Keras设定GPU使用内存大小方式(Tensorflow backend)
2020/05/22 Python
如何解决安装python3.6.1失败
2020/07/01 Python
CSS3 实现穿梭星空动画
2020/11/13 HTML / CSS
西班牙创意礼品和小工具网上商店:Curiosite
2016/07/26 全球购物
Ryderwear澳洲官网:澳大利亚高端健身训练装备品牌
2018/09/18 全球购物
如何利用XMLHTTP检测URL及探测服务器信息
2013/11/10 面试题
活动总结书
2014/05/08 职场文书
年终奖发放方案
2014/06/02 职场文书
师范大学生求职信
2014/06/13 职场文书
2014年实验室工作总结
2014/12/03 职场文书
政府会议通知范文
2015/04/15 职场文书
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
2021/06/29 Javascript