您的位置：首页 > Web前端 > JavaScript

js图片滚动实例

2014-12-26 15:09 288 查看

纯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)
}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航