原生js渐变滑动切换焦点图代码轮播滚动切换特效

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

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

以下是原生js渐变滑动切换焦点图代码轮播滚动切换特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>原生js渐变滑动切换焦点图代码</title>
<style>
ul{ margin:0; padding-left:0;}
li{ list-style:none;}
img{ border:none;}
#main{ width:280px; height:330px; overflow:hidden; position:relative; margin:20px auto 0 auto;}
#main ul{ position:absolute; left:0;}
#main ul li{ width:280px; height:330px; float:left; position:absolute; filter:alpha(opacity=0); opacity:0;}
#btn{ line-height:13px; text-align:center; background:#eeeeee; width:280px; margin:10px auto 0 auto;}
#btn a{ display:inline-block; background:url(img.gif) no-repeat; width:13px; height:13px;}
#btn a.index{ background-position:-13px 0;}
#btn a.active{ background-position:-26px 0;}
#btn a.prev{ background-position:0 0;}
#btn a.next{ background-position:-39px 0;}
</style>
<script type="text/javascript" src="miaov.js"></script>
<script>
window.onload = function(){
	var oMain = document.getElementById('main');
	var oUl = oMain.getElementsByTagName('ul')[0];
	var aLi = oUl.getElementsByTagName('li');
	
	var oBtn = document.getElementById('btn');
	var aA = oBtn.getElementsByTagName('a');
	
	var iNow = 1;
	var iNow2 = 1;
	var bBtn = true;
	var num = 3;
	var timer = null;
	
	oUl.style.width = aLi.length * aLi[0].offsetWidth + 'px';
	
	aA[0].onclick = function(){
		if(bBtn){
			clearInterval(timer);
			timer = setInterval(autoPlay,3000);
			for(var i=0;i<aLi.length;i++){
				aLi[i].style.position = 'relative';
				aLi[i].style.filter = 'alpha(opacity=100)';
				aLi[i].style.opacity = 1;
			}
			oUl.style.left = -(iNow-1)*aLi[0].offsetWidth + 'px';
			if(iNow==1){
				iNow = aLi.length;
				aLi[aLi.length-1].style.position = 'relative';
				aLi[aLi.length-1].style.left = -aLi.length * aLi[0].offsetWidth + 'px';
			}
			else{
				iNow--;
			}
			iNow2--;
			toRun();
			bBtn = false;
		}
	};
	aA[aA.length-1].onclick = function(){
		if(bBtn){
			clearInterval(timer);
			timer = setInterval(autoPlay,3000);
			for(var i=0;i<aLi.length;i++){
				aLi[i].style.position = 'relative';
				aLi[i].style.filter = 'alpha(opacity=100)';
				aLi[i].style.opacity = 1;
			}
			oUl.style.left = -(iNow-1)*aLi[0].offsetWidth + 'px';
			if(iNow==aLi.length){
				iNow = 1;
				aLi[0].style.position = 'relative';
				aLi[0].style.left = aLi.length * aLi[0].offsetWidth + 'px';
			}
			else{
				iNow++;
			}
			iNow2++;
			toRun();
			bBtn = false;
		}
	};
	
	for(var i=1;i<aA.length-1;i++){
		aA[i].index = i;
		aA[i].onclick = function(){
			clearInterval(timer);
			timer = setInterval(autoPlay,3000);
			iNow = this.index;
			iNow2 = this.index;
			toShow();
		};
	}
	
	function toRun(){	
		for(var i=1;i<aA.length-1;i++){
			aA[i].className = 'index';
		}
		aA[iNow].className = 'active';
		
		startMove(oUl,{left:-(iNow2-1)*aLi[0].offsetWidth},function(){
			if(iNow==1){
				aLi[0].style.position = 'relative';
				aLi[0].style.left = 0;
				oUl.style.left = 0;
				iNow2 = 1;
			}
			else if(iNow==aLi.length){
				aLi[aLi.length-1].style.position = 'relative';
				aLi[aLi.length-1].style.left = 0;
				oUl.style.left = -(aLi.length-1)*aLi[0].offsetWidth + 'px';
				iNow2 = aLi.length;
			}
			
			for(var i=0;i<aLi.length;i++){
				aLi[i].style.position = 'absolute';
				aLi[i].style.filter = 'alpha(opacity=0)';
				aLi[i].style.opacity = 0;
			}
			oUl.style.left = 0;
			aLi[iNow2-1].style.zIndex = num++;
			aLi[iNow2-1].style.filter = 'alpha(opacity=100)';
			aLi[iNow2-1].style.opacity = 1;
			
			bBtn = true;
		});
	}
	
	function toShow(){
		for(var i=1;i<aA.length-1;i++){
			aA[i].className = 'index';
		}
		for(var i=0;i<aLi.length;i++){
			startMove(aLi[i],{opacity:0});
		}
		aA[iNow].className = 'active';
		startMove(aLi[iNow-1],{opacity:100},function(){
			aLi[iNow-1].style.zIndex = num++;
			
		});
	}
	
	timer = setInterval(autoPlay,3000);
	
	function autoPlay(){
		if(iNow==aLi.length){
			iNow = 1;
			iNow2 = 1;
		}
		else{
			iNow++;
			iNow2++;
		}
		
		toShow();
	}
};
</script>
</head>
<body>
<div id="main">
	<ul>
    	<li style="z-index:2; filter:alpha(opacity=100); opacity:1;"><a href="#"><img src="1.jpg" /></a></li>
        <li><a href="#"><img src="2.jpg" /></a></li>
        <li><a href="#"><img src="3.jpg" /></a></li>
        <li><a href="#"><img src="4.jpg" /></a></li>
    </ul>
</div>
<div id="btn">
	<a class="prev" href="javascript:;"></a>	
	<a class="active" href="javascript:;"></a>	
	<a class="index" href="javascript:;"></a>	
	<a class="index" href="javascript:;"></a>	
	<a class="index" href="javascript:;"></a>	
	<a class="next" href="javascript:;"></a>
</div>
</body>
</html>

JS代码(miaov.js):

// JavaScript Documentfunction startMove(obj,json,fnEnd){
	clearInterval(obj.timer);
	obj.timer = setInterval(function(){
	doMove(obj,json,fnEnd);
}
,30);
}
function doMove(obj,json,fnEnd){
	var iCur = 0;
	var attr = null;
	var bStop = true;
	for(attr in json){
	if(attr=='opacity'){
	if(parseInt(100*getStyle(obj,attr))==0){
	iCur = parseInt(100*getStyle(obj,attr));
}
else{
	iCur = parseInt(100*getStyle(obj,attr)) || 100;
}
}
else{
	iCur = parseInt(getStyle(obj,attr)) || 0;
}
var iSpeed = (json[attr] - iCur)/5;
	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);
	if(fnEnd){
	fnEnd.call(obj);
}
}
}
function stopMove(obj){
	clearInterval(obj.timer);
}
function getStyle(obj,attr){
	if(obj.currentStyle){
	return obj.currentStyle[attr];
}
else{
	return getComputedStyle(obj)[attr];
}
}

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