บทความนี้จะนำเสนอเทคนิคการทำเว็บอีกอย่างนึง คือการทำ slide show ซึ่งเราจะเห็นเกือบทุกเว็บไซต์เลยก็ว่าได้ครับ ที่มีตัว slide show นี้อยู่ในเว็บเหล่านั้น โดยอาจจะเอามาใช้แสดง Bannerโฆษณา,แสดงรูปภาพ หรืออื่นๆแล้วแต่จะนำมาประยุกต์ใช้ครับ Slide Show ตัวนี้ เราจะเขียนด้วย jQuery ครับ โดยจะเป็น Slide Show แบบเลื่อนซ้ายขวาเพื่อแสดงรายการสินค้า คุณสามารถนำเอาไปประยุกต์ใช้งานตามความต้องการของคุณได้ เช่น แสดงรายการสินค้ามาใหม่ล่าสุด,สินค้าแนะนำ,สินค้าขายดี 10 อันดับ,แสดงBannerโฆษณาบนเว็บไซต์ของคุณก็ได้ครับ
มาดูCodeกันเลยครับ สร้างไฟล์ .php ขึ้นมาแล้วให้พิมพ์ Code ตามนี้
<?php $conn=mysql_connect('localhost','root','root');//เชื่อมต่อกับฐานข้อมูล mysql_select_db('db_exshop');//เลื่อกฐานข้อมูล mysql_query("SET NAMES 'utf8'"); $rsShowPd=mysql_query("SELECT * FROM tb_product ORDER BY pd_name ASC LIMIT 12");//ดึงข้อมูล12แถวจากเทเบิล $pageTotal=ceil(mysql_num_rows($rsShowPd)/5);//หาร 5 เพราะเราจะให้แสดง สไลด์ ละ 5 รายการครับ ?> <!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" /> <script type="text/javascript" src="../js/jquery.js"></script> <script type="text/javascript"> //2011 Script By php-for-ecommerce.blogspot.com $tsilder=function(ele){ var _w=ele.width(); var _i=0; var ui_w=ele.children().children().width(); ele.prev().prev('.tpage_cont').find('.tpage:first').addClass('tpage_active'); ele.prev('.nav-left').bind('click',function(e){ if(_i>0){_i-=1;}else{_i=Math.ceil(ui_w/_w)-1;} $tslider_animate(ele,_i,_w); $tslider_active(ele,_i+1); }); ele.next('.nav-right').bind('click',function(e){ _i+=1; if((_i*_w)>=ui_w){_i=0;} $tslider_animate(ele,_i,_w); $tslider_active(ele,_i+1); }); ele.prev().prev('.tpage_cont').find('.tpage').bind('click',function(e){ _i=$(this).attr('pageno')-1; $tslider_animate(ele,_i,_w); $tslider_active(ele,_i+1); }); ele.next().next('.tpage_cont').find('.tpage').bind('click',function(e){ _i=$(this).attr('pageno')-1; $tslider_animate(ele,_i,_w); $tslider_active(ele,_i+1); }); } $tslider_active=function(ele,i){ ele.prev().prev('.tpage_cont').find('.tpage').removeClass('tpage_active'); ele.prev().prev('.tpage_cont').find('.tpage[pageno="'+i+'"]').addClass('tpage_active'); } $tslider_animate=function(ele,i,w){ var wi=w*i; ele.children('.tslideitem').animate({'left':-wi},1000); } $(document).ready(function(){ $tsilder($('.tslidescroll')); }); </script> <title>สอนทำ Slide ด้วย jQuery</title> <style> body{font-family:"Courier New", Courier, monospace;font-size:12px;margin:0;background:url(../images/realsteel.jpg) no-repeat;} .tslideitem{width:1000em;height:200px;float:left;position:relative;overflow:hidden;} ul.tslideshow{float:left;position:relative;overflow:hidden;padding:0;margin:0;} ul.tslideshow li{list-style: none outside none;float:left;margin:5px;} .tpage_cont{text-align:center;margin:3px;} .tpage{cursor:pointer;padding:1px 7px 1px 7px; border:#999 solid 1px;margin:1px;background:#F60;} .tpage_active{background:#FF3;} .nav-left{float:left;margin:80px 2px 2px 3px;cursor:pointer;border:1px solid #333;padding:2px;} .nav-right{float:left;margin:80px 2px 2px 3px;cursor:pointer;border:1px solid #333;padding:2px;} </style> </head> <body> <div style="margin:10px auto;width:900px;"> <div style="width:810px;float:left;background:#F90;display:block;overflow:hidden;margin-top:300px;"> <div class="tpage_cont"> <?php for($page=1;$page<=$pageTotal;$page++){//วนลูปแสดงเลขหน้าทั้งหมด?> <span class="tpage" pageno="<?=$page?>"><?=$page?></span> <? }?> </div> <div class="nav-left">«</div> <div class="tslidescroll" style="float:left;width:770px;position:relative;overflow:hidden;"> <div class="tslideitem"> <ul class="tslideshow"> <?php while($showPd=mysql_fetch_array($rsShowPd)){ ?> <li> <div style="float:left;"> <img src="../img_pd/<?=$showPd['pd_img']?>" width="144" height="170" /> <div style="position:absolute;background:#000;color:#FFF;opacity:0.6;padding:2px;width:140px; margin-left:0.5px;bottom:3px;"> <? echo $showPd['pd_name'].'<br />ราคา : '.$showPd['pd_price']?> </div> </div> </li> <?php }?> </ul> </div> </div> <div class="nav-right">»</div> </div> <br style="clear:both;" /> </body> </html> <?php mysql_free_result($rsShowPd); mysql_close($conn); ?>วิธีเรียกใช้งานคำสั่ง
$(document).ready(function(){ $tsilder($('.tslidescroll')); });
ความสามารถของโปรแกรม
1.สามารถ คลิกที่ เลขหน้า หรือ สัญลักษณ์ลูกศรซ้าย-ขวา (<< ,>>) เพื่อเลือกดูข้อมูลที่ต้องการได้ การทำงานจะเป็นแบบเลื่อน(Slide)ไปทางซ้ายหรือขวา
2.ในหนึ่่งหน้าเว็บเพจ สามารถแสดง Slide Show ได้ไม่จำกัด โดยใช้คำสั่ง
$(document).ready(function(){
$tsilder($('.tslidescroll1'));//.tslidescroll1 คือชื่อ Class ของ DIV Element
$tsilder($('.tslidescroll2'));
$tsilder($('.tslidescroll3'));
.
.
.
});
คุณสามารถนำCodeนี้ไปดัดแปลงกับเว็บไซต์ของคุณได้ครับ แต่ต้องมีความรู้เรื่อง HTML,CSS หน่อยนะ เพราะเราต้องกำหนด Layout ทั้งขนาดความกว้าง ความสูง ฯลฯ ด้วย CSS ทั้งนั้นครับ หากสงสัยอะไรสามารถสอบถามผมได้ จากช่องCommentด้านล่างเลยครับ
DEMO->http://pluto.host22.com/slider-jquery/slide.php (สามารถ View Code ดูได้ครับ).
เวลาเรียกใช้งาน มันต้องเรียกใช้ยังไง วางโค้ดเรียกใช้งานตรงไหรครับ
ตอบลบสร้างไฟล์ .php ขึ้นมาตั้งชื่ออะไรก็ได้ เช่น showslide.php
ลบก๊อปปี้โค๊ดไปวาง แล้วแก้ไขคำสั่งเชื่อมต่อกับฐานข้อมูล ที่บรรทัดที่ 2-3
และแก้พาธเรียกไฟล์ jquery ที่บรรทัด 12
วิธีเรียกใช้งาน
ตอบลบ$(document).ready(function(){
$tsilder($('.tslidescroll'));
});
ต้องเอาโค้ดนี้ไปวางไว้ที่ไหนคับผมไม่เข้าใจคับ