จากที่เห็นหัวข้อ sanook เลย เอา โค้ด สไลด์หน้า มาแจก

[siamwebthai]

หลักการทำงาน ของมัน ก็คือ โหลดข้อมูลจากฐานข้อมูลมาเก็บไว้ก่อน แล้วแสดงด้วย css
ในที่นี้ จะให้โค้ด สไลด์หน้า นะครับ จะทำเป็น zip ให้แล้วให้มาโหลดในเว็บตัวเอง เดี๋ยวจะกลายเป็น
เหมือนคุณ.... อะไรสักอย่าง ที่ ให้เข้าเว็บไปแล้วโหลด ได้มั่ง ไม่ได้มั่ง
ไฟล์มี 3 ไฟล์ดังนี้ (ถ้ามีแล้ว ก็ขออภัย)
1. contentslider.css
2. contentslider.js
3. xxxx .html แล้วแต่จะตั้งชื่อ
หน้าจะคล้าย ๆ กับ sanook.com , mthai.com ที่มีหัวข้อข่าว แล้ว คลิ๊ก ข่าว 1 ข่าว2 ข่าว 3 แล้วเปลี่ยนหน้า

1. contentslider.css
.contentslide{
border: 10px solid navy;
border-bottom-width: 6px;
padding: 8px;
width: 400px;
height: 250px;
}

.contentslide .contentdiv{
display: none;
}

.pagination{
width: 416px; /*Width of pagination DIV. To equal that of Content Slider's width, take into account the later's left/right paddings!*/
text-align: right;
background-color: navy;
border: 10px solid navy;
border-width: 0 10px; /*Left/ right border width of pagination DIV.*/
padding: 0 0 4px 0;
}

* html .pagination{ /*Simplified box model hack to get IE5 to display width equal to that of Content Slider's*/
width: 400px; /*IE5 width*/
w\idth: 416px; /*IE6 width*/
}

.pagination a{
padding: 0 5px;
text-decoration: none;
color: #2e6ab1;
background-color: white;
}

.pagination a:hover, .pagination a.selected{
color: #000;
background-color: #FEE496;
}

2. contentslider.js
//** Featured Content Slider script- ฉ Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
//** Last updated: Feb 28th- 07- Added ability to customize pagination links' text

////Ajax related settings
var csbustcachevar=0 //bust potential caching of external pages after initial Ajax request? (1=yes, 0=no)
var csloadstatustext="<img src='loading.gif' /> Requesting content..." //HTML to indicate Ajax page is being fetched
var csexternalfiles=[] //External .css or .js files to load to style the external content(s), if any. Separate multiple files with comma ie: ["cat.css", dog.js"]

////NO NEED TO EDIT BELOW////////////////////////
var enablepersist=true
var slidernodes=new Object() //Object array to store references to each content slider's DIV containers (<div class="contentdiv">)
var csloadedobjects="" //Variable to store file names of .js/.css files already loaded (if Ajax is used)

function ContentSlider(sliderid, autorun, customPaginateText, customNextText){
   var slider=document.getElementById(sliderid)
   if (typeof customPaginateText!="undefined" && customPaginateText!="") //Custom array of pagination links text defined?
      slider.paginateText=customPaginateText
   if (typeof customNextText!="undefined" && customNextText!="") //Custom HTML for "Next" link defined?
      slider.nextText=customNextText
   slidernodes[sliderid]=[] //Array to store references to this content slider's DIV containers (<div class="contentdiv">)
   ContentSlider.loadobjects(csexternalfiles) //Load external .js and .css files, if any
   var alldivs=slider.getElementsByTagName("div")
   for (var i=0; i<alldivs.length; i++){
      if (alldivs.className=="contentdiv"){
         slidernodes[sliderid].push(alldivs) //add this DIV reference to array
         if (typeof alldivs.getAttribute("rel")=="string") //If get this DIV's content via Ajax (rel attr contains path to external page)
            ContentSlider.ajaxpage(alldivs.getAttribute("rel"), alldivs)
      }
   }
   ContentSlider.buildpagination(sliderid)
   var loadfirstcontent=true
   if (enablepersist && getCookie(sliderid)!=""){ //if enablepersist is true and cookie contains corresponding value for slider
      var cookieval=getCookie(sliderid).split(":") //process cookie value ([sliderid, int_pagenumber (div content to jump to)]
      if (document.getElementById(cookieval[0])!=null && typeof slidernodes[sliderid][cookieval[1]]!="undefined"){ //check cookie value for validity
         ContentSlider.turnpage(cookieval[0], parseInt(cookieval[1])) //restore content slider's last shown DIV
         loadfirstcontent=false
      }
   }
   if (loadfirstcontent==true) //if enablepersist is false, or cookie value doesn't contain valid value for some reason (ie: user modified the structure of the HTML)
      ContentSlider.turnpage(sliderid, 0) //Display first DIV within slider
   if (typeof autorun=="number" && autorun>0) //if autorun parameter (int_miliseconds) is defined, fire auto run sequence
      window[sliderid+"timer"]=setTimeout(function(){ContentSlider.autoturnpage(sliderid, autorun)}, autorun)
}

ContentSlider.buildpagination=function(sliderid){
   var slider=document.getElementById(sliderid)
   var paginatediv=document.getElementById("paginate-"+sliderid) //reference corresponding pagination DIV for slider
   var pcontent=""
   for (var i=0; i<slidernodes[sliderid].length; i++) //For each DIV within slider, generate a pagination link
      pcontent+='<a href="#" onClick=\"ContentSlider.turnpage(\''+sliderid+'\', '+i+'); return false\">'+(slider.paginateText? slider.paginateText : i+1)+'</a> '
   pcontent+='<a href="#" style="font-weight: bold;" onClick=\"ContentSlider.turnpage(\''+sliderid+'\', parseInt(this.getAttribute(\'rel\'))); return false\">'+(slider.nextText || "Next")+'</a>'
   paginatediv.innerHTML=pcontent
   paginatediv.onclick=function(){ //cancel auto run sequence (if defined) when user clicks on pagination DIV
   if (typeof window[sliderid+"timer"]!="undefined")
      clearTimeout(window[sliderid+"timer"])
   }
}

ContentSlider.turnpage=function(sliderid, thepage){
   var paginatelinks=document.getElementById("paginate-"+sliderid).getElementsByTagName("a") //gather pagination links
   for (var i=0; i<slidernodes[sliderid].length; i++){ //For each DIV within slider
      paginatelinks.className="" //empty corresponding pagination link's class name
      slidernodes[sliderid].style.display="none" //hide DIV
   }
   paginatelinks[thepage].className="selected" //for selected DIV, set corresponding pagination link's class name
   slidernodes[sliderid][thepage].style.display="block" //show selected DIV
   //Set "Next" pagination link's (last link within pagination DIV) "rel" attribute to the next DIV number to show
   paginatelinks[paginatelinks.length-1].setAttribute("rel", thenextpage=(thepage<paginatelinks.length-2)? thepage+1 : 0)
   if (enablepersist)
      setCookie(sliderid, sliderid+":"+thepage)
}

ContentSlider.autoturnpage=function(sliderid, autorunperiod){
   var paginatelinks=document.getElementById("paginate-"+sliderid).getElementsByTagName("a") //Get pagination links
   var nextpagenumber=parseInt(paginatelinks[paginatelinks.length-1].getAttribute("rel")) //Get page number of next DIV to show
   ContentSlider.turnpage(sliderid, nextpagenumber) //Show that DIV
   window[sliderid+"timer"]=setTimeout(function(){ContentSlider.autoturnpage(sliderid, autorunperiod)}, autorunperiod)
}

function getCookie(Name){
   var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
   if (document.cookie.match(re)) //if cookie found
      return document.cookie.match(re)[0].split("=")[1] //return its value
   return ""
}

function setCookie(name, value){
   document.cookie = name+"="+value
}

////////////////Ajax Related functions //////////////////////////////////

ContentSlider.ajaxpage=function(url, thediv){
   var page_request = false
   var bustcacheparameter=""
   if (window.XMLHttpRequest) // if Mozilla, Safari etc
      page_request = new XMLHttpRequest()
   else if (window.ActiveXObject){ // if IE
      try {
      page_request = new ActiveXObject("Msxml2.XMLHTTP")
      }
      catch (e){
      try{
      page_request = new ActiveXObject("Microsoft.XMLHTTP")
      }
      catch (e){}
      }
   }
   else
      return false
   thediv.innerHTML=csloadstatustext
   page_request.onreadystatechange=function(){
      ContentSlider.loadpage(page_request, thediv)
   }
   if (csbustcachevar) //if bust caching of external page
      bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
   page_request.open('GET', url+bustcacheparameter, true)
   page_request.send(null)
}

ContentSlider.loadpage=function(page_request, thediv){
   if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
      thediv.innerHTML=page_request.responseText
}

ContentSlider.loadobjects=function(externalfiles){ //function to load external .js and .css files. Parameter accepts a list of external files to load (array)
   for (var i=0; i<externalfiles.length; i++){
      var file=externalfiles
      var fileref=""
      if (csloadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
         if (file.indexOf(".js")!=-1){ //If object is a js file
            fileref=document.createElement('script')
            fileref.setAttribute("type","text/javascript");
            fileref.setAttribute("src", file);
         }
         else if (file.indexOf(".css")!=-1){ //If object is a css file
            fileref=document.createElement("link")
            fileref.setAttribute("rel", "stylesheet");
            fileref.setAttribute("type", "text/css");
            fileref.setAttribute("href", file);
         }
      }
      if (fileref!=""){
         document.getElementsByTagName("head").item(0).appendChild(fileref)
         csloadedobjects+=file+" " //Remember this object as being already added to page
      }
   }
}



3.ไฟล์ xxxx .html
<link rel="stylesheet" type="text/css" href="contentslider.css" />
<script type="text/javascript" src="contentslider.js">

/***********************************************
* Featured Content Slider- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<div id="slider1" class="contentslide">
<div class="contentdiv">
Content 1
</div>

<div class="contentdiv">
Content 2
</div>

<div class="contentdiv">
Content 3
</div>

</div>

<div class="pagination" id="paginate-slider1"></div>

<script type="text/javascript">
//ContentSlider("slider_ID" , opt_miliseconds_rotate)
ContentSlider("slider1") //or ContentSlider("slider1", 3000) to auto rotate every 3 seconds

</script>

[oakiexxx]

หลักการทำงาน ของมัน ก็คือ โหลดข้อมูลจากฐานข้อมูลมาเก็บไว้ก่อน แล้วแสดงด้วย css
ในที่นี้ จะให้โค้ด สไลด์หน้า นะครับ จะทำเป็น zip ให้แล้วให้มาโหลดในเว็บตัวเอง เดี๋ยวจะกลายเป็น
เหมือนคุณ.... อะไรสักอย่าง ที่ ให้เข้าเว็บไปแล้วโหลด ได้มั่ง ไม่ได้มั่ง
ไฟล์มี 3 ไฟล์ดังนี้ (ถ้ามีแล้ว ก็ขออภัย)
1. contentslider.css
2. contentslider.js
3. xxxx .html แล้วแต่จะตั้งชื่อ
หน้าจะคล้าย ๆ กับ sanook.com , mthai.com ที่มีหัวข้อข่าว แล้ว คลิ๊ก ข่าว 1 ข่าว2 ข่าว 3 แล้วเปลี่ยนหน้า

1. contentslider.css
.contentslide{
border: 10px solid navy;
border-bottom-width: 6px;
padding: 8px;
width: 400px;
height: 250px;
}

.contentslide .contentdiv{
display: none;
}

.pagination{
width: 416px; /*Width of pagination DIV. To equal that of Content Slider's width, take into account the later's left/right paddings!*/
text-align: right;
background-color: navy;
border: 10px solid navy;
border-width: 0 10px; /*Left/ right border width of pagination DIV.*/
padding: 0 0 4px 0;
}

* html .pagination{ /*Simplified box model hack to get IE5 to display width equal to that of Content Slider's*/
width: 400px; /*IE5 width*/
w\idth: 416px; /*IE6 width*/
}

.pagination a{
padding: 0 5px;
text-decoration: none;
color: #2e6ab1;
background-color: white;
}

.pagination a:hover, .pagination a.selected{
color: #000;
background-color: #FEE496;
}

2. contentslider.js
//** Featured Content Slider script- ฉ Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
//** Last updated: Feb 28th- 07- Added ability to customize pagination links' text

////Ajax related settings
var csbustcachevar=0 //bust potential caching of external pages after initial Ajax request? (1=yes, 0=no)
var csloadstatustext="<img src='loading.gif' /> Requesting content..." //HTML to indicate Ajax page is being fetched
var csexternalfiles=[] //External .css or .js files to load to style the external content(s), if any. Separate multiple files with comma ie: ["cat.css", dog.js"]

////NO NEED TO EDIT BELOW////////////////////////
var enablepersist=true
var slidernodes=new Object() //Object array to store references to each content slider's DIV containers (<div class="contentdiv">)
var csloadedobjects="" //Variable to store file names of .js/.css files already loaded (if Ajax is used)

function ContentSlider(sliderid, autorun, customPaginateText, customNextText){
   var slider=document.getElementById(sliderid)
   if (typeof customPaginateText!="undefined" && customPaginateText!="") //Custom array of pagination links text defined?
      slider.paginateText=customPaginateText
   if (typeof customNextText!="undefined" && customNextText!="") //Custom HTML for "Next" link defined?
      slider.nextText=customNextText
   slidernodes[sliderid]=[] //Array to store references to this content slider's DIV containers (<div class="contentdiv">)
   ContentSlider.loadobjects(csexternalfiles) //Load external .js and .css files, if any
   var alldivs=slider.getElementsByTagName("div")
   for (var i=0; i<alldivs.length; i++){
      if (alldivs.className=="contentdiv"){
         slidernodes[sliderid].push(alldivs) //add this DIV reference to array
         if (typeof alldivs.getAttribute("rel")=="string") //If get this DIV's content via Ajax (rel attr contains path to external page)
            ContentSlider.ajaxpage(alldivs.getAttribute("rel"), alldivs)
      }
   }
   ContentSlider.buildpagination(sliderid)
   var loadfirstcontent=true
   if (enablepersist && getCookie(sliderid)!=""){ //if enablepersist is true and cookie contains corresponding value for slider
      var cookieval=getCookie(sliderid).split(":") //process cookie value ([sliderid, int_pagenumber (div content to jump to)]
      if (document.getElementById(cookieval[0])!=null && typeof slidernodes[sliderid][cookieval[1]]!="undefined"){ //check cookie value for validity
         ContentSlider.turnpage(cookieval[0], parseInt(cookieval[1])) //restore content slider's last shown DIV
         loadfirstcontent=false
      }
   }
   if (loadfirstcontent==true) //if enablepersist is false, or cookie value doesn't contain valid value for some reason (ie: user modified the structure of the HTML)
      ContentSlider.turnpage(sliderid, 0) //Display first DIV within slider
   if (typeof autorun=="number" && autorun>0) //if autorun parameter (int_miliseconds) is defined, fire auto run sequence
      window[sliderid+"timer"]=setTimeout(function(){ContentSlider.autoturnpage(sliderid, autorun)}, autorun)
}

ContentSlider.buildpagination=function(sliderid){
   var slider=document.getElementById(sliderid)
   var paginatediv=document.getElementById("paginate-"+sliderid) //reference corresponding pagination DIV for slider
   var pcontent=""
   for (var i=0; i<slidernodes[sliderid].length; i++) //For each DIV within slider, generate a pagination link
      pcontent+='<a href="#" onClick=\"ContentSlider.turnpage(\''+sliderid+'\', '+i+'); return false\">'+(slider.paginateText? slider.paginateText : i+1)+'</a> '
   pcontent+='<a href="#" style="font-weight: bold;" onClick=\"ContentSlider.turnpage(\''+sliderid+'\', parseInt(this.getAttribute(\'rel\'))); return false\">'+(slider.nextText || "Next")+'</a>'
   paginatediv.innerHTML=pcontent
   paginatediv.onclick=function(){ //cancel auto run sequence (if defined) when user clicks on pagination DIV
   if (typeof window[sliderid+"timer"]!="undefined")
      clearTimeout(window[sliderid+"timer"])
   }
}

ContentSlider.turnpage=function(sliderid, thepage){
   var paginatelinks=document.getElementById("paginate-"+sliderid).getElementsByTagName("a") //gather pagination links
   for (var i=0; i<slidernodes[sliderid].length; i++){ //For each DIV within slider
      paginatelinks.className="" //empty corresponding pagination link's class name
      slidernodes[sliderid].style.display="none" //hide DIV
   }
   paginatelinks[thepage].className="selected" //for selected DIV, set corresponding pagination link's class name
   slidernodes[sliderid][thepage].style.display="block" //show selected DIV
   //Set "Next" pagination link's (last link within pagination DIV) "rel" attribute to the next DIV number to show
   paginatelinks[paginatelinks.length-1].setAttribute("rel", thenextpage=(thepage<paginatelinks.length-2)? thepage+1 : 0)
   if (enablepersist)
      setCookie(sliderid, sliderid+":"+thepage)
}

ContentSlider.autoturnpage=function(sliderid, autorunperiod){
   var paginatelinks=document.getElementById("paginate-"+sliderid).getElementsByTagName("a") //Get pagination links
   var nextpagenumber=parseInt(paginatelinks[paginatelinks.length-1].getAttribute("rel")) //Get page number of next DIV to show
   ContentSlider.turnpage(sliderid, nextpagenumber) //Show that DIV
   window[sliderid+"timer"]=setTimeout(function(){ContentSlider.autoturnpage(sliderid, autorunperiod)}, autorunperiod)
}

function getCookie(Name){
   var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
   if (document.cookie.match(re)) //if cookie found
      return document.cookie.match(re)[0].split("=")[1] //return its value
   return ""
}

function setCookie(name, value){
   document.cookie = name+"="+value
}

////////////////Ajax Related functions //////////////////////////////////

ContentSlider.ajaxpage=function(url, thediv){
   var page_request = false
   var bustcacheparameter=""
   if (window.XMLHttpRequest) // if Mozilla, Safari etc
      page_request = new XMLHttpRequest()
   else if (window.ActiveXObject){ // if IE
      try {
      page_request = new ActiveXObject("Msxml2.XMLHTTP")
      }
      catch (e){
      try{
      page_request = new ActiveXObject("Microsoft.XMLHTTP")
      }
      catch (e){}
      }
   }
   else
      return false
   thediv.innerHTML=csloadstatustext
   page_request.onreadystatechange=function(){
      ContentSlider.loadpage(page_request, thediv)
   }
   if (csbustcachevar) //if bust caching of external page
      bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
   page_request.open('GET', url+bustcacheparameter, true)
   page_request.send(null)
}

ContentSlider.loadpage=function(page_request, thediv){
   if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
      thediv.innerHTML=page_request.responseText
}

ContentSlider.loadobjects=function(externalfiles){ //function to load external .js and .css files. Parameter accepts a list of external files to load (array)
   for (var i=0; i<externalfiles.length; i++){
      var file=externalfiles
      var fileref=""
      if (csloadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
         if (file.indexOf(".js")!=-1){ //If object is a js file
            fileref=document.createElement('script')
            fileref.setAttribute("type","text/javascript");
            fileref.setAttribute("src", file);
         }
         else if (file.indexOf(".css")!=-1){ //If object is a css file
            fileref=document.createElement("link")
            fileref.setAttribute("rel", "stylesheet");
            fileref.setAttribute("type", "text/css");
            fileref.setAttribute("href", file);
         }
      }
      if (fileref!=""){
         document.getElementsByTagName("head").item(0).appendChild(fileref)
         csloadedobjects+=file+" " //Remember this object as being already added to page
      }
   }
}



3.ไฟล์ xxxx .html
<link rel="stylesheet" type="text/css" href="contentslider.css" />
<script type="text/javascript" src="contentslider.js">

/***********************************************
* Featured Content Slider- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<div id="slider1" class="contentslide">
<div class="contentdiv">
Content 1
</div>

<div class="contentdiv">
Content 2
</div>

<div class="contentdiv">
Content 3
</div>

</div>

<div class="pagination" id="paginate-slider1"></div>

<script type="text/javascript">
//ContentSlider("slider_ID" , opt_miliseconds_rotate)
ContentSlider("slider1") //or ContentSlider("slider1", 3000) to auto rotate every 3 seconds

</script>

ไงก็ต้องบอกว่า ขอบพระคุณครับๆๆๆๆๆ

[thaizeal]

ขอบคุณครับ 

[geddd]

ขอบคุณค่ะ เก็บก่อน 

[Dr.K]

ขอบคุณครับ

[Tee++;]

อันนี้คนทำบอกมาเองเลยครับ นั่งอยู่ข้างๆ เลย อ้างอิงกันมาให้อ่าน  :

วิธีการไม่ถูกต้องครับ ของจริงมันจะออกมาในลักษณะนี้...

ข้อมูลจะถูกโหลดเข้ามาเมื่อ tab ทำงาน ไม่ได้โหลดมาเป็นก้อนๆ แล้วซ่อนไว้ ซึ่งถ้าทำตามหลัการด้านบน มันก็แทบไม่ต่างจากของเดิมเลยคือ "โหลดหนัก" ถ้าจะเอาข้อมูลมาเป็นก้้อน ก็สู้ render เลย ออกมาเพื่อให้ผลทาง SEO ไปด้วยยังดีซะกว่า

แต่ประโยชน์ใช้งานของมันจริงๆคือ เพื่อให้ user ได้รับข้อมูลที่ตรงกับที่ต้องการจริงๆ เป็นลักษณะของ ajax คือ จะแสดงผลเมื่อมีการ request ไป และคืนข้อมูลกับมาเป็น json ซึ่งเบากว่่า XML โดยลักษณะคล้ายๆ กับ Yahoo!

Website: http://www.thaiajax.com/

[Step9]

อันนี้คนทำบอกมาเองเลยครับ นั่งอยู่ข้างๆ เลย อ้างอิงกันมาให้อ่าน  :

วิธีการไม่ถูกต้องครับ ของจริงมันจะออกมาในลักษณะนี้...

ข้อมูลจะถูกโหลดเข้ามาเมื่อ tab ทำงาน ไม่ได้โหลดมาเป็นก้อนๆ แล้วซ่อนไว้ ซึ่งถ้าทำตามหลัการด้านบน มันก็แทบไม่ต่างจากของเดิมเลยคือ "โหลดหนัก" ถ้าจะเอาข้อมูลมาเป็นก้้อน ก็สู้ render เลย ออกมาเพื่อให้ผลทาง SEO ไปด้วยยังดีซะกว่า

แต่ประโยชน์ใช้งานของมันจริงๆคือ เพื่อให้ user ได้รับข้อมูลที่ตรงกับที่ต้องการจริงๆ เป็นลักษณะของ ajax คือ จะแสดงผลเมื่อมีการ request ไป และคืนข้อมูลกับมาเป็น json ซึ่งเบากว่่า XML โดยลักษณะคล้ายๆ กับ Yahoo!

Website: http://www.thaiajax.com/

ข่าววงใน 

[Dr.K]

ก้อยังเยอะอยู่ดีอะนะ
โหลดหนักเท่าเดิม
เบาลงแค่ ลดคำว่า table กะสีสันที่เป็นกรอบออก
จืดลงไป ไม่แน่ พลัง เสียว อาจจะได้เท่าเดิม
(แต่กำเนิดมาสิบกว่าปีแล้ว ได้เปรียบอยู่แล้วล่ะ)