>>  Site Map >>  Forums >>  JavaScript_HTML

Forum module - topics in forum:


JavaScript_HTML - tìm hiểu và trao đỏi các mã java để làm trang web bạn sinh động hơn, các thủ thuật code html css

Mã tạo slide ảnh show giống của xaluan.com
các bạn chác thây một hộp nhỏ thể hiên ảnh slide rat dẹp liên kết tói phần gallery của trang xaluan chứ

mã già và đây hehe
rất ngắn gọn:
tât nhiên là thục tế sẽ khác vì xaluan làm băng dinamic php nên ảnh sẽ lấy tù data base .. do đó sẽ khác .. tuy nhiên căn bản là vậy


Quote: :
/***********************************************
* Translucent Slideshow script- image DHTML code library (www.xaluan.com)
* This notice MUST stay intact for legal use
* Visit xaluan forums at http://www.xaluan.com/ for full source code
***********************************************/


Quote: :
var trans_width='120px' //slideshow width
var trans_height='100px' //slideshow height
var pause=5000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)
var degree=5 //animation speed. Greater is faster.
var slideshowcontent=new Array()
//Define slideshow contents: [image URL, OPTIONAL LINK, OPTIONAL LINK TARGET]

slideshowcontent[0]=["modules/coppermine/albums/userpics/10004/thumb_1t03.jpg", "modules.php?name=coppermine&file=displayimage&album=1&pos=1", ""]
slideshowcontent[1]=["images/albums/CarsConcept/thumb_2000_tvr_cerbera_speed_12-3.jpg", "modules.php?name=coppermine&file=displayimage&album=3&pos=15", ""]
slideshowcontent[2]=["images/albums/userpics/10004/thumb_1t06.jpg", "modules.php?name=coppermine&file=displayimage&album=1&pos=3", ""]
slideshowcontent[3]=["images/albums/CarsConcept/thumb_1969%20Ford%20Mustang%20Boss%20429%20black%20fsv%3DKRM%20%281%29.jpg", "modules.php?name=coppermine&file=displayimage&album=3&pos=13", ""]
var bgcolor='#f8f8f8'
var imageholder=new Array()


Quote: :
for (i=0;i<slideshowcontent.length;i++){
imageholder[i]=new Image()
imageholder[i].src=slideshowcontent[i][0]
}

var ie4=document.all
var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1

if (ie4||dom)
document.write('<div style="position:relative;width:'+trans_width+';height:'+trans_height+';overflow:hidden"><div id="canvas0" style="position:absolute;background-color:'+bgcolor+';width:'+trans_width+';height:'+trans_height+';left:-'+trans_width+';filter:alpha(opacity=20);-moz-opacity:0.2;"></div><div id="canvas1" style="position:absolute;background-color:'+bgcolor+';width:'+trans_width+';height:'+trans_height+';left:-'+trans_width+';filter:alpha(opacity=20);-moz-opacity:0.2;"></div></div>')
else if (document.layers){
document.write('<ilayer id=tickernsmain visibility=hide width='+trans_width+' height='+trans_height+' bgColor='+bgcolor+'><layer id=tickernssub width='+trans_width+' height='+trans_height+' left=0 top=0>'+'<img src="'+slideshowcontent[0][0]+'"></layer></ilayer>')
}

var curpos=trans_width*(-1)
var curcanvas="canvas0"
var curindex=0
var nextindex=1

Quote: :

function getslidehtml(theslide){
var slidehtml=""
if (theslide[1]!="")
slidehtml='<a href="'+theslide[1]+'" target="'+theslide[2]+'">'
slidehtml+='<img src="'+theslide[0]+'" border="0">'
if (theslide[1]!="")
slidehtml+='</a>'
return slidehtml
}

function moveslide(){
if (curpos<0){
curpos=Math.min(curpos+degree,0)
tempobj.style.left=curpos+"px"
}
else{
clearInterval(dropslide)
if (crossobj.filters)
crossobj.filters.alpha.opacity=100
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=1
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML=getslidehtml(slideshowcontent[curindex])
nextindex=(nextindex<slideshowcontent.length-1)? nextindex+1 : 0
setTimeout("rotateslide()",pause)
}
}

function rotateslide(){
if (ie4||dom){
resetit(curcanvas)
crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
if (crossobj.filters)
document.all.canvas0.filters.alpha.opacity=document.all.canvas1.filters.alpha.opacity=20
else if (crossobj.style.MozOpacity)
document.getElementById("canvas0").style.MozOpacity=document.getElementById("canvas1").style.MozOpacity=0.2
var temp='setInterval("moveslide()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else if (document.layers){
crossobj.document.write(getslidehtml(slideshowcontent[curindex]))
crossobj.document.close()
}
curindex=(curindex<slideshowcontent.length-1)? curindex+1 : 0
}

function jumptoslide(which){
curindex=which
rotateslide()
}

function resetit(what){
curpos=parseInt(trans_width)*(-1)
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
crossobj.style.left=curpos+"px"
}

function startit(){
crossobj=ie4? eval("document.all."+curcanvas) : dom? document.getElementById(curcanvas) : document.tickernsmain.document.tickernssub
if (ie4||dom){
crossobj.innerHTML=getslidehtml(slideshowcontent[curindex])
rotateslide()
}
else{
document.tickernsmain.visibility='show'
curindex++
setInterval("rotateslide()",pause)
}
}

if (window.addEventListener)
window.addEventListener("load", startit, false)
else if (window.attachEvent)
window.attachEvent("onload", startit)
else if (ie4||dom||document.layers)
window.onload=startit


hãy nối các doạn tren vào nhau và thêm vào đàu cuói của đoạn khai bao scipt
vào đầu: *script type="text/javascript">
vào cuối: */script>
notices: '*'='<'

--- ưu điểm là mỗi ảnh có thể kết nối link tơi một trang web khác hoạc url bạn xác dịnh..
--- preload ảnh do đó khá nhanh không ảnh huơng tóc độ web..
--- ảnh random và cute hiệu úng không phải MACQUERE trôi các bạn thường thấy hay làm võ layout trang web..
-- nhìu nữa hãy khám phá nha.. Arrow



Search from ALEXA


put your ads here