網(wǎng)頁特效代碼模板無憂>網(wǎng)頁特效>圖片特效特效代碼>

黑色風(fēng)格帶緩沖的JS焦點(diǎn)圖代碼_圖片特效特效

黑色風(fēng)格帶緩沖的JS焦點(diǎn)圖代碼，看上去瞞不錯的，帶有一Loading效果，圖片可自定義大小，不過要修改CSS。

<!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" mrc="text/html; charset=utf-8" />
<title>黑色風(fēng)格JS焦點(diǎn)圖代碼</title>
<style type="text/css">
*{margin:0;padding:0;border:0;list-style:none;}
body{padding:20px;background:url() no-repeat;position:relative;}
#myfocus #myloading{position:absolute;top:0;left:0;z-index:9999;width:462px;height:326px;background:#333;color:#f60;font-size:12px;text-align:center;padding-top:90px;}
#myfocus #myloading .bg{position:absolute;top:0;left:0;z-index:-1;}/*載入畫面*/
#myfocus .pics{width:450px;height:296px;overflow:hidden;position:relative;}
#myfocus .pics ul{width:2700px;height:296px;position:absolute;}/*圖片大小450*6幅=2700*/
#myfocus .pics ul li{width:450px;height:296px;float:left;position:relative;}
#myfocus .pics ul li div,#myfocus .pics ul li div span,#myfocus .pics ul li div a{display:block;position:absolute;bottom:0;left:0;width:100%;height:34px;}
#myfocus .pics ul li div span{filter:alpha(opacity=50);opacity: 0.5;background:#000;}/*文字標(biāo)題的背景樣式*/
#myfocus .pics ul li div a{line-height:34px;overflow:hidden;padding-left:16px;text-decoration:none;font-size:14px;color:#fff;font-weight:bold;}/*文字標(biāo)題樣式*/
#myfocus .mybtn{position:absolute;bottom:8px;right:8px;}
#myfocus .mybtn ul li{float:left;width:16px;height:6px;margin-left:4px;overflow:hidden;border:1px solid #000;background:#ccc;cursor:pointer;}
#myfocus .mybtn ul li.current{background:#f60;}
</style>
<script type="text/javascript">
function setFocus(ID,t){//主函數(shù)...
function $(id) {return document.getElementById(id);}
function $$(tag,obj){return (typeof obj=='object'?obj:$(obj)).getElementsByTagName(tag);}
var n='';//標(biāo)記
function showPics(num){
	if(n===num) return true;
	if(n==='') n=0;
	else n=num;
	var pics=$$('ul',ID)[0];
	var tit=$$('div',pics)[num];
	if (!pics.style.left){pics.style.left = 0+'px';}
    if (!tit.style.bottom||parseInt(tit.style.bottom)>-34){tit.style.bottom = -34+'px';}
	var endX=-num*$$('div',ID)[0].clientWidth;
	var goimg=function(){
		X=parseInt(pics.style.left);
		if (pics.movement){clearTimeout(pics.movement);}
		if(parseInt(pics.style.left)==endX) return true;
		if((endX-X)>0) X+=Math.ceil((endX-X) / 10);
		else X+=Math.floor((endX-X) / 10);
		pics.style.left=X+'px';
		pics.movement = setTimeout(goimg, 5);
	}
	var gotit=function(){
		var y=parseInt(tit.style.bottom);
		if (tit.movement){clearTimeout(tit.movement);}
		if(y==0) return true;
		y+=Math.ceil((0-y) / 10);
		if(parseInt(pics.style.left)==endX) tit.style.bottom=y+'px';
		if(y<0) tit.movement = setTimeout(gotit, 16);
	}
	goimg();
	gotit();
}
function classNormal() {//數(shù)字標(biāo)簽樣式清除
    var focusBtnList = $$('li',$$('ul',ID)[1]);
    for (var i = 0; i < focusBtnList.length; i++) {
        focusBtnList[i].className = '';
    }
}
function focusChange() {//交互切換
    var focusBtnList = $$('li',$$('ul',ID)[1]);
    for (var i = 0; i < focusBtnList.length; i++) {
		focusBtnList[i].I=i;
		focusBtnList[i].onmouseover = function(){
        	showPics(this.I);
        	classNormal();
        	focusBtnList[this.I].className = 'current';
		}
	}
}
var autoFocusChange=function() {//自動運(yùn)行
    if (atuokey) return;
    var focusBtnList = $$('li',$$('ul',ID)[1]);
    for (var i = 0; i < focusBtnList.length; i++) {
        if (focusBtnList[i].className == 'current') {
            var currentNum = i;
        }
    }
	if(currentNum<focusBtnList.length-1){
		showPics(currentNum+1);
       	classNormal();
       	focusBtnList[currentNum+1].className = 'current';
	}else if(currentNum==focusBtnList.length-1){
		showPics(0);
       	classNormal();
       	focusBtnList[0].className = 'current';
	}
}
var atuokey = '';
function init(){//初始化<div><span></span><a href="#">文字說明</a></div>
	var li=$$('li',$$('ul',ID)[0]);
	for(var i=0;i<li.length;i++){
		var a=li[i].getElementsByTagName('a')[0];
		var img=li[i].getElementsByTagName('img')[0];
		li[i].innerHTML=li[i].innerHTML+'<div><span></span><a href="'+a+'">'+img.alt+'</a></div>';
	}
	var s='<div   id="ztdnxbr"   class="mybtn"><ul>';
	for(var i=0;i<$$('li',$$('ul',ID)[0]).length;i++){s+='<li></li>'}
	s+='</ul></div>';
	$(ID).innerHTML+=s;
	$(ID).removeChild($('myloading'));
	showPics(0);
    classNormal();
    $$('li',$$('ul',ID)[1])[0].className = 'current';
	$(ID).onmouseover = function() {
        atuokey = true;
		clearInterval(auto);
    }
    $(ID).onmouseout = function() {
        atuokey = false;
		auto=setInterval(autoFocusChange, T);
    }
}
var T=t*1000;//每幀圖片停留的時間，1000=1秒
var auto='';
init();
focusChange();
auto=setInterval(autoFocusChange, T);
};
window.onload=function(){
	setFocus('myfocus',4);
}
</script>
</head>
<body>
<div   class="dnxh7zd"   id="myfocus">
	<div   class="hpbnnjn"   id="myloading">請稍候...<br /><br /><img src="http://p1.mb5u.com/texiao/1/20110225160536498.gif" /></div>
	<div   id="zfdzjn7"   class="pics">
    	<ul>
            <li><a href="#"><img src="http://p1.mb5u.com/texiao/1/20110225160536499.jpg" alt="圖片1" /></a></li>
            <li><a href="#"><img src="http://p1.mb5u.com/texiao/1/20110225160536500.jpg" alt="圖片2" /></a></li>
            <li><a href="#"><img src="http://p1.mb5u.com/texiao/1/20110225160536501.jpg" alt="圖片3" /></a></li>
            <li><a href="#"><img src="http://p1.mb5u.com/texiao/1/20110225160536502.jpg" alt="圖片4" /></a></li>
            <li><a href="#"><img src="http://p1.mb5u.com/texiao/1/20110225160536503.jpg" alt="圖片5" /></a></li>
            <li><a href="#"><img src="http://p1.mb5u.com/texiao/1/20110225160536504.jpg" alt="圖片6" /></a></li>
        </ul>
    </div>
</div>
</body>
</html>

所屬頻道：圖片特效特效/更新時間：2012-11-29

[收藏][報錯][返回列表]

相關(guān)圖片特效特效：

黑色風(fēng)格帶緩沖的JS焦點(diǎn)圖代碼_圖片特效特效

圖片特效特效Rss訂閱特效代碼搜索

圖片特效特效推薦

猜你也喜歡看這些