js图片滚动实例

最新推荐文章于 2022-02-18 19:52:16 发布

yxcs

最新推荐文章于 2022-02-18 19:52:16 发布

阅读量1.4k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/xianyu410725/article/details/42172253

版权

js 专栏收录该内容

62 篇文章 1 订阅

订阅专栏

纯js实现的图片滚动的代码

html部分

<!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=UTF-8" />
<title></title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jb51zone.js"></script>
</head>
<body>
<!-- 代码 开始 -->
  <div id="playBox">
    <div id="pre"></div>              //前进后退按钮
    <div id="next"></div>
    <div id="smalltitle">
      <ul>                            //圆点部分
        <li class="thistitle"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <ul id="oUlplay">                //滚动的图片，width=1000px   height=409px
       <li><a href="http://www.jb51.net/" target="_blank"><img src="images/1.jpg"</a></li>
       <li><a href="http://www.jb51.net/" target="_blank"><img src="images/2.jpg"</a></li>
       <li><a href="http://www.jb51.net/" target="_blank"><img src="images/3.jpg"</a></li>
       <li><a href="http://www.jb51.net/" target="_blank"><img src="images/4.jpg"</a></li>
       <li><a href="http://www.jb51.net/" target="_blank"><img src="images/5.jpg"</a></li>
       <li><a href="http://www.jb51.net/" target="_blank"><img src="images/6.jpg"</a></li>
    </ul>
  </div>
<!-- 代码 结束 -->
</body>
</html>

CSS部分

*{ margin:0; padding:0; list-style:none;}
#divSmallBox{overflow:hidden;*display:inline;*zoom:1;width:10px;height:10px;margin:0 5px;border-radius:10px;background:#ffffff;}
#playBox{ width:1000px; height:409px; margin:20px auto; background:#333; position:relative; overflow:hidden;}
#playBox #oUlplay { width:99999px; position:absolute; left:0; top:0;}
#playBox #oUlplay li{ float:left;}
#playBox #pre{ cursor:pointer; width:45px; height:45px; background:url(../images/l.png) no-repeat; position:absolute; top:190px; left:10px; z-index:10;}
#playBox #next{ cursor:pointer; width:45px; height:45px; background:url(../images/r.png) no-repeat; position:absolute; top:190px; right:10px; z-index:10;}
#playBox #smalltitle {width:1000px; height:10px; position:absolute; bottom:15px; z-index:10}
#playBox #smalltitle ul{ width:120px; margin:0 auto;}
#playBox #smalltitle ul li{ width:10px; height:10px; margin:0 5px; border-radius:10px; background:#ffffff; float:left; overflow:hidden;*display:inline;*zoom:1;}
#playBox #smalltitle .thistitle{ background:#69aaec;}

js部分

function getStyle(obj,name)                                   //获取样式值，这里是left的值  兼容IE
{
	if(obj.currentStyle)
	{
		return obj.currentStyle[name]
	}
	else
	{
		return getComputedStyle(obj,false)[name]
	}
}

function startMove(obj,add)                                   //图片减速滚动效果实现
{
	clearInterval(obj.timer)
	obj.timer = setInterval(function(){
	   var cutt = 0 ;
	   cutt = Math.round(parseInt(getStyle(obj,"left")));
	   var speed = (add-cutt)/4;
	   speed = speed>0?Math.ceil(speed):Math.floor(speed);
	   if(cutt==add)
	   {
		   clearInterval(obj.timer)
	   }
	   else
	   {
			obj.style['left'] = cutt+speed+'px';
		   
	   }
	   
	},30)
}

  window.onload = function()
  {
	  var oDiv = document.getElementById('playBox');
	  var oPre =document.getElementById('pre');
	  var oNext =document.getElementById('next');
	  var oUlBig =document.getElementById('oUlplay');
	  var aBigLi = oUlBig.getElementsByTagName('li');
	  var oDivSmall =document.getElementById('smalltitle');smalltitle
	  var aLiSmall = oDivSmall.getElementsByTagName('li');
	  
	  function tab()
	  {
	     for(var i=0; i<aLiSmall.length; i++)
	     {
		    aLiSmall[i].className = '';
	     }
	     aLiSmall[now].className = 'thistitle'
	     startMove(oUlBig,-(now*aBigLi[0].offsetWidth))
	  }
	  var now = 0;
	  for(var i=0; i<aLiSmall.length; i++)
	  {
		  aLiSmall[i].index = i;
		  aLiSmall[i].onclick = function()
		  {
			  now = this.index;
			  tab();
		  }
	 }
	  oPre.onclick = function()
	  {
		  now--
		  if(now ==-1)
			  now = aBigLi.length;
		  tab();
	  }
	   oNext.onclick = function()
	  {
		  now++
		  if(now ==aBigLi.length)
		     now = 0;
		  tab();
	  }
	  var timer = setInterval(oNext.onclick,3000) 
	  oDiv.onmouseover = function()
	  {
		  clearInterval(timer)
	  }
	   oDiv.onmouseout = function()
	  {
		  timer = setInterval(oNext.onclick,3000)
	  }
  }