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
             
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
    版权信息
  • 相关阅读:
    Vue入门教程 第一篇 (概念及初始化)
    安装配置MongoDB
    Windows搭建SVN服务器
    MySql + Workbench使用教程
    Node.js入门教程 第六篇 (连接使用MySql)
    Node.js入门教程 第五篇 (Express框架)
    Node.js入门教程 第四篇 (流及文件操作)
    Node.js入门教程 第三篇 (模块、路由)
    Node.js入门教程 第二篇 (HelloWorld及事件分发)
    Node.js入门教程 第一篇 (概念原理及环境配置)
  • 原文地址:https://www.cnblogs.com/Zjmainstay/p/image_exchange.html
Copyright © 2011-2022 走看看