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中in运算符用法分析
Apr 28 Javascript
Bootstrap入门书籍之(一)排版
Feb 17 Javascript
jquery表单验证插件formValidator使用方法
Apr 01 Javascript
jquery编写Tab选项卡滚动导航切换特效
Jul 17 Javascript
Vue学习笔记进阶篇之过渡状态详解
Jul 14 Javascript
分析javascript中9 个常见错误阻碍你进步
Sep 18 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
Sep 21 Javascript
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
简单了解JavaScript中常见的反模式
Jun 21 Javascript
vue分页器组件编写方法详解
Jun 28 Javascript
layui实现数据表格table分页功能(ajax异步)
Jul 27 Javascript
Layui Form 自定义验证的实例代码
Sep 14 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开发框架总结收藏
2008/04/24 PHP
一个显示效果非常不错的PHP错误、异常处理类
2014/03/21 PHP
php使用cookie保存用户登录的用户名实例
2015/01/26 PHP
PHP 对象接口简单实现方法示例
2020/04/13 PHP
JavaScript去除空格的几种方法
2006/10/03 Javascript
使用IE的地址栏来辅助调试Web页脚本
2007/03/08 Javascript
jQuery :nth-child前有无空格的区别分析
2011/07/11 Javascript
Jquery进度条插件 Progress Bar小问题解决
2011/07/12 Javascript
jQuery基础语法实例入门
2014/12/23 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
2015/05/13 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
2015/12/02 Javascript
JS字符串的切分用法实例
2016/02/22 Javascript
简单实现js间歇或无缝滚动效果
2016/06/29 Javascript
微信小程序 开发MAP(地图)实例详解
2017/06/27 Javascript
nodejs模块学习之connect解析
2017/07/05 NodeJs
详解EasyUi控件中的Datagrid
2017/08/23 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
2017/12/16 Javascript
vue.js使用watch监听路由变化的方法
2018/07/08 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
2020/03/11 Javascript
[56:48]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Django框架中方法的访问和查找
2015/07/15 Python
python实现学生管理系统
2018/01/11 Python
用python做游戏的细节详解
2019/06/25 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
pandas DataFrame运算的实现
2020/06/14 Python
用Python开发app后端有优势吗
2020/06/29 Python
用CSS3实现Win8风格的方格导航菜单效果
2013/04/10 HTML / CSS
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
2016/12/20 HTML / CSS
德国专业木制品经销商:Holz-Direkt24
2019/12/26 全球购物
高中语文课后反思
2014/04/27 职场文书
部门活动策划方案
2014/08/16 职场文书
2014年公司工作总结
2014/11/22 职场文书
先进党员事迹材料
2014/12/24 职场文书
公司趣味运动会开幕词
2016/03/04 职场文书
Redis 配置文件重要属性的具体使用
2021/05/20 Redis
LyScript实现绕过反调试保护的示例详解
2022/08/14 Python