jquery多图,jquery多图效果

求一款jQuery或js多图上传插件

你好,你的问题其实包含三个方面。

作为一家“创意+整合+营销”的成都网站建设机构，我们在业内良好的客户口碑。创新互联提供从前期的网站品牌分析策划、网站设计、成都网站建设、网站设计、创意表现、网页制作、系统开发以及后续网站营销运营等一系列服务，帮助企业打造创新的互联网品牌经营模式与有效的网络营销方法,创造更大的价值。

一个是前端异步上传还是同步上传，关于异步上传，方案有很多种，ajax或者iframe。这类插件也很多，如Uploadify,但一般比较大，个人觉得有点杀鸡用牛刀的感觉,给你推荐一款笔者自己写的的插件,jquery.attach.js,本身才3kb不到,支持zip/rar/mp4/mp4/png/jpg/bmp等。下载地址

另一个是多图上传，多图可以上传本质上是多个单图上传问题，像这种，kindeditor 的多图上传插件，百度的uedit 多图上传插件，都可以解决问题，swfupload也可以。

最后是后端处理程序，如果你是thinkphp 写的，可以用thinkphp 的upload 包。

希望对你有帮助

用JQuery实现一行多图轮播，是单击一下一张图片轮播，不是一下一行图片轮播，给个例子，跪求

!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

jquery多图横向间歇的滚动

!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

jquery 图片弹出层多图切换需要一个页面多张图但是一张图里面有独自的图片组。

点击弹出层的切换下一张按钮时，把弹窗的这张图片的src改成页面中下一张图片的src,点上一张也是，换上一张图片的src,这样通过改src就可以实现，或者是用这个插件，

jquery ajax多图上传显示怎么写

首先我们在页面上放置个上传按钮，使用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();