JS实现图片横向滚动效果示例代码

更新时间：2013年09月04日 16:35:06 作者：

图片横向滚动效果，大家可能都已经很熟悉了，本文为大家介绍下使用js实现横向滚动效果，喜欢的朋友可以参考下，希望对大家有所帮助

 
<!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> 

效果：

您可能感兴趣的文章:

单线程JavaScript实现异步过程详解
这篇文章主要介绍了单线程JavaScript实现异步过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-05-05
面试判断元素是否在可视区域中IntersectionObserver详解
这篇文章主要为大家介绍了判断元素是否在可视区域中IntersectionObserver面试详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
微信小程序基于slider组件动态修改标签透明度的方法示例
这篇文章主要介绍了微信小程序基于slider组件动态修改标签透明度的方法,可通过slider组件拖动实现图片透明度的改变功能,涉及微信小程序事件绑定、base64格式图片载入及slider组件使用技巧,需要的朋友可以参考下
2017-12-12
举例说明javascript冒泡排序
这篇文章主要为大家介绍了javascript冒泡排序，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-11-11
Javascript中Eval函数的使用说明
JavaScript有许多小窍门来使编程更加容易。其中之一就是eval()函数，这个函数可以把一个字符串当作一个JavaScript表达式一样去执行它。
2008-10-10
ES6实现图片切换特效代码
这篇文章主要介绍了ES6实现图片切换特效代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2020-01-01
ES6扩展运算符用法实例分析
这篇文章主要介绍了ES6扩展运算符用法,结合实例形式分析了ES6扩展运算符的功能、使用方法与相关注意事项,需要的朋友可以参考下
2017-10-10
如何轻松在JavaScript中字符串的字符之间添加空格
在前端开发的过程中,我们经常会遇到需要对于输入的字符串进行格式化处理,下面这篇文章主要给大家介绍了关于如何轻松在JavaScript中字符串的字符之间添加空格的相关资料,需要的朋友可以参考下
2023-03-03
js实现省市联动效果的简单实例
本篇文章主要是对js实现省市联动效果的简单实例进行了介绍，需要的朋友可以过来,希望对大家有所帮助
2014-02-02
B/S开发中常用javaScript技术与代码
B/S开发中常用javaScript技术与代码...
2007-03-03