图片上一个下一个轮换效果

最新推荐文章于 2024-11-06 20:27:04 发布

weixin_33857230

最新推荐文章于 2024-11-06 20:27:04 发布

阅读量102

点赞数

文章标签： php javascript ViewUI

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="http://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

weixin_33857230

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫