首页>>Jquery图片>>ajax 图片展示，手动展示幻灯片(2013-09-03)

ajax 图片展示，手动展示幻灯片

翻页的地方在图片上方，当然也可以用css+div把翻页的和文字移动到图片里面合适的位置

数据库很简单，就是3个字段，id,picturetitle,picturename

ajax 图片展示，手动展示幻灯片
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 index.php

 

XML/HTML Code复制内容到剪贴板
  1. <html>  
  2. <head>  
  3. <!-- load jquery -->  
  4. <script type="text/javascript" src="js/jquery.min.js"></script>  
  5. <script type="text/javascript">  
  6. $(document).ready(function() {  
  7. $(".getPicButton").live("click", function() {  
  8.     var myPictureId = $(this).attr('id');  
  9.     var getImgId =  myPictureId.split("-");  
  10.     getPicture(getImgId[1]);   
  11.     return false;  
  12. });  
  13. });  
  14.   
  15. function getPicture(myPicId)  
  16. {  
  17. $('#picture').html('<div style="margin-top:50px;width:500px;" align="center" ><img src="loader.gif" /></div>');  
  18.   
  19. var myData = 'picID='+myPicId;  
  20. jQuery.ajax({  
  21.     url: "getpicture.php",  
  22.     type: "GET",  
  23.     dataType:'html',  
  24.     data:myData,  
  25.     success:function(response)  
  26.     {  
  27.         $('#picture').html(response);  
  28.     }  
  29.     });  
  30. }  
  31. </script>  
  1. <div id="picture">  
  2. <?php require('getpicture.php'); ?>  
  3. </div>  

 getpicture.php

 

PHP Code复制内容到剪贴板
  1. <?php  
  2. include("conn.php");  
  3.    
  4. if(isset($_GET["picID"]) && is_numeric($_GET["picID"]))  
  5. {  
  6.     $curPicId = $_GET["picID"];  
  7. }else{  
  8.     $curPicId =1;  
  9. }  
  10.   
  11. //Connect to Database  
  12.   
  13.   
  14. //Get the Picture  
  15. $Result = mysql_query("SELECT picturetitle,picturename FROM content WHERE id=$curPicId");  
  16. if($Result)  
  17. {  
  18.     //empty variables, just incase   
  19.     $picTitle=''; $picName=''; $PrvLink='';$NextLink='';  
  20.       
  21.     $row = mysql_fetch_row($Result);  
  22.     $picTitle = $row[0];  
  23.     $picName = $row[1];  
  24.       
  25.       
  26.     //Get previous Picture  
  27.     $PrvResult = mysql_query("SELECT * FROM content WHERE id<$curPicId ORDER BY id DESC");  
  28.     $PrvPic = mysql_fetch_row($PrvResult);  
  29.     if($PrvPic)  
  30.     {  
  31.         $PrvLink = '<a href="#" id="getPic-'.$PrvPic[0].'" title="'.$PrvPic[1].'" class="getPicButton"><img src="prev.png" border="0" /></a>';  
  32.     }  
  33.   
  34.     //Get next Picture  
  35.     $NxtResult = mysql_query("SELECT * FROM content WHERE id>$curPicId ORDER BY id ASC");  
  36.     $NxtPic = mysql_fetch_row($NxtResult);  
  37.     if($NxtPic)  
  38.     {  
  39.         $NextLink = '<a href="#" id="getPic-'.$NxtPic[0].'" title="'.$NxtPic[1].'" class="getPicButton"><img src="next.png" border="0" /></a>';  
  40.     }  
  41.   
  42.   
  43.   
  44.     //$picdata = array('pic'=>$picName,'pictitle'=>$picTitle,'prvid'=>$PrvPicID,'prvtitle'=>$PrvPicTitle,'nxtid'=>$NxtPicID,'nxttitle'=>$NxtPicTitle);  
  45.       
  46.     echo '<table width="500" border="0" cellpadding="5" cellspacing="0"> 
  47.           <tr> 
  48.             <td><table width="100%" border="0" cellpadding="5" cellspacing="0"> 
  49.               <tr> 
  50.                 <td width="10%">'.$PrvLink.'</td> 
  51.                 <td width="80%" align="center"><h3>'.$picTitle.'</h3></td> 
  52.                 <td width="10%">'.$NextLink.'</td> 
  53.               </tr> 
  54.             </table></td> 
  55.           </tr> 
  56.           <tr> 
  57.             <td align="center"><img src="../'.$picName.'" /></td> 
  58.           </tr> 
  59.         </table>';  
  60.       
  61.     //json data  
  62.     //echo json_encode($picdata);  
  63.   
  64. }  
  65.   
  66.   
  67. ?>  

 


原文地址:http://www.freejs.net/article_jquerytupiantexiao_12.html