とても美しいJS CSSの画像スライドショーです。マウスを置くと、各画像がスムーズに切り替わります。 FLASH のスムージング効果は非常に新鮮です。また、コードが少なく、デバッグや呼び出しに便利です。 コードをコピーします コードは次のとおりです: 图片幻灯切换 <br>* { マージン:0;パディング:0; <br>ボディ{背景:#FFF;色:#333;フォント:12px/1.6em Helvetica、Arial、サンセリフ; } <br>h1、h2、h3、h4、h5、h6 { font-size:1em; } <br>a { color:#0287CA;テキスト装飾:なし; } <br>a:hover { text-decoration:underline; } <br>ul, li { list-style:none; } <br>フィールドセット、img { border:none; } <br>凡例 { 表示:なし; } <br>em、strong、cite、th { font-style:normal;フォントの太さ:標準; } <br>入力、テキストエリア、選択、ボタン { font:12px Helvetica、Arial、サンセリフ; } <br>テーブル { border-collapse:collapse; <br>html { オーバーフロー:-moz-scrollbars-vertical; <br>#ibanner {位置:相対;幅:650ピクセル;高さ:250ピクセル;オーバーフロー:非表示;マージン:20px 0 20px 300px; } <br>#ibanner_pic {} <br>#ibanner_pic a { 位置:絶対;トップ:0;表示:ブロック;幅:650ピクセル;高さ:250ピクセル;オーバーフロー:非表示; } <br>#ibanner_btn {位置:絶対; z インデックス:9999;右:5ピクセル;下:5ピクセル;フォントの太さ:700;フォントファミリー:Arial; <br>#ibanner_btn スパン {表示:ブロック;フロート:左;マージン左:4px;パディング:0 5px;背景:#000;カーソル:ポインタ; } <br>#ibanner_btn .normal { 高さ:20px;マージントップ:8px;ボーダー:1px ソリッド #999;色:#999;フォントサイズ:16px;行の高さ:20px; <br>#ibanner_btn .current {高さ:28px;ボーダー:1px ソリッド #FF5300;色:#FF5300;フォントサイズ:28px;行の高さ:28px; } <br> <br>function $(id) { return document.getElementById(id); } <br>function addLoadEvent(func){ <br>var oldonload = window.onload; <br>if (typeof window.onload != '関数') { <br>window.onload = func; <br>} else { <br>window.onload = function(){ <br>oldonload(); <br>関数(); <br>} <br>} <br>} <br>function addBtn() { <br>if(!$('ibanner')||!$('ibanner_pic')) return; <br>var picList = $('ibanner_pic').getElementsByTagName('a'); <br>if(picList.length==0) return; <br>var btnBox = document.createElement('div'); <br>btnBox.setAttribute('id','ibanner_btn'); <br>var SpanBox =''; <br>for(var i=1; ivar spanList = '<span class="normal">' i '</span>'; <br>SpanBox = spanList; <br>} <br>btnBox.innerHTML = SpanBox; <br>$('ibanner').appendChild(btnBox); <br>$('ibanner_btn').getElementsByTagName('span')[0].className = 'current'; <br>for (var m=0; m<piclist.length m>varattributeValue = 'picLi_' m <br>picList[m].setAttribute('id',attributeValue); <br>} <br>} <br>function moveElement(elementID,final_x,final_y,interval) { <br>if (!document.getElementById) return false; <br>if (!document.getElementById(elementID)) は false を返します。 <br>var elem = document.getElementById(要素ID); <br>if (elem.movement) { <br>clearTimeout(elem.movement); <br>} <br>if (!elem.style.left) { <br>elem.style.left = "0px"; <br>} <br>if (!elem.style.top) { <br>elem.style.top = "0px"; <br>} <br>var xpos = parseInt(elem.style.left); <br>var ypos = parseInt(elem.style.top); <br>if (xpos == Final_x && ypos == Final_y) { <br>moveing = false; <br>true を返します。 <br>} <br>if (xpos <final_x>var dist = Math.ceil((final_x - xpos)/10); <br>xpos = xpos dist; <br>} <br>if (xpos > Final_x) { <br>var dist = Math.ceil((xpos - Final_x)/10); <br>xpos = xpos - dist; <br>} <br>if (ypos <final_y>var dist = Math.ceil((final_y - ypos)/10); <br>ypos = ypos dist; <br>} <br>if (ypos > Final_y) { <br>var dist = Math.ceil((ypos - Final_y)/10); <br>ypos = ypos - dist; <br>} <br>elem.style.left = xpos "px"; <br>elem.style.top = ypos "px"; <br>varrepeat = "moveElement('" elementID "',"final_x ","final_y ","interval ")"; <br>elem.movement = setTimeout(repeat,interval); <br>} <br>function classNormal() { <br>var btnList = $('ibanner_btn').getElementsByTagName('span'); <br>for (var i=0; i<btnlist.length i>btnList[i].className='normal'; <br>} <br>} <br>function picZ() { <br>var picList = $('ibanner_pic').getElementsByTagName('a'); <br>for (var i=0; i<piclist.length i>picList[i].style.zIndex='1'; <br>} <br>} <br>var autoKey = false; <br>function iBanner() { <br>if(!$('ibanner')||!$('ibanner_pic')||!$('ibanner_btn')) return; <br>$('ibanner').onmouseover = function(){autoKey = true}; <br>$('ibanner').onmouseout = function(){autoKey = false}; <br><br>var btnList = $('ibanner_btn').getElementsByTagName('span'); <br>var picList = $('ibanner_pic').getElementsByTagName('a'); <br>if (picList.length==1) return; <br>picList[0].style.zIndex='2'; <br>for (var m=0; m<btnlist.length m>btnList[m].onmouseover = function() { <br>for(var n=0; n<btnlist.length n>if (btnList[n].className == 'current') { <br>var currentNum = n; <br>} <br>} <br>classNormal(); <br>picZ(); <br>this.className='現在'; <br>picList[currentNum].style.zIndex='2'; <br>var z = this.childNodes[0].nodeValue-1; <br>picList[z].style.zIndex='3'; <br>if (currentNum!=z){ <br>picList[z].style.left='650px'; <br>moveElement('picLi_' z,0,0,10); <br>} <br>} <br>} <br>} <br>setInterval('autoBanner()', 5000); <br>function autoBanner() { <br>if(!$('ibanner')||!$('ibanner_pic')||!$('ibanner_btn')||autoKey) return; <br>var btnList = $('ibanner_btn').getElementsByTagName('span'); <br>var picList = $('ibanner_pic').getElementsByTagName('a'); <br>if (picList.length==1) return; <br>for(var i=0; i<btnlist.length i>if (btnList[i].className == 'current') { <br>var currentNum = i; <br>} <br>} <br>if (currentNum==(picList.length-1) ){ <br>classNormal(); <br>picZ(); <br>btnList[0].className='current'; <br>picList[currentNum].style.zIndex='2'; <br>picList[0].style.zIndex='3'; <br>picList[0].style.left='650px'; <br>moveElement('picLi_0',0,0,10); <br>} else { <br>classNormal(); <br>picZ(); <br>var nextNum = currentNum 1; <br>btnList[nextNum].className='current'; <br>picList[currentNum].style.zIndex='2'; <br>picList[nextNum].style.zIndex='3'; <br>picList[nextNum].style.left='650px'; <br>moveElement('picLi_' nextNum,0,0,10); <br>} <br>} <br>addLoadEvent(addBtn); <br>addLoadEvent(iBanner); <br>
