Phiên bản đầy đủ: jsB@nk » Hình ảnh » Xem ảnh » Slideshow ảnh
URL: https://www.javascriptbank.com/graphical-hyperlink-slider-script-index.html
Hiệu ứng tạo một slideshow ảnh từ phải sang trái.
Phiên bản đầy đủ: jsB@nk » Hình ảnh » Xem ảnh » Slideshow ảnh
URL: https://www.javascriptbank.com/graphical-hyperlink-slider-script-index.html
<style type="text/css">td {color:#dddddd}td.bk {color:black}</style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><SCRIPT language=JavaScript1.2>//---------------------------------------------------------------------//'SLIDES' SCRIPT WRITTEN BY RICHARD MALONEY RM@HISMERCY.CA//----------------------------------------------------------------------var numOfSlides=6; //CHANGE THIS TO NUMBER OF HTML SLIDES DEFINED BELOW (MINIMUM 6)//SIMPLE SNIFFER-( IT WON'T BE LONG TILL THIS ORDER IS REVERSED// ( AFTER THAT SAY GOODBYE TO LAYER AND ALL :-)// ( SO WRITE YOUR SCRIPTS FOR W3C FIRST! ) var IE = (document.all) ? true:falsevar NS = (document.layers) ? true:falsevar W3C = (document.getElementById) ? true:false//TAKES ID AND RETURNS DOM ELEMENTfunction getCSSPElement(id) {if (IE) return document.all[id]else if (NS) return document.layers[id]else return document.getElementById(id)}//TAKES DOM AND (MOVES SLIDE LEFT) RETURNS THE NEW HORIZONTAL POSITIONfunction offsetLeft(el,amount) {if (IE){return (el.style.pixelLeft-=amount)}else if (NS){return (el.left-=amount)}else {el.style.left = parseInt(el.style.left) - amount + "px"; return (el.style.left)}}function moveSlides(id){var el = getCSSPElement(id)var t=parseInt(offsetLeft(el,4)) //parseInt to work w/W3Cif ((t>=el.start-140)&&(t<=el.start-138)){startNextSlide(el)} el.scrollID = window.setTimeout("moveSlides('" + id + "')",75) if (t<=el.end) { if (IE){el.style.pixelLeft=el.start;}else if (NS){el.left=el.start;} else {el.style.left=el.start + "px";}clearTimeout(el.scrollID); }}//GETS NEXT SLIDES NAME FROM PASSED ELEMENT AND ASSIGNS THE NEW THREADID TO OBJECT.SCROLLIDfunction startNextSlide(el) {var elnext=getCSSPElement(el.next)elnext.scrollID = window.setTimeout("moveSlides('" + el.next + "')",100)}//INITIALIZATION (NUMBERS BASED ON SCREEN LOCATIONS FOR TWO OVERLAY DIVS)function intializeSlideShow(){startPosition=screen.width-223; //starting position (x) of slideendPosition=80;//ending point of imagefor (var i=0;i<numOfSlides;i++){//iterate through number of slidesvar el = getCSSPElement("s"+i)//returns object (var makes scope local to function)el.start=startPosition//know thy starting point object (no var so global)el.end=endPosition//know thy ending point objectel.next="s"+(i+1);if (i==(numOfSlides-1)) el.next="s0"; //know the next slide tooif(IE)el.style.pixelLeft=el.start; //moves slide in Explorer to IT's starting pointelse if (NS) el.left=el.start;//moves slide in netscape to IT's starting pointelse el.style.left=el.start+ "px";//moves slide in W3C DOM to IT's starting point}//POSITION RIGHT OVERLAY BASED ON SCREEN WIDTH if(IE)document.all["rightBlock"].style.pixelLeft=screen.width-258;else if (NS)document.layers["rightBlock"].left=screen.width-250;else document.getElementById("rightBlock").style.left=screen.width-250 + "px";}//WINDOW RESIZE/LOADwindow.resizeTo(screen.width,screen.height);window.moveTo(0,0);window.onload=function(){ intializeSlideShow(); moveSlides('s0'); }</SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><BODY bgcolor="black" link="white" vlink="white" alink="white" text="white"><DIV id=s0 style="POSITION: absolute; TOP: 0px"><A href="http://your_link1.com"><IMG border=0 height=79 name=slide0 src="test1.gif" width=120></A></DIV><DIV id=s1 style="POSITION: absolute; TOP: 0px"><A href="http://your_link2.com"><IMG border=0 height=79 name=slide1 src="test2.gif" width=120></A></DIV><DIV id=s2 style="POSITION: absolute; TOP: 0px"><A href="http://your_link3.com"><IMG border=0 height=79 name=slide2 src="test3.gif" width=120></A></DIV><DIV id=s3 style="POSITION: absolute; TOP: 0px"><A href="http://your_link4.com"><IMG border=0 height=79 name=slide3 src="test4.gif" width=120></A></DIV><DIV id=s4 style="POSITION: absolute; TOP: 0px"><A href="http://your_link5.com"><IMG border=0 height=79 name=slide4 src="test5.gif" width=120></A></DIV><DIV id=s5 style="POSITION: absolute; TOP: 0px"><A href="http://your_link6.com"><IMG border=0 height=79 name=slide5 src="test6.gif" width=120></A></DIV><!-- THESE ARE THE PICTURES AT EITHER END. --><DIV id=leftBlock style="LEFT: 0px; POSITION: absolute; TOP: 0px"><IMG alt="" border=0 height=79 src="scrollFaderWred_left_79h.gif" width=225></DIV><DIV id=rightBlock style="LEFT: 0px; POSITION: absolute; TOP: 0px"><IMG alt="" border=0 height=79 src="scrollFaderWred_right_79h.gif" width=225></DIV></BODY><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->
http://javascriptbank.com/javascript/image/Graphical_Hyperlink_Slider_Script/Graphical_Hyperlink_Slider_Script_images.zip