js圖片漸變和移動切換，有箭頭和分頁圓點
效果展示
代碼如下：
<!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="http://hovertree.com/texiao/js/31/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="http://hovertree.com/h/bjaf/mll8cpr3.htm" target="_blank"><img src="http://hovertree.com/texiao/js/31/1.jpg" /></a></li>
<li><a href="http://hovertree.com/hovertreescj/" target="_blank"><img src="http://hovertree.com/texiao/js/31/2.jpg" /></a></li>
<li><a href="http://hovertree.com/tiku/bjaf/pic2kvcg.htm" target="_blank"><img src="http://hovertree.com/texiao/js/31/3.jpg" /></a></li>
<li><a href="http://hovertree.com/code/jquery/krll21ld.htm" target="_blank"><img src="http://hovertree.com/texiao/js/31/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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>適用浏覽器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>來源：<a href="http://hovertree/" target="_blank">何問起</a> <a href="http://hovertree.com/menu/texiao/" target="_blank">網頁特效</a>
<a href="http://hovertree.com/h/bjaf/5e1ot980.htm" target="_blank">代碼說明</a></p>
</div>
</body>
</html>