非常漂亮的JS CSS圖片幻燈切換特效_javascript技巧

非常漂亮的JS CSS圖片幻燈切換特效，用在你的首頁比較不錯，寬屏圖片格式，每張圖片平滑飛入切換，滑鼠放上自動切換，和FLASH的平滑效果差不多，視覺衝擊效果很爽，而且程式碼也不多，偵錯呼叫都方便，建議關註一下哦!

複製程式碼 程式碼如下:

>


* { 邊距：0;填充：0； }
正文{ 背景：#FFF;顏色：#333；字體：12px/1.6em Helvetica、Arial、sans-serif； }
h1、h2、h3、h4、h5、h6 { 字體大小：1em; }
a { 顏色：#0287CA;文字裝飾：無； }
a:hover { 文字裝飾:下劃線; }
ul, li { 列表樣式：無； }
fieldset, img { border:none; }
圖例{ 顯示：無； }
em、strong、cite、th { font-style:normal;字體粗細：正常； }
輸入、文字區域、選擇、按鈕{字體：12px Helvetica、Arial、sans-serif; }
表{ border-collapse:collapse; }
html { 溢出：-moz-scrollbars-vertical; }
#ibanner { 位置：相對寬度；寬度；寬度； ：650px；高度：250px；溢出：隱藏；邊距：20px 0 20px 300px; }
#ibanner_pic {}
#ibanner_pic a { 位置：絕對；頂部：0；顯示：塊；寬度：650pxx；高度：250px；溢出：隱藏； }
#ibanner_btn { 位置：絕對； z 索引：9999；右：5px；底部：5px；字體粗細：700；字體系列：Arial; }
#ibanner_btn span {顯示：塊；浮動：左；左邊距：4px；內邊距：0 5px；背景：#000；遊標：指針； }
#ibanner_btn .normal { height:20px;頂部邊距：8px；邊框： 1px實心#999；顏色：#999；字體大小：16px；行高：20px; }
#ibanner_btn .current { height:28px;邊框：1px實心#FF5300；顏色：#FF5300px；行高：28px； }
樣式>

function $(id) { return document.getElementById(id); }
function addLoadEvent( func){
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function(){
oldonload();
func();
}
}
}
function addBtn() {
if(!$('ibanner' )||!$('ibanner_pic')) return;
var picList = $('ibanner_pic').getElementsByTagName('a');
if(picList.length==0) return;
var btnBox = document.createElement('div');
btnBox.setAttribute('id','ibanner_btn');
var SpanBox ='';
for(var i=1; ivar spanList = ''我「」;
SpanBox = spanList;
}
btnBox.innerHTML = SpanBox ;
$('ibanner').appendChild(btnBox);
$('ibanner_btn').getElementsByTagName('span')[0].className = '當前';
for (var m= 0; mvar attributeValue = 'picLi_' m
picList[m].setAttribute('id',attributeValue);
}
}
function moveElement(elementID,final_x,final_y,interval) {
if (!document.getElementById) return false;
if (!document.getElementById(elementID)) 回傳false;
var elementID);
if (elem.movement) {
clearTimeout(elem.movement);
}
if (!elem.style.left) {
elem.style.left = " 0px";
}
if (!elem.style.top) {
elem.style.top = "0px";
}
var xpos = parseInt(elem.style.left );
var ypos = parseInt(elem.style.top);
if (xpos == Final_x && ypos == Final_y) {
移動= false;
返回真；
}
if (xpos var dist = Math.ceil((final_x - xpos)/10);
xpos = xpos 距離；
}
if (xpos > Final_x) {
var dist = Math.ceil((xpos - Final_x)/10);
xpos = xpos - 距離；
}
if (ypos var dist = Math .ceil((final_y - ypos)/10);
ypos = ypos 距離；
}
if (ypos > Final_y) {
var dist = Math.ceil((ypos - Final_y)/ 10);
ypos = ypos - 距離；
}
elem.style.left = xpos "px";
elem.style.top = ypos "px";
varrepeat = " moveElement('"elementID"',"final_x","final_y","interval")";
elem.movement = setTimeout(重複,間隔);
}
function classNormal() {
var btnList = $('ibanner_btn').getElementsByTagName('span');
for (var i=0; ibtnList[i].className='normal' ;
}
}
function picZ() {
var picList = $('ibanner_pic').getElementsByTagName('a');
for (var i=0; ipicList[i].style.zIndex='1';
}
}
var autoKey = false;
function iBanner() {
if (!$('ibanner')||!$('ibanner_pic')||!$('ibanner_btn')) return;
$('ibanner').onmouseover = function(){autoKey = true};
$('ibanner').onmouseout = function(){autoKey = false};

var btnList = $('ibanner_btn').getElementsByTagName('span');
var picList = $('ibanner_pic').getElementsByTagName('a');
if (picList.length==1) 回傳;
picList[0].style.zIndex='2';
for (var m=0; mbtnList[m].onmouseover = function() {
for(var n=0; nif (btnList[n].className == '當前') {
var currentNum = n;
}
}
classNormal();
picZ();
this.className='當前';
picList[currentNum].style.zIndex='2';
var z = this.childNodes[0].nodeValue-1;
picList[z].style.zIndex='3';
if (currentNum!=z){
picList[z].style.left='650px';
moveElement('picLi_' z,0,0,10);
}
}
}
}
setInterval('autoBanner()', 5000);
function autoBanner() {
if(!$('ibanner')||!$('ibanner_pic')||!$('ibanner_btn')||autoKey) return;
var btnList = $('ibanner_btn').getElementsByTagName('span');
var picList = $('ibanner_pic').getElementsByTagName('a');
if (picList.length==1) 回傳;
for(var i=0; iif (btnList[i].className == 'current') {
var currentNum = i;
}
}
if (currentNum==(picList.length-1) ){
classNormal();
picZ();
btnList[0].className='當前';
picList[currentNum].style.zIndex='2';
picList[0].style.zIndex='3';
picList[0].style.left='650px';
moveElement('picLi_0',0,0,10);
} else {
classNormal();
picZ();
var nextNum = currentNum 1;
btnList[nextNum].className='當前';
picList[currentNum].style.zIndex='2';
picList[nextNum].style.zIndex='3';
picList[nextNum].style.left='650px';
moveElement('picLi_' nextNum,0,0,10);
}
}
addLoadEvent(addBtn);
addLoadEvent(iBanner);
腳本>
頭>

身體>