支持鼠标滚轮图片自适应的焦点图轮播滚动切换特效

版权：原创更新时间：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=gb2312" />
<meta name="keywords" content="JS代码,焦点图,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为支持鼠标滚轮图片自适应的焦点图代码" />
<title>支持鼠标滚轮图片自适应的焦点图代码</title>
<link href="css/lrtk.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/lrtk.js"></script>
<base target="_blank" />
</head>
<body>
<!-- 代码 开始 -->
<div id="box">
    <ul>
        <li><a href="#"><img src="images/1.jpg" alt="内容" title="内容" /></a></li>
        <li><a href="#"><img src="images/2.jpg" alt="内容" title="内容" /></a></li>
        <li><a href="#"><img src="images/3.jpg" alt="内容" title="内容" /></a></li>
        <li><a href="#"><img src="images/4.jpg" alt="内容" title="内容" /></a></li>
        <li><a href="#"><img src="images/5.jpg" alt="内容" title="内容" /></a></li>
        <li><a href="#"><img src="images/6.jpg" alt="内容" title="内容" /></a></li>
        <li><a href="#"><img src="images/7.jpg" alt="内容" title="内容" /></a></li>
        <li><a href="#"><img src="images/8.jpg" alt="内容" title="内容" /></a></li>
    </ul>
</div>
<div style="text-align:center;margin:590px 0 200px 0">
<h1>用『鼠标滚轮』及『左右键』切换图片 - <span>当前图片是第1张</span></h1>
</div>
</body>
</html>

JS代码(lrtk.js):

// ����ͼ�� �Ѽ����� www.lanrentuku.comwindow.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.lanrentuku.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();
}
,4000);
	//���ʱ��}
autoPlay();
	function countTime(){
	var iNum=5;
	//�Զ����ŵ���ʱʱ��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;
}
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();
}
}
}

CSS代码(lrtk.css):

/* ����ͼ�� �Ѽ����� www.lanrentuku.com */
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:20px;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;bottom:20px;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;}

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