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 相关文章推荐
JQuery与JSon实现的无刷新分页代码
Sep 13 Javascript
基于编写jQuery的无缝滚动插件
Aug 02 Javascript
javascript显式类型转换实例分析
Apr 25 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
Aug 10 Javascript
遍历js中对象的属性和值的实例
Nov 21 Javascript
不使用 JS 匿名函数理由
Nov 17 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
Feb 09 Javascript
在element-ui的select下拉框加上滚动加载
Apr 18 Javascript
fastadmin中调用js的方法
May 14 Javascript
ES6中Symbol、Set和Map用法详解
Aug 20 Javascript
使用Promise封装小程序wx.request的实现方法
Nov 13 Javascript
在Vue中获取自定义属性方法:data-id的实例
Sep 09 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
人大复印资料处理程序_查询篇
2006/10/09 PHP
php download.php实现代码 跳转到下载文件(response.redirect)
2009/08/26 PHP
深入extjs与php参数交互的详解
2013/06/25 PHP
小谈php正则提取图片地址
2014/03/27 PHP
Yii模型操作之criteria查找数据库的方法
2016/07/15 PHP
谈谈php对接芝麻信用踩的坑
2016/12/01 PHP
Ubuntu 16.04下安装PHP 7过程详解
2017/03/28 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
根据邮箱的域名跳转到相应的登录页面的代码
2012/02/27 Javascript
jquery获取元素值的方法(常见的表单元素)
2013/11/15 Javascript
JS delegate与live浅析
2013/12/21 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
2014/09/26 Javascript
jQuery过滤选择器详解
2015/01/13 Javascript
js获取滚动距离的方法
2015/05/30 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
2016/01/15 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
2017/07/13 Javascript
微信小程序顶部可滚动导航效果
2017/10/31 Javascript
vue组件中使用iframe元素的示例代码
2017/12/13 Javascript
如何优雅地在vue中添加权限控制示例详解
2019/03/07 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
2020/01/05 Javascript
js实现时间日期校验
2020/05/26 Javascript
vue 使用async写数字动态加载效果案例
2020/07/18 Javascript
[02:19]DOTA2上海特级锦标赛 观赛指南 Spectator Guide
2016/02/04 DOTA
python进阶教程之模块(module)介绍
2014/08/30 Python
Python中logging模块的用法实例
2014/09/29 Python
归纳整理Python中的控制流语句的知识点
2015/04/14 Python
实践Python的爬虫框架Scrapy来抓取豆瓣电影TOP250
2016/01/20 Python
Python补齐字符串长度的实例
2018/11/15 Python
创建Django项目图文实例详解
2019/06/06 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
英国皇家邮政海外旗舰店:Royal Mail
2018/02/21 全球购物
中软Java笔试题
2012/11/11 面试题
工程安全员岗位职责
2014/03/09 职场文书
2015年餐厅服务员工作总结
2015/04/23 职场文书
2016计划生育先进个人事迹材料
2016/02/29 职场文书
Nginx配置https的实现
2021/11/27 Servers