<!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>
<!--sucai58.com 专注html3+css3素材的网站-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用鼠标滚轮及左右键切换图片</title>
<style type="text/css">
html,body { overflow:hidden; }
body { margin:0; background:#888; }
h1 { text-align:center; color:#fff; color:#ff3; margin:0; font-size:18px; line-height:44px; font-family:"微软雅黑"; }
h1 a { color:#9f0; text-decoration:none; border-bottom:1px dotted #9f0; }
h1 a:hover { color:#fff; border-bottom:1px solid #fff; }
#box { height:550px; position:absolute; top:50px; overflow:hidden; }
#box ul { margin:0; padding-left:0; position:absolute; top:0; left:0; height:550px; z-index:1; }
#box ul li { list-style:none; float:left; }
#box p { line-height:30px; position:absolute; top:1px; left:0; width:100%; z-index:2; text-align:center; margin:0; }
#box p a { display:inline-block; height:30px; padding:0 10px; background:#000; font-size:14px; font-family:arial; line-height:30px; color:#fff; text-decoration:none; filter:alpha(opacity:80); opacity:0.8; margin-right:1px; }
#box p .active { background:yellow; color:#000; font-weight:bold; }
#box img { height:550px; }
</style>
<script type="text/javascript" src="move.js"></script>
<script type="text/javascript">
window.onload=function()
{
var oDiv=document.getElementById('box');
mouseScroll(oDiv);
};
function mouseScroll(obj)
{
if(!obj) return false;
var oSpan=document.getElementsByTagName('h1')[0].getElementsByTagName('span')[0];
var oUl=obj.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var iLiWidth=[];
var iUlResult=0;
var iCurr=0;
var iPicTarget=0;
var iSummation=0;
var iNow=1;
var iCountTime=null;
var autoTime=null;
for(var i=0; i<aLi.length; i++){ iLiWidth.push(aLi[i].offsetWidth); }
iSummation=sumFn(iLiWidth);
for(var i=0; i<iLiWidth.length; i++){ iUlResult+=iLiWidth[i]; }
oUl.style.width=iUlResult+'px';
function autoStyle()
{
obj.style.width=aLi[iCurr].offsetWidth+'px';
obj.style.left=(document.documentElement.clientWidth-obj.offsetWidth)/2+'px';
}
autoStyle();
window.onresize=function(){ autoStyle(); };
var oP=document.createElement('p');
for(var i=0; i<aLi.length; i++)
{
var oA=document.createElement('a');
oA.href='http://www.baidu.com/';
oA.target='_blank';
oA.innerHTML=i+1;
oP.appendChild(oA);
}
oP.getElementsByTagName('a')[0].className='active';
obj.appendChild(oP);
for(var i=0,aA=obj.getElementsByTagName('p')[0].getElementsByTagName('a'); i<aA.length; i++)
{
aA[i].index=i;
aA[i].onmouseover=function()
{
clearInterval(autoTime);
iCurr=this.index;
picScroll();
};
aA[i].onmouseout=function(){
countTime();
};
}
addScrollEvent(document, [mouseDown, mouseUp]);
function mouseDown()
{
clearInterval(autoTime);
countTime();
iCurr++;
picScroll();
}
function mouseUp()
{
clearInterval(autoTime);
countTime();
iCurr--;
picScroll();
}
document.onkeydown=function(ev)
{
clearInterval(autoTime);
countTime();
ev=ev||window.event;
if(ev.keyCode==37)
{
iCurr--;
}
if(ev.keyCode==39)
{
iCurr++;
}
picScroll();
}
function picScroll()
{
if(iCurr==aLi.length)
{
iCurr=aLi.length-1;
}
if(iCurr<0)
{
iCurr=0;
}
for(var i=0; i<aLi.length; i++)
{
oP.getElementsByTagName('a')[i].className='';
}
oP.getElementsByTagName('a')[iCurr].className='active';
oSpan.innerHTML='当前图片是第'+(iCurr+1)+'张';
var tmpArr=[];
for(var i=0; i<iCurr; i++)
{
tmpArr.push(iLiWidth[i]);
}
iPicTarget=sumFn(tmpArr);
startMove(oUl,{left:-iPicTarget});
startMove(obj,{width:aLi[iCurr].offsetWidth});
}
function autoPlay()
{
clearInterval(autoTime);
autoTime=setInterval(function(){
if(iCurr==aLi.length-1)
{
iNow=-1;
}
if(iCurr==0)
{
iNow=1;
}
iCurr+=iNow;
oSpan.innerHTML='当前图片是第'+(iCurr+1)+'张';
picScroll();
}, 2000);
}
autoPlay();
function countTime()
{
var iNum=10;
clearTimeout(iCountTime);
iCountTime=setInterval(function(){
if(iNum==0)
{
oSpan.innerHTML='第0秒后自动播放';
clearInterval(iCountTime);
autoPlay();
}
else
{
iNum--;
oSpan.innerHTML='第'+(iNum+1)+'秒后自动播放';
}
}, 1000);
}
}
function sumFn(arr)
{
var result=0;
for(var i=0; i<arr.length; i++)
{
result+=arr[i];
}
return result;
}
function addScrollEvent()
{
var obj=arguments[0];
var functionSet=arguments[1];
function scrollEvent(ev)
{
var oEvent=ev||event;
var down=false;
if(oEvent.wheelDelta){/*ie*/ down=oEvent.wheelDelta<0?true:false; }else{ down=oEvent.detail<0?false:true; }
if(down){ functionSet[0](); }else{ functionSet[1](); }
if(oEvent.preventDefault){ oEvent.preventDefault();}
return false;
}
if(obj.addEventListener){ obj.addEventListener('DOMMouseScroll', scrollEvent, false); }
obj.onmousewheel=scrollEvent;
}
</script>
</head>
<body>
<h1>用『鼠标滚轮』及『左右键』切换图片 - <span>当前图片是第1张</span></h1>
<div id="box">
<ul>
<li><img src="images/1.jpg" alt="‘嘘～请安静……’" title="‘嘘～请安静……’" /></li>
<li><img src="images/2.jpg" alt="永远的剪刀手" title="永远的剪刀手" /></li>
<li><img src="images/3.jpg" alt="唯美" title="唯美" /></li>
<li><img src="images/4.jpg" alt="身材很棒哈" title="身材很棒哈" /></li>
<li><img src="images/5.jpg" alt="重工业与死亡" title="重工业与死亡" /></li>
<li><img src="images/6.jpg" alt="足球宝贝" title="足球宝贝" /></li>
<li><img src="images/7.jpg" alt="PS美女手绘" title="PS美女手绘" /></li>
<li><img src="images/8.jpg" alt="个性网站" title="个性网站" /></li>
</ul>
</div>
</body>
</html>
