js 图片滚动的实现（整理别人的代码而得）

最新推荐文章于 2024-06-25 11:18:39 发布

motian06

最新推荐文章于 2024-06-25 11:18:39 发布

阅读量1.6k

点赞数

分类专栏： js

js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

图片滚动实现的原理：

一块限定大小的区域里放置多张图片，总图片的大小大于区域的大小。

每隔一段时间就往前挪动一段距离，这样就实现了图片滚动的实现。

html代码：

<div id="scroll-l" class="ul-img-list">
  <div id="scroll-lin">
    <ul id="scroll-l1" class="clearfix">
      <li><img src="http://toeic.cn/download/toeic-attachment-00000001-1320657806.jpg" alt="微软"></li>
      <li><img src="http://toeic.cn/download/toeic-attachment-00000001-1319684350.jpg" alt="雪铁龙"></li>
      <li><img src="http://toeic.cn/download/toeic-attachment-00000001-1319684339.jpg" alt="索爱"></li>
      <li><img src="http://toeic.cn/download/toeic-attachment-00000001-1319684321.jpg" alt="李宁"></li>
      <li><img src="http://toeic.cn/download/toeic-attachment-00000001-1319684310.jpg" alt="埃森哲"></li>
      <li><img src="http://toeic.cn/download/toeic-attachment-00000001-1319684301.jpg" alt="TOSHIBA"></li>
      <li><img src="http://toeic.cn/download/toeic-attachment-00000001-1319684290.jpg" alt="Panasonic"></li>
      <li><img src="http://toeic.cn/download/toeic-attachment-00000001-1319684281.jpg" alt="P & G"></li>
      <li><img src="http://toeic.cn/download/toeic-attachment-00000001-1319684269.jpg" alt="novo nordisk"></li>
      <li><img src="http://toeic.cn/download/toeic-attachment-00000001-1319684261.jpg" alt="NEC"></li>
      <li><img src="http://toeic.cn/download/toeic-attachment-00000001-1319684253.jpg" alt="media"></li>
      <li><img src="http://toeic.cn/download/toeic-attachment-00000001-1319684243.jpg" alt="IBM"></li>
      <li><img src="http://toeic.cn/download/toeic-attachment-00000001-1319684236.jpg" alt="FESCO"></li>
      <li><img src="http://toeic.cn/download/toeic-attachment-00000001-1319684227.jpg" alt="DFM"></li>
      <li><img src="http://toeic.cn/download/toeic-attachment-00000001-1319684204.jpg" alt="Bayer"></li>
      <li><img src="http://toeic.cn/download/toeic-attachment-00000001-1319683135.jpg" alt="南航"></li>
      <li><img src="http://toeic.cn/download/toeic-attachment-00000001-1319683127.jpg" alt="sony"></li>
      <li><img src="http://toeic.cn/download/toeic-attachment-00000001-1319683119.jpg" alt="siemens"></li>
      <li><img src="http://toeic.cn/download/toeic-attachment-00000001-1319683111.jpg" alt="philips"></li>
      <li><img src="http://toeic.cn/download/toeic-attachment-00000001-1319683103.jpg" alt="Novartis"></li>
      <li><img src="http://toeic.cn/download/toeic-attachment-00000001-1319683094.jpg" alt="Nike"></li>
      <li><img src="http://toeic.cn/download/toeic-attachment-00000001-1319683087.jpg" alt="moto"></li>
      <li><img src="http://toeic.cn/download/toeic-attachment-00000001-1319683079.jpg" alt="LG"></li>
      <li><img src="http://toeic.cn/download/toeic-attachment-00000001-1319683070.jpg" alt="lenovo"></li>
      <li><img src="http://toeic.cn/download/toeic-attachment-00000001-1319683059.jpg" alt="Hitachi"></li>
      <li><img src="http://toeic.cn/download/toeic-attachment-00000001-1319683050.jpg" alt="haier"></li>
      <li><img src="http://toeic.cn/download/toeic-attachment-00000001-1319683041.jpg" alt="Fujitsu"></li>
      <li><img src="http://toeic.cn/download/toeic-attachment-00000001-1319683032.jpg" alt="CITI"></li>
      <li><img src="http://toeic.cn/download/toeic-attachment-00000001-1319683012.jpg" alt="中国银行"></li>
    </ul>
    <ul id="scroll-l2" class="clearfix"></ul>
  </div>
</div>				 
html结构说明：div #scroll-l不可少，这个设定区域范围大小。div #scroll-lin不可少，这个包裹两个ul。ul #scroll-l1不可少，这个为图片 ul #scroll-l2不可少，这个为滚动到最后一张图片时补充后边的那一段空白（暂时补充，滚完最后一张就会从头再滚）。

css样式：

<style>
.ul-img-list{position: absolute;top:77px;left:210px;width: 600px;overflow:hidden;height: 43px;}//主要设置了区域宽度，overflow溢出内容可见属性
.ul-img-list li{float:left;}//float 滚动的需要
.ul-img-list img{height: 39px;}
//scroll都是自己定义的  scroll-l 显示的宽度大小，溢出内容是否可见，离左边的距离
#scroll-l {margin-left: 0px;overflow: hidden;width: 630px;}
//包裹ul的 scroll-lin 主要的属性是float属性以下同这条
#scroll-lin {float: left;width: 800%;}
#scroll-l1 {float: left;}
#scroll-l2 {float: left;}
</style>



 
js代码：
<script type="text/javascript">
window.onload = function(){
  var speed = 15;	//设置滚动速度
  var tab = document.getElementById('scroll-l'); //获取#scroll-l对象
  var tab1 = document.getElementById('scroll-l1'); //获取#scroll-l1对象
  var tab2 = document.getElementById('scroll-l2'); //获取#scroll-l2对象
  tab2.innerHTML = tab1.innerHTML; //把#scroll-l1对象的内容复制到#scroll-l2对象中
  function Marqueel(){
    if(tab2.offsetWidth-tab.scrollLeft<=0){ //判断#scroll-l1或者#scroll-l2大小是否小于tab.scrollLeft，也就是tab1.offsetWidth
      tab.scrollLeft-=tab1.offsetWidth //重新在滚
    }else{
      tab.scrollLeft++; //累加滚动
    }
  }
	
  var MyMar = setInterval(Marqueel, speed); //多长时间调用一次
  tab.onmouseover = function() {clearInterval(MyMar)}; //鼠标移上去响应事件 清除 MyMar变量
  tab.onmouseout = function() {MyMar = setInterval(Marqueel, speed);}; //鼠标移走响应事件 重设MyMar变量
}
</script>