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 相关文章推荐
IE event.srcElement和FF event.target 功能比较
Mar 01 Javascript
AngularJS学习笔记之依赖注入详解
May 16 Javascript
深入浅析jQuery对象$.html
Aug 22 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
Sep 19 Javascript
老生常谈原生JS执行环境与作用域
Nov 22 Javascript
Javascript之面向对象--方法
Dec 02 Javascript
jQuery实现搜索页面关键字的功能
Feb 16 Javascript
详解Angular 自定义结构指令
Jun 21 Javascript
vue中使用localstorage来存储页面信息
Nov 04 Javascript
浅谈Vue项目骨架屏注入实践
Aug 05 Javascript
JS对日期操作封装代码实例
Nov 08 Javascript
webpack中的模式(mode)使用详解
Feb 20 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 Stream_*系列函数
2010/08/01 PHP
为百度UE编辑器上传图片添加水印功能
2015/04/16 PHP
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
2007/02/05 Javascript
javascript标签在页面中的位置探讨
2013/04/11 Javascript
Jquery中val()表单取值赋值的实例代码
2013/08/15 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
2013/12/02 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
2014/10/17 Javascript
浅谈JavaScript中的String对象常用方法
2015/02/25 Javascript
jquery实现超简洁的TAB选项卡效果代码
2015/08/28 Javascript
学习javascript面向对象 理解javascript原型和原型链
2016/01/04 Javascript
复杂的javascript窗口分帧解析
2016/02/19 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
2016/08/30 Javascript
微信和qq时间格式模板实例详解
2016/10/21 Javascript
Vue.js开发环境搭建
2016/11/10 Javascript
Vue中props的使用详解
2018/06/15 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
2019/04/17 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
2019/09/02 Javascript
[01:06:59]完美世界DOTA2联赛PWL S2 Magma vs FTD 第一场 11.29
2020/12/02 DOTA
多线程爬虫批量下载pcgame图片url 保存为xml的实现代码
2013/01/17 Python
python对html代码进行escape编码的方法
2015/05/04 Python
Python中正则表达式的用法总结
2019/02/22 Python
python二进制读写及特殊码同步实现详解
2019/10/11 Python
详解Anconda环境下载python包的教程(图形界面+命令行+pycharm安装)
2019/11/11 Python
python退出循环的方法
2020/06/18 Python
pycharm 实现光标快速移动到括号外或行尾的操作
2021/02/05 Python
波兰最大的儿童服装连锁店之一:5.10.15.
2018/02/11 全球购物
美国社交购物市场:MassGenie
2019/02/18 全球购物
亚洲在线旅行门户网站:Expedia.com.hk(智游网)
2020/04/14 全球购物
个人求职信范文分享
2014/01/06 职场文书
争论的故事教学反思
2014/02/06 职场文书
农村文化活动总结
2014/08/28 职场文书
小学生学习保证书
2015/02/26 职场文书
2015年化妆品销售工作总结
2015/05/11 职场文书
100句人生哲理语录集锦:强者征服今天,懒汉坐等明天
2019/10/18 职场文书
Ajax常用封装库——Axios的使用
2021/05/08 Javascript
Vue接口封装的完整步骤记录
2021/05/14 Vue.js