亚洲承认在线,久久国产成人,欧美日韩免费高清

div+css黑色焦點(diǎn)圖(幻燈片效果非常不錯(cuò))

http://bbs.blueidea.com/thread-2983873-1-1.html 2010/7/2 13:05:11 深山行者字體:大中小瀏覽 13065

以下為詳細(xì)代碼

<!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" content="text/html; charset=utf-8" />
<base >
<title>黑色風(fēng)格的JS焦點(diǎn)圖</title>
<style type="text/css">
*{margin:0;padding:0;border:0;list-style:none;}
body{padding:20px;background:#eee;}
#myfocus{width:450px;height:296px;overflow:hidden;padding:6px 6px 24px;background:#333 url(http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100511/2010051111200423950.jpg) 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;}/*載入畫(huà)面*/
#myfocus .pics{width:450px;height:296px;overflow:hidden;position:relative;}
#myfocus .pics ul{height:296px;position:absolute;}
#myfocus .pics ul li{width:450px;height:296px;float:left;position:relative;}/*圖片大小450px*296px*/
#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">
/*design by koen @ 10nian5yue11ri*/
/*http://hi.baidu.com/koen_li*/
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() {//自動(dòng)運(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="#">文字說(shuō)明</a></div>
	var ul=$$('ul',ID)[0];
	var li=$$('li',ul);
	var NUM=li.length;
	var wid=$('myloading')?$$('div',ID)[1].clientWidth:$$('div',ID)[0].clientWidth;ul.style.width=wid*NUM+'px';
	for(var i=0;i<NUM;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 class="mybtn"><ul>';
	for(var i=0;i<NUM;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;//每幀圖片停留的時(shí)間，1000=1秒
var auto='';
init();
focusChange();
auto=setInterval(autoFocusChange, T);
};
window.onload=function(){
	setFocus('myfocus',4);
}
</script>
</head>
<body>
<div id="myfocus">
	<div id="myloading">請(qǐng)稍候...<br /><br /><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051020541820883.gif" /><img class="bg" src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100511/2010051111200423950.jpg" /></div>
	<div class="pics">
    	<ul>
        	<li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018042735524.jpg" alt="圖片1來(lái)源于網(wǎng)絡(luò)，版權(quán)屬于作者" /></a></li>
            <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018044355191.jpg" alt="圖片2來(lái)源于網(wǎng)絡(luò)，版權(quán)屬于作者" /></a></li>
            <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018050315609.jpg" alt="圖片3來(lái)源于網(wǎng)絡(luò)，版權(quán)屬于作者" /></a></li>
            <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018052886494.jpg" alt="圖片4來(lái)源于網(wǎng)絡(luò)，版權(quán)屬于作者" /></a></li>
            <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018055365260.jpg" alt="圖片5來(lái)源于網(wǎng)絡(luò)，版權(quán)屬于作者" /></a></li>
            <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018061333534.jpg" alt="圖片6來(lái)源于網(wǎng)絡(luò)，版權(quán)屬于作者" /></a></li>
        </ul>
    </div>
</div>
</body>
</html>

以下為詳細(xì)代碼

<!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" content="text/html; charset=utf-8" />
<base >
<title>黑色風(fēng)格的JS焦點(diǎn)圖</title>
<style type="text/css">
*{margin:0;padding:0;border:0;list-style:none;}
body{padding:20px;background:#eee;}
#myfocus{width:450px;height:296px;overflow:hidden;padding:6px;border:1px solid #333;font:12px Verdana, Arial, Helvetica, sans-serif;background:#000 url(http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100511/2010051111200423950.jpg) 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;}/*載入畫(huà)面*/
#myfocus .pics{width:450px;height:296px;overflow:hidden;position:relative;}
#myfocus .pics ul{height:296px;position:absolute;}
#myfocus .pics ul li{width:450px;height:296px;float:left;position:relative;}/*圖片大小450px*296px*/
#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:10px;right:12px;}
#myfocus .mybtn ul li{text-align:center;float:left;width:18px;height:16px;line-height:16px;margin-left:4px;overflow:hidden;border:1px solid #000;background:#ccc;cursor:pointer;}
#myfocus .mybtn ul li.current{background:#f60;color:#fff;}
</style>
<script type="text/javascript">
/*design by koen @ 10nian5yue11ri*/
/*http://hi.baidu.com/koen_li*/
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() {//自動(dòng)運(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="#">文字說(shuō)明</a></div>
 var ul=$$('ul',ID)[0];
 var li=$$('li',ul);
 var NUM=li.length;
 var wid=$('myloading')?$$('div',ID)[1].clientWidth:$$('div',ID)[0].clientWidth;ul.style.width=wid*NUM+'px';
 for(var i=0;i<NUM;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 class="mybtn"><ul>';
 for(var i=0;i<NUM;i++){s+='<li>'+(i+1)+'</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;//每幀圖片停留的時(shí)間，1000=1秒
var auto='';
init();
focusChange();
auto=setInterval(autoFocusChange, T);
};
window.onload=function(){
 setFocus('myfocus',4);
}
</script>
</head>
<body>
<div id="myfocus">
 <div id="myloading">請(qǐng)稍候...<br /><br /><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051020541820883.gif" /><img class="bg" src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100511/2010051111200423950.jpg" /></div>
 <div class="pics">
     <ul>
         <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018042735524.jpg" alt="圖片1來(lái)源于網(wǎng)絡(luò)，版權(quán)屬于作者" /></a></li>
            <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018044355191.jpg" alt="圖片2來(lái)源于網(wǎng)絡(luò)，版權(quán)屬于作者" /></a></li>
            <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018050315609.jpg" alt="圖片3來(lái)源于網(wǎng)絡(luò)，版權(quán)屬于作者" /></a></li>
            <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018052886494.jpg" alt="圖片4來(lái)源于網(wǎng)絡(luò)，版權(quán)屬于作者" /></a></li>
            <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018055365260.jpg" alt="圖片5來(lái)源于網(wǎng)絡(luò)，版權(quán)屬于作者" /></a></li>
            <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018061333534.jpg" alt="圖片6來(lái)源于網(wǎng)絡(luò)，版權(quán)屬于作者" /></a></li>
        </ul>
    </div>
</div>
</body>
</html>

前一頁(yè):沒(méi)有了

后一頁(yè):javascript實(shí)現(xiàn)圖片預(yù)覽功能

相關(guān)閱讀: 利用JavaScript獲取現(xiàn)在時(shí)間日期與農(nóng)歷; 連云港市海州區(qū)培智學(xué)校; 利用window.open函數(shù)控制彈出窗口,設(shè)置個(gè)性的彈出窗口; 防止網(wǎng)站內(nèi)容被人小偷和采集的ASP代碼; 一個(gè)非常不錯(cuò)的簡(jiǎn)單的ajax讀取新浪rss的小例子; 旅行社手機(jī)網(wǎng)站模板3; asp利用XMLHTTP獲取xml數(shù)據(jù)方法; 比較實(shí)用的利用javascript按比例相應(yīng)縮放圖片大小

共有0條關(guān)于《div+css黑色焦點(diǎn)圖(幻燈片效果非常不錯(cuò))》的評(píng)論: 發(fā)表評(píng)論

正在加載評(píng)論......

返回頂部發(fā)表評(píng)論

呢稱:
表情:
內(nèi) 容:	評(píng)論內(nèi)容:不能超過(guò) 1000 字,需審核,請(qǐng)自覺(jué)遵守互聯(lián)網(wǎng)相關(guān)政策法規(guī)。
驗(yàn)證碼:

網(wǎng)友評(píng)論聲明,請(qǐng)自覺(jué)遵守互聯(lián)網(wǎng)相關(guān)政策法規(guī)。

您發(fā)布的評(píng)論即表示同意遵守以下條款:
一、不得利用本站危害國(guó)家安全、泄露國(guó)家秘密,不得侵犯國(guó)家、社會(huì)、集體和公民的合法權(quán)益;
二、不得發(fā)布國(guó)家法律、法規(guī)明令禁止的內(nèi)容;互相尊重,對(duì)自己在本站的言論和行為負(fù)責(zé);
三、本站對(duì)您所發(fā)布內(nèi)容擁有處置權(quán)。

更多信息>>欄目類別選擇: 百度小程序開(kāi)發(fā); 微信小程序開(kāi)發(fā); 微信公眾號(hào)開(kāi)發(fā); uni-app; asp函數(shù)庫(kù); ASP; DIV+CSS; HTML; python

更多>>同類信息: div+css黑色焦點(diǎn)圖(幻燈片效果非常不錯(cuò)); javascript實(shí)現(xiàn)圖片預(yù)覽功能; 比較實(shí)用的利用javascript按比例相應(yīng)縮放圖片大小; 一個(gè)效果非常不錯(cuò)圖片載入loading等待效果; 利用css實(shí)現(xiàn)圖片選中后顯示文字與圖片效果; 利用CSS里面的A:hover鼠標(biāo)滑過(guò)縮略圖時(shí)放大圖片

更多>>最新添加文章: dw里面查找替換使用正則刪除sqlserver里面的CONSTRAINT; Android移動(dòng)端自動(dòng)化測(cè)試：使用UIAutomatorViewer與Selenium定位元素; 抖音直播音掛載小雪花懂車帝小程序; javascript獲取瀏覽器指紋可以用來(lái)做投票; 火狐Mozilla Firefox出現(xiàn)：無(wú)法載入您的Firefox配置文件它可能已經(jīng)丟失或是無(wú)法訪問(wèn) 問(wèn)題解決集合處理辦法; 在Android、iOS、Windows、MacOS中微信小程序的文件存放路徑; python通過(guò)代碼修改pip下載源讓下載庫(kù)飛起; python里面requests.post返回的res.text還有其它的嗎

更多>>隨機(jī)抽取信息: sql語(yǔ)句中怎么按照in語(yǔ)句里的id原有的順序進(jìn)行排序輸出,可以做成瀏覽記錄、查看、觀看記錄; 點(diǎn)出窗口，選擇類別; javascript時(shí)間顯示01; 鼠標(biāo)放在表格區(qū)域內(nèi)，當(dāng)前格的一整行和一整列變色; asp中eof的介紹; html表單里面的label詳細(xì)

更多標(biāo)簽熱門標(biāo)簽

錯(cuò)誤網(wǎng)頁(yè)制作密碼右擊連云港旅游奮斗 label tag visite 深山輪流控件 web 電影時(shí)鐘 html loading 鏈接 msn 126 網(wǎng)站地圖拖動(dòng) 正則 blog 代碼 css 搜索 asp 對(duì)象 letter-spacing 購(gòu)物屏幕文化 media 翻轉(zhuǎn) 防止 onblur 關(guān)閉寬 getElementById 九宮格 2003 貨幣搜索引擎 ie7 例子省略排版顯示加密 ResponseXML

99热热热_国产成人自拍一区_欧美一级网站_99热在线播放_国产精品乱码一区二区三区_久久精品国产一区二区三区

div+css黑色焦點(diǎn)圖(幻燈片效果非常 不錯(cuò))

div+css黑色焦點(diǎn)圖(幻燈片效果非常不錯(cuò))