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 相关文章推荐
一个CSS+jQuery实现的放大缩小动画效果
Feb 19 Javascript
javascript原始值和对象引用实例分析
Apr 25 Javascript
Css3制作变形与动画效果
Jul 24 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
Nov 24 Javascript
整理Javascript基础语法学习笔记
Nov 29 Javascript
jQuery实现获取绑定自定义事件元素的方法
Dec 02 Javascript
Bootstrap CSS使用方法
Dec 23 Javascript
微信小程序开发(一) 微信登录流程详解
Jan 11 Javascript
详解在vue-cli项目中安装node-sass
Jun 21 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
vuejs中监听窗口关闭和窗口刷新事件的方法
Sep 21 Javascript
postman自定义函数实现 时间函数的思路详解
Apr 17 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标准类(stdclass)用法示例
2016/09/28 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
Laravel框架FormRequest中重写错误处理的方法
2019/02/18 PHP
Javascript计算两个marker之间的距离(Google Map V3)
2013/04/26 Javascript
JS中获取数据库中的值的方法
2013/07/14 Javascript
超棒的响应式布局jQuery插件Freetile.js
2014/11/17 Javascript
node.js中的fs.symlink方法使用说明
2014/12/15 Javascript
JavaScript里四舍五入函数round用法实例
2015/04/06 Javascript
javascript实现别踩白块儿小游戏程序
2015/11/22 Javascript
Javascript的表单验证-提交表单
2016/03/18 Javascript
Angular 路由route实例代码
2016/07/12 Javascript
js清除浏览器缓存的几种方法
2017/03/15 Javascript
JavaScript数据结构之单链表和循环链表
2017/11/28 Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
2017/12/26 Javascript
如何在项目中使用log4.js的方法步骤
2019/07/16 Javascript
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
详解Vue串联过滤器的使用场景
2020/04/30 Javascript
JavaScript或jQuery 获取option value值方法解析
2020/05/12 jQuery
Tensorflow之构建自己的图片数据集TFrecords的方法
2018/02/07 Python
python对于requests的封装方法详解
2019/01/03 Python
python读取文件名并改名字的实例
2019/01/07 Python
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
python dict 相同key 合并value的实例
2019/01/21 Python
简单了解Django应用app及分布式路由
2019/07/24 Python
纪伊国屋新加坡网上书店:Kinokuniya新加坡
2017/12/29 全球购物
面向对象编程的优势是什么
2015/12/17 面试题
财务人员个人求职信范文
2013/12/04 职场文书
库房管理员岗位职责
2014/03/09 职场文书
营销团队口号
2014/06/06 职场文书
中学生2014国庆节演讲稿:不屈的民族
2014/09/21 职场文书
硕士毕业论文导师评语
2014/12/31 职场文书
云冈石窟导游词
2015/02/04 职场文书
出国导师推荐信
2015/03/25 职场文书
2015财务年度工作总结范文
2015/05/04 职场文书
少年派的奇幻漂流观后感
2015/06/08 职场文书
MySQL学习总结-基础架构概述
2021/04/05 MySQL