zoukankan      html  css  js  c++  java
  • 图片上一个下一个轮换效果

    wp_442057835_jquery.php(解1)
     1 <html>
     2 <head>
     3     <title>wp_442057835_jquery</title>
     4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5     <meta http-equiv="Content-Language" content="zh-CN" />
     6     <script type="text/javascript" src="https://files.cnblogs.com/Zjmainstay/jquery-1.6.2.min.js"></script>
     7 </head>
     8 <body>
     9 
    10 <script> 
    11 $(document).ready(function(){ 
    12     $("#last_pic").click(function(){ 
    13         var q=1; 
    14         var userid=$("#user_pic").attr("imgid"); 
    15         $.ajax({ 
    16             url:"wp_442057835_process.php?q="+q+"&u="+userid+"&sid="+Math.random(), 
    17             type:'GET', 
    18             success:function(userid){ 
    19                 $("#user_pic").attr('imgid',userid); 
    20                 $("#user_pic").attr('src',"user_pic/"+userid+".jpg"); 
    21             } 
    22         }); 
    23     });
    24     $("#next_pic").click(function(){ 
    25         var q=2; 
    26         var userid=$("#user_pic").attr("imgid"); 
    27         $.ajax({ 
    28             url:"wp_442057835_process.php?q="+q+"&u="+userid+"&sid="+Math.random(), 
    29             type:'GET', 
    30             success:function(userid){ 
    31                 $("#user_pic").attr('imgid',userid); 
    32                 $("#user_pic").attr('src',"user_pic/"+userid+".jpg"); 
    33             } 
    34         }); 
    35     }); 
    36 }); 
    37 </script>
    38 <span id="last_pic" class="pic_a" >上一张</span> 
    39 <img src="<?php echo "user_pic/1.jpg" ?>" alt="修改头像" id="user_pic" width="200px" height="100px" imgid="1"/> 
    40 <span id="next_pic" class="pic_a">下一张</span> 
    41 </body> 
    42 </html>
    wp_442057835(解2)
     1 <html>
     2 <head>
     3     <title>wp_442057835</title>
     4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5     <meta http-equiv="Content-Language" content="zh-CN" />
     6 </head>
     7 <body>
     8 <script>
     9 function last_pic() {
    10     userid = document.getElementById("user_pic").getAttribute("imgid"); //使用imgid存储当前照片id 
    11     xmlHttp=GetXmlHttpObject(); 
    12     if (xmlHttp==null) { 
    13         alert ("Browser does not support HTTP Request"); 
    14         return null; 
    15     } 
    16     var q="1"; 
    17     var url="wp_442057835_process.php?q="+q+"&u="+userid+"&sid="+Math.random(); 
    18     xmlHttp.onreadystatechange=stateChanged; 
    19     xmlHttp.open("GET",url,true); 
    20     xmlHttp.send(null); 
    21 }
    22 function next_pic() {
    23     userid = document.getElementById("user_pic").getAttribute("imgid");
    24     xmlHttp = GetXmlHttpObject();
    25     if (xmlHttp == null) {
    26         alert("Browser does not support HTTP Request");
    27         return null;
    28     }
    29     var q = "2";
    30     var url = "wp_442057835_process.php?q=" + q + "&u=" + userid + "&sid=" + Math.random();
    31     xmlHttp.onreadystatechange = stateChanged;
    32     xmlHttp.open("GET", url, true);
    33     xmlHttp.send(null);
    34 }
    35 
    36 function stateChanged() {
    37     if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
    38         var nuserid = xmlHttp.responseText;
    39         var newImage = document.getElementById("user_pic");
    40         newImage.setAttribute("src", "user_pic/" + nuserid + ".jpg");
    41         newImage.setAttribute("imgid", nuserid);
    42     }
    43 }
    44 function GetXmlHttpObject(){
    45     var request;
    46     var browser = navigator.appName;
    47     if(browser == "Microsoft Internet Explorer"){
    48         var arrVersions = ["Microsoft.XMLHTTP","MSXML2.XMLHttp.4.0",
    49             "MSXML2.XMLHttp.3.0","MSXML2.XMLHttp.5.0"];
    50         for(var i=0;i < arrVersions.length;i++){
    51             try{
    52                 request = new ActiveXObject(arrVersions[i]);
    53                 return request;    
    54             }catch(exception){
    55                 //忽略,继续    
    56             }
    57         }
    58     }else{
    59         request = new XMLHttpRequest();
    60         return request;    
    61     }
    62 }
    63 </script>
    64 <div id = "pic_show" >
    65 <a href = "javascript:;"onclick = "last_pic(); return false;" > 上一张 </a> 
    66 <img src="<?php echo "user_pic/1.jpg " ?>"alt = "修改头像"hspace = "7"id = "user_pic"width = "200px"height = "100px"imgid = "1" />
    67 <a href = "javascript:;"onclick = "next_pic(); return false;" > 下一张 </a> 
    68 </body> 
    69 </html>
    wp_442057835_process.php
     1 <?php 
     2 header("content-type:text/html;charset=utf-8"); 
     3 include("db.php"); 
     4 //echo $_GET["q"]; 
     5 //echo $_GET["u"]; 
     6 $userid=$_GET["u"]; 
     7 if($_GET["q"]==1) { 
     8     $lquery=mysql_query("SELECT * FROM usermember WHERE userid < $userid ORDER BY userid DESC LIMIT 0,1 "); 
     9     $last_user =mysql_fetch_object($lquery); 
    10     $last_userid=$last_user->userid; 
    11     if(empty($last_userid)) $last_userid = $userid; 
    12     echo $last_userid; 
    13 } 
    14 if($_GET["q"]=="2") { 
    15     $nquery=mysql_query("SELECT * FROM usermember WHERE userid > $userid ORDER BY userid ASC LIMIT 0,1 "); 
    16     $next_user =mysql_fetch_object($nquery); 
    17     $next_userid=$next_user->userid; 
    18     if(empty($next_userid)) $next_userid = $userid; 
    19     echo $next_userid; 
    20 }
    table usermember
     1   
     2  CREATE TABLE `usermember` (
     3    `id` int(11) NOT NULL AUTO_INCREMENT,
     4    `userid` int(11) NOT NULL,
     5    PRIMARY KEY (`id`)
     6  ) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8
     7  
     8  //数据
     9  
    10  id userid
    11  
    12  1    1
    13 
    14  2    2
    15  
    16  3    3
    17  
    18  4    4
    user_pic
    1 1.jpg
    2 
    3 2.jpg
    4 
    5 3.jpg
    6 
    7 4.jpg
    作者:Zjmainstay
             
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
    版权信息
  • 相关阅读:
    Postman使用教程
    CAD和ArcGIS转换 矢量配准
    SAP CRM Advanced search和Simple search里Max hit表现行为的差异
    SAP CRM Product simple search的启用步骤
    如何快速定位SAP CRM订单应用(Order Application)错误消息抛出的准确位置
    如何动态修改SAP CRM WebClient UI表格栏的宽度
    如何在SAP CRM WebClient UI里创建web service并使用ABAP消费
    如何处理SAP CRM Web Service错误
    如何使用SAP CRM WebClient UI实现一个类似新浪微博的字数统计器
    如何开启SAP CRM基于WORD模板创建附件的功能
  • 原文地址:https://www.cnblogs.com/Zjmainstay/p/image_exchange.html
Copyright © 2011-2022 走看看