189 8069 5689
你好,你的问题其实包含三个方面。
作为一家“创意+整合+营销”的成都网站建设机构，我们在业内良好的客户口碑。创新互联提供从前期的网站品牌分析策划、网站设计、成都网站建设、网站设计、创意表现、网页制作、系统开发以及后续网站营销运营等一系列服务，帮助企业打造创新的互联网品牌经营模式与有效的网络营销方法,创造更大的价值。
一个是前端异步上传还是同步上传，关于异步上传，方案有很多种，ajax或者iframe。这类插件也很多，如Uploadify,但一般比较大，个人觉得有点杀鸡用牛刀的感觉,给你推荐一款笔者自己写的的插件,jquery.attach.js,本身才3kb不到,支持zip/rar/mp4/mp4/png/jpg/bmp等。下载地址
另一个是多图上传，多图可以上传本质上是多个单图上传问题，像这种，kindeditor 的多图上传插件，百度的uedit 多图上传插件，都可以解决问题，swfupload也可以。
最后是后端处理程序，如果你是thinkphp 写的，可以用thinkphp 的upload 包。
希望对你有帮助
!doctype html
html
head
meta charset="UTF-8"
titleDocument/title
style
*{padding: 0;margin: 0; }
ul li{list-style-type: none}
.gameTab{ width: 1100px; height: 150px; overflow: hidden; margin: 50px auto;position: relative;}
.gameTab ul{ width: 7680px; overflow: hidden; }
.gameTab ulli{ width: 220px; height:150px; float: left;text-align: center;}
.gameTab ulli:hover{opacity: 0.5}
.prev,.next{position: absolute;top: 50%;transform:translate(0,-50%);padding: 5px;background: red;z-index: 99;text-decoration: none;color: #fff;
}
.prev{left: 0;}
.next{right: 0;}
/style
/head
body
div
a href="javascript:;"前一张/a
ul
li style="background: #CB2929"1111/li
li style="background: #23C048"2222/li
li style="background: #00ABEA"3333/li
li style="background: #FF9800"4444/li
li style="background: #F96B36"5555/li
li style="background: #ADADAD"6666/li
/ul
a href="javascript:;"下一张/a
/div
script src=""/script
script
$(function () {
//下一张
function moveLeft(){
$(".gameTab ul").animate({marginLeft:"-220px"},300, function () {
$(".gameTab ul").children().first().appendTo($(".gameTab ul"));
$(".gameTab ul").css('marginLeft','0px');
});
}
$('.next').click(moveLeft);
//前一张
$('.prev').click(function () {
$(".gameTab ul").children().last().prependTo($(".gameTab ul"));//把ul的最后一个子元素添加到开头第一个
$(".gameTab ul").css('marginLeft','-220px'); //初始化把ul的marginleft左移220
$(".gameTab ul").animate({marginLeft:"0px"},300);
})
// 自动轮播
var timer = setInterval(moveLeft,3000)
//hover时停掉定时器
$('.gameTab').mouseenter(function(){
clearTimeout(timer)
})
$('.gameTab').mouseleave(function(){
timer=setInterval(moveLeft,3000)
})
})
/script
/body
/html
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
""
html xmlns="" xml:lang="en"
head
meta http-equiv="content-type" content="text/html; charset=utf-8" /
titleImage Gallery/title
script type="text/javascript" src="jquery.min.js"/script
script
// JavaScript Document
$(document).ready(function(e) {
/***不需要自动滚动，去掉即可***/
time = window.setInterval(function(){
$('.og_next').click();
},5000);
/***不需要自动滚动，去掉即可***/
linum = $('.mainlist li').length;//图片数量
w = linum * 250;//ul宽度
$('.piclist').css('width', w + 'px');//ul宽度
$('.swaplist').html($('.mainlist').html());//复制内容
$('.og_next').click(function(){
if($('.swaplist,.mainlist').is(':animated')){
$('.swaplist,.mainlist').stop(true,true);
}
if($('.mainlist li').length4){//多于4张图片
ml = parseInt($('.mainlist').css('left'));//默认图片ul位置
sl = parseInt($('.swaplist').css('left'));//交换图片ul位置
if(ml=0 mlw*-1){//默认图片显示时
$('.swaplist').css({left: '1000px'});//交换图片放在显示区域右侧
$('.mainlist').animate({left: ml - 1000 + 'px'},'slow');//默认图片滚动
if(ml==(w-1000)*-1){//默认图片最后一屏时
$('.swaplist').animate({left: '0px'},'slow');//交换图片滚动
}
}else{//交换图片显示时
$('.mainlist').css({left: '1000px'})//默认图片放在显示区域右
$('.swaplist').animate({left: sl - 1000 + 'px'},'slow');//交换图片滚动
if(sl==(w-1000)*-1){//交换图片最后一屏时
$('.mainlist').animate({left: '0px'},'slow');//默认图片滚动
}
}
}
})
$('.og_prev').click(function(){
if($('.swaplist,.mainlist').is(':animated')){
$('.swaplist,.mainlist').stop(true,true);
}
if($('.mainlist li').length4){
ml = parseInt($('.mainlist').css('left'));
sl = parseInt($('.swaplist').css('left'));
if(ml=0 mlw*-1){
$('.swaplist').css({left: w * -1 + 'px'});
$('.mainlist').animate({left: ml + 1000 + 'px'},'slow');
if(ml==0){
$('.swaplist').animate({left: (w - 1000) * -1 + 'px'},'slow');
}
}else{
$('.mainlist').css({left: (w - 1000) * -1 + 'px'});
$('.swaplist').animate({left: sl + 1000 + 'px'},'slow');
if(sl==0){
$('.mainlist').animate({left: '0px'},'slow');
}
}
}
})
});
$(document).ready(function(){
$('.og_prev,.og_next').hover(function(){
$(this).fadeTo('fast',1);
},function(){
$(this).fadeTo('fast',0.7);
})
})
/script
style
body,ul,li{ padding:0; margin:0;}
ul,li{ list-style:none;}
img{ border:none;}
a{ color:#6cf;}
a:hover{ color:#84B263;}
.box{ width:980px; margin:0 auto; position:relative; overflow:hidden; _height:100%;}
.picbox{ width:980px; height:115px; overflow:hidden; position:relative;}
.piclist{ height:115px;position:absolute; left:0px; top:0px}
.piclist li{ background:#eee; margin-right:20px; padding:5px; float:left;}
.swaplist{ position:absolute; left:-3000px; top:0px}
.og_prev,.og_next{ width:30px; height:50px; background:url(../images/icon.png) no-repeat; background:url(../images/icon_ie6.png) no-repeat\9; position:absolute; top:33px; z-index:99; cursor:pointer;filter:alpha(opacity=70); opacity:0.7;}
.og_prev{ background-position:0 -60px; left:4px;}
.og_next{ background-position:0 0; right:4px;}
/style
/head
body
div class="box"
div class="picbox"
ul class="piclist mainlist"
lia href="#" target="_blank"img src="images/1.jpg" width="220" height="105" //a/li
lia href="#" target="_blank"img src="images/2.jpg" width="220" height="105"//a/li
lia href="#" target="_blank"img src="images/3.jpg" width="220" height="105"//a/li
lia href="#" target="_blank"img src="images/4.jpg" width="220" height="105"//a/li
lia href="#" target="_blank"img src="images/1.jpg" width="220" height="105"//a/li
lia href="#" target="_blank"img src="images/2.jpg" width="220" height="105"//a/li
lia href="#" target="_blank"img src="images/3.jpg" width="220" height="105"//a/li
lia href="#" target="_blank"img src="images/4.jpg" width="220" height="105"//a/li
/ul
ul class="piclist swaplist"/ul
/div
div class="og_prev"/div
div class="og_next"/div
/div
/body
/html
点击弹出层的切换下一张按钮时，把弹窗的这张图片的src改成页面中下一张图片的src,点上一张也是，换上一张图片的src,这样通过改src就可以实现，或者是用这个插件，
首先我们在页面上放置个上传按钮，使用POST提交到ajax.php。#ul_pics 用来显示上传完毕后的图片。
a class="btn" id="btn"上传图片/a 最大500KB，支持jpg，gif，png格式。
ul id="ul_pics" class="ul_pics clearfix"/ul
接着，加载jQuery.js和plupload.full.min.js插件。
script type="text/javascript" src="jquery.js"/script
script type="text/javascript" src="plupload/plupload.full.min.js"/script
当点击按钮“上传图片”后，弹出选择文件对话框，按 "ctrl" 选择多图片上传。然后调用 uploader.start() 方法，开始上传。上传中间过程我们可以用 UploadProgress 方法来显示文件进度，最后通过 FileUploaded 来显示对应的图片。通过浏览器控制台，会发现上传一张图片，会向后台ajax.php请求一次。
var uploader = new plupload.Uploader({ //创建实例的构造方法
runtimes: 'html5,flash,silverlight,html4',
//上传插件初始化选用那种方式的优先级顺序
browse_button: 'btn',
// 上传按钮
url: "ajax.php",
//远程上传地址
flash_swf_url: 'plupload/Moxie.swf',
//flash文件地址
silverlight_xap_url: 'plupload/Moxie.xap',
//silverlight文件地址
filters: {
max_file_size: '500kb',
//最大上传文件大小（格式100b, 10kb, 10mb, 1gb）
mime_types: [ //允许文件上传类型
{
title: "files",
extensions: "jpg,png,gif"
}]
},
multi_selection: true,
//true:ctrl多文件上传, false 单文件上传
init: {
FilesAdded: function(up, files) { //文件上传前
if ($("#ul_pics").children("li").length 30) {
alert("您上传的图片太多了！");
uploader.destroy();
} else {
var li = '';
plupload.each(files,
function(file) { //遍历文件
li += "li id='" + file['id'] + "'div class='progress'span class='bar'/spanspan class='percent'0%/span/div/li";
});
$("#ul_pics").append(li);
uploader.start();
}
},
UploadProgress: function(up, file) { //上传中，显示进度条
$("#" + file.id).find('.bar').css({
"width": file.percent + "%"
}).find(".percent").text(file.percent + "%");
},
FileUploaded: function(up, file, info) { //文件上传成功的时候触发
var data = JSON.parse(info.response);
$("#" + file.id).html("div class='img'img src='" + data.pic + "'//divp" + data.name + "/p");
},
Error: function(up, err) { //上传出错的时候触发
alert(err.message);
}
}
});
uploader.init();