<!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>
<style>
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;}
a{color:#2d374b;text-decoration:none}
a:hover{color:#cd0200;text-decoration:underline}
em{font-style:normal}
li{list-style:none}
img{border:0;vertical-align:middle}
table{border-collapse:collapse;border-spacing:0}
p{word-wrap:break-word}
#div1{position: relative; margin:50px auto; width:375px; height:534px; overflow:hidden;}
#div1 ul{position:absolute; left:0;}
#div1 li{float:left;}
#div1 li img{cursor:pointer;}
#btn{position:absolute; width:100%; text-align:center; bottom:0;}
#btn a{ cursor:pointer;width:11px; height:11px; background:#666666; display:inline-block;}
#btn a.active{ background:#FFF;}
/*#btn a:hover{background:#FFF;}*/
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function getStyle(obj,attr)
{
if(obj.currentStyle)
{
return obj.currentStyle[attr]
}
else
{
return getComputedStyle(obj,false)[attr]
}
}
function startMove(obj,json,fn)
{
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var bStop=true;
for(var attr in json)
{
var iCur=0;
if(attr=='opacity')
{
iCur=parseInt(parseFloat(getStyle(obj,attr))*100)
}
else
{
iCur=parseInt(getStyle(obj,attr))
}
var iSpeed=(json[attr]-iCur)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
if(iCur!=json[attr])
{
bStop=false;
}
if(attr=='opacity')
{
obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
obj.style.opacity=(iCur+iSpeed)/100;
}
else
{
obj.style[attr]=iCur+iSpeed+'px';
}
}
if(bStop)
{
clearInterval(obj.timer);
if(fn)
{
fn()
}
}
},30)
}
window.onload=function()
{
var oDiv=document.getElementById('div1');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aImg=oDiv.getElementsByTagName('img')
var oBtn=document.getElementById('btn');
var aA=oBtn.getElementsByTagName('a');
var imgWidth=375;
var iNow=0;
var i=0;
var timer=null;
oUl.style.width=aA.length*imgWidth+'px';
for(i=0;i<aA.length;i++)
{
aA[i].index=i;
aA[i].onclick=function()
{
for(i=0;i<aA.length;i++)
{
aA[i].className=''
}
this.className='active'
startMove(oUl,{left : -this.index*imgWidth})
}
}
timer=setInterval(toRun,2000)
function toRun()
{
if(iNow==aA.length-1)
{
iNow=0;
}
else
{
iNow++;
}
for(i=0;i<aA.length;i++)
{
aA[i].className=''
}
aA[iNow].className = 'active';
startMove(oUl,{left : - iNow * imgWidth})
}
for(i=0;i<aImg.length;i++)
{
aImg[i].onmouseover=aA[i].onmouseover=function()
{
clearInterval(timer)
}
aImg[i].onmouseout=aA[i].onmouseout=function()
{
timer=setInterval(toRun,2000)
}
}
}
</script>
</head>
<body>
<div id="div1">
<ul>
<li><img src="轮番1.jpg" /></li>
<li><img src="轮番2.jpg" /></li>
<li><img src="轮番3.jpg" /></li>
<li><img src="轮番4.jpg" /></li>
<li><img src="轮番5.jpg" /></li>
<li><img src="轮番6.jpg" /></li>
<li><img src="轮番7.jpg" /></li>
<li><img src="轮番8.jpg" /></li>
<li><img src="轮番9.jpg" /></li>
<li><img src="轮番10.jpg" /></li>
<li><img src="轮番11.jpg" /></li>
</ul>
<div id="btn">
<a href="javascript:;" class="active"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;}
a{color:#2d374b;text-decoration:none}
a:hover{color:#cd0200;text-decoration:underline}
em{font-style:normal}
li{list-style:none}
img{border:0;vertical-align:middle}
table{border-collapse:collapse;border-spacing:0}
p{word-wrap:break-word}
#div1{position: relative; margin:50px auto; width:375px; height:534px; overflow:hidden;}
#div1 ul{position:absolute; left:0;}
#div1 li{float:left;}
#div1 li img{cursor:pointer;}
#btn{position:absolute; width:100%; text-align:center; bottom:0;}
#btn a{ cursor:pointer;width:11px; height:11px; background:#666666; display:inline-block;}
#btn a.active{ background:#FFF;}
/*#btn a:hover{background:#FFF;}*/
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function getStyle(obj,attr)
{
if(obj.currentStyle)
{
return obj.currentStyle[attr]
}
else
{
return getComputedStyle(obj,false)[attr]
}
}
function startMove(obj,json,fn)
{
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var bStop=true;
for(var attr in json)
{
var iCur=0;
if(attr=='opacity')
{
iCur=parseInt(parseFloat(getStyle(obj,attr))*100)
}
else
{
iCur=parseInt(getStyle(obj,attr))
}
var iSpeed=(json[attr]-iCur)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
if(iCur!=json[attr])
{
bStop=false;
}
if(attr=='opacity')
{
obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
obj.style.opacity=(iCur+iSpeed)/100;
}
else
{
obj.style[attr]=iCur+iSpeed+'px';
}
}
if(bStop)
{
clearInterval(obj.timer);
if(fn)
{
fn()
}
}
},30)
}
window.onload=function()
{
var oDiv=document.getElementById('div1');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aImg=oDiv.getElementsByTagName('img')
var oBtn=document.getElementById('btn');
var aA=oBtn.getElementsByTagName('a');
var imgWidth=375;
var iNow=0;
var i=0;
var timer=null;
oUl.style.width=aA.length*imgWidth+'px';
for(i=0;i<aA.length;i++)
{
aA[i].index=i;
aA[i].onclick=function()
{
for(i=0;i<aA.length;i++)
{
aA[i].className=''
}
this.className='active'
startMove(oUl,{left : -this.index*imgWidth})
}
}
timer=setInterval(toRun,2000)
function toRun()
{
if(iNow==aA.length-1)
{
iNow=0;
}
else
{
iNow++;
}
for(i=0;i<aA.length;i++)
{
aA[i].className=''
}
aA[iNow].className = 'active';
startMove(oUl,{left : - iNow * imgWidth})
}
for(i=0;i<aImg.length;i++)
{
aImg[i].onmouseover=aA[i].onmouseover=function()
{
clearInterval(timer)
}
aImg[i].onmouseout=aA[i].onmouseout=function()
{
timer=setInterval(toRun,2000)
}
}
}
</script>
</head>
<body>
<div id="div1">
<ul>
<li><img src="轮番1.jpg" /></li>
<li><img src="轮番2.jpg" /></li>
<li><img src="轮番3.jpg" /></li>
<li><img src="轮番4.jpg" /></li>
<li><img src="轮番5.jpg" /></li>
<li><img src="轮番6.jpg" /></li>
<li><img src="轮番7.jpg" /></li>
<li><img src="轮番8.jpg" /></li>
<li><img src="轮番9.jpg" /></li>
<li><img src="轮番10.jpg" /></li>
<li><img src="轮番11.jpg" /></li>
</ul>
<div id="btn">
<a href="javascript:;" class="active"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
</body>
</html>