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 相关文章推荐
Prototype使用指南之string.js
Jan 10 Javascript
javascript 解析url的search方法
Feb 09 Javascript
JQuery中Bind()事件用法分析
May 05 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
Aug 02 Javascript
AngularJS指令与控制器之间的交互功能示例
Dec 14 Javascript
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
Webpack优化配置缩小文件搜索范围
Dec 25 Javascript
对vue.js中this.$emit的深入理解
Feb 23 Javascript
JavaScript实现多态和继承的封装操作示例
Aug 20 Javascript
微信小程序仿今日头条导航栏滚动解析
Aug 20 Javascript
解决layer图标icon不加载的问题
Sep 04 Javascript
Vue中component标签解决项目组件化操作
Sep 04 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
索尼ICF-SW100收音机评测
2021/03/02 无线电
学习使用PHP数组
2006/10/09 PHP
PHP 反射机制实现动态代理的代码
2008/10/22 PHP
PHP+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
处理(php-cgi.exe - FastCGI 进程超过了配置的请求超时时限)的问题
2013/07/03 PHP
PHP解析目录路径的3个函数总结
2014/11/18 PHP
一个XML格式数据转换为图表的例子
2010/02/09 Javascript
js 返回时间戳所对应的具体时间
2010/07/20 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
2016/02/26 Javascript
JS实现页面跳转参数不丢失的方法
2016/11/28 Javascript
详解JS中的立即执行函数
2017/02/24 Javascript
如何使用vuejs实现更好的Form validation?
2017/04/07 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
2017/08/15 jQuery
浅谈小程序 setData学问多
2019/02/20 Javascript
如何在node环境实现“get数据解析”代码实例
2020/07/03 Javascript
分享8个JavaScript库可更好地处理本地存储
2020/10/12 Javascript
JavaScript实现原型封装轮播图
2020/12/27 Javascript
pycharm安装图文教程
2017/05/02 Python
Python 最大概率法进行汉语切分的方法
2018/12/14 Python
python文件转为exe文件的方法及用法详解
2019/07/08 Python
python使用paramiko模块通过ssh2协议对交换机进行配置的方法
2019/07/25 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
Python 没有main函数的原因
2020/07/10 Python
如何用 Python 处理不平衡数据集
2021/01/04 Python
Python爬虫分析微博热搜关键词的实现代码
2021/02/22 Python
css3图片边框border-image的用法
2017/06/30 HTML / CSS
您附近的水疗和健康场所:Spafinder(美国)
2019/07/05 全球购物
自我评价正确写法范文
2013/12/10 职场文书
酒店中秋节活动方案
2014/01/31 职场文书
2014年党员整改措施
2014/10/24 职场文书
2014年文明创建工作总结
2014/11/25 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书
2015年公司行政后勤工作总结
2015/05/20 职场文书
2016年元旦致辞
2015/08/01 职场文书
python 如何用terminal输入参数
2021/05/25 Python
css常用字体属性与背景属性介绍
2022/02/28 HTML / CSS