鼠标滚轮控制图片切换效果代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是鼠标滚轮控制图片切换效果代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.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>
<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>

JS代码(move.js):

function startMove(obj,json,fnEnd){
	if(obj.timer){
	clearInterval(obj.timer);
}
obj.timer=setInterval(function (){
	doMove(obj,json,fnEnd);
	document.getElementById('box').style.left=(document.documentElement.clientWidth-document.getElementById('box').offsetWidth)/2+'px';
}
,30);
}
function getStyle(obj,attr){
	if(obj.currentStyle){
	return obj.currentStyle[attr];
}
else{
	return getComputedStyle(obj,false)[attr];
}
}
function doMove(obj,json,fnEnd){
	var iCur=0;
	var attr='';
	var bStop=true;
	//假设运动已经该停止了for(attr in json){
	if(attr=='opacity'){
	iCur=parseInt(100*parseFloat(getStyle(obj,'opacity')));
}
else{
	iCur=parseInt(getStyle(obj,attr));
}
if(isNaN(iCur)){
	iCur=0;
}
var iSpeed=(json[attr]-iCur)/6;
	iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
	if(json[attr]!=iCur){
	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);
	obj.timer=null;
	if(fnEnd){
	fnEnd();
}
}
}

附件:下载该文件资源,减少时间成本(增值服务)