jquery 多圖片預(yù)覽

給你重新寫(xiě)了一個(gè)，直接拷貝到記事本另存為html就可以調(diào)試(Jquery是在線引用的)。

創(chuàng)新互聯(lián)建站網(wǎng)站建設(shè)由有經(jīng)驗(yàn)的網(wǎng)站設(shè)計(jì)師、開(kāi)發(fā)人員和項(xiàng)目經(jīng)理組成的專(zhuān)業(yè)建站團(tuán)隊(duì)，負(fù)責(zé)網(wǎng)站視覺(jué)設(shè)計(jì)、用戶體驗(yàn)優(yōu)化、交互設(shè)計(jì)和前端開(kāi)發(fā)等方面的工作，以確保網(wǎng)站外觀精美、成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)易于使用并且具有良好的響應(yīng)性。

以下代碼在IE8和FF下測(cè)試通過(guò)。

另：程序如果有什么問(wèn)題可以HI我。

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""

html

head

title New Document /title

script src="" type="text/javascript"/script

script type="text/javascript"

//全局變量

var FileCount=0;//上傳文件總數(shù)

//添加上傳文件按鈕

function addFile(obj)

{

var filePath=$(obj).prev().val();

var FireFoxFileName="";

//FireFox文件的路徑需要特殊處理

if(window.navigator.userAgent.indexOf("Firefox")!=-1)

{

FireFoxFileName=filePath;

filePath=$(obj).prev()[0].files.item(0).getAsDataURL();

}

if(!checkFile(filePath,FireFoxFileName))

{

$(obj).prev().val("");

return;

}

if(filePath.length==0)

{

alert("請(qǐng)選擇上傳文件");

return false;

}

FileCount++;

//添加上傳按鈕

var html='span';

html+='input id="f'+FileCount+'" name="'+FileCount+'" type="file"/?';

html+='input type="button" value="添加" onclick="addFile(this)"/';

html+='/span';

$("#fil").append(html);

//添加圖片預(yù)覽

html='li';

html+='img id="img'+(FileCount-1)+'" src="'+filePath+'" width="100" height="100" style="cursor:pointer;" alt="暫無(wú)預(yù)覽" /';

html+='br/';

html+='a href="#" name="img'+(FileCount-1)+'" onclick="DelImg(this)"刪除/a';

html+='/li';

$("#ImgList").append(html);

}

//刪除上傳文件（file以及img）

function DelImg(obj)

{

var ID=$(obj).attr("name");

ID=ID.substr(3,ID.length-3);

$("#f"+ID).parent().remove();

$(obj).parent().remove();

return false;

}

//檢查上傳文件是否重復(fù),以及擴(kuò)展名是否符合要求

function checkFile(fileName,FireFoxFileName)

{

var flag=true;

$("#ImgList").find(":img").each(function(){

if(fileName==$(this).attr("src"))

{

flag=false;

if(FireFoxFileName!='')

{

alert('上傳文件中已經(jīng)存在\''+FireFoxFileName+'\'!');

}

else

{

alert('上傳文件中已經(jīng)存在\''+fileName+'\'!');

}

return;

}

});

//文件類(lèi)型判斷

var str="jpg|jpeg|bmp|gif";

var fileExtName=fileName.substring(fileName.indexOf(".")+1);//獲取上傳文件擴(kuò)展名

if(FireFoxFileName!='')//fireFox單獨(dú)處理

{

fileExtName=FireFoxFileName.substring(FireFoxFileName.indexOf(".")+1);

}

//alert(fileExtName);

if(str.indexOf(fileExtName.toLowerCase())==-1)

{

alert("只允許上傳格式為jpg，jpeg，bmp，gif的文件。");

flag=false;

}

return flag;

}

/script

style type="text/css"

.fil

{

width:300px;

}

.fieldset_img

{

border:1px solid blue;

width:550px;

height:180px;

text-align:left;

}

.fieldset_img img

{

border:1px solid #ccc;

padding:2px;

margin-left:5px;

}

#ImgList li

{

text-align:center;

list-style:none;

display:block;

float:left;

margin-left:5px;

}

/style

/head

body

p上傳預(yù)覽圖片:br

div id="fil" class="fil"

span

input id="f0" name="f0" type="file"/

input type="button" value="添加" onclick="addFile(this)"/

/span

/div

/p

div id="ok"

fieldset class="fieldset_img"

legend圖片展示/legend

ul id="ImgList"

!--li

img id="img1" width="100" height="100" style="cursor:pointer;"

br/

a href="#" name="img1" onclick="DelImg(this)"刪除/a

/li--

/ul

/fieldset

/div

/body

/html

用jquery可以做什么好

使用jQuery可以很方便的實(shí)現(xiàn)頁(yè)面元素的顯示和隱藏，因此也比較容易設(shè)計(jì)出一個(gè)美觀大方多層次的導(dǎo)航菜單。

Tab內(nèi)容的切換

網(wǎng)站的內(nèi)容越來(lái)越豐富，于是網(wǎng)站都希望在盡量少的空間內(nèi)展示盡量多的內(nèi)容，而又不能顯得凌亂不堪，讓用戶無(wú)法尋找。解決的最好辦法就是在頁(yè)面上使用Tab。目前，Tab已經(jīng)成為Web?2.0網(wǎng)站上的一個(gè)流行元素，并且也衍生除了很多優(yōu)秀的用戶使用效果。下面是幾個(gè)使用jQuery來(lái)實(shí)現(xiàn)Tab效果的大型網(wǎng)站的實(shí)例。

人性化的提示信息

最好的提示信息往往是在用戶最開(kāi)始出錯(cuò)的地方進(jìn)行提示的信息。如果用戶都已經(jīng)進(jìn)行了大部分的操作，此時(shí)如果提示某項(xiàng)有錯(cuò)，需要用戶重新做，試想一下，這種做法很容易把用戶激怒，甚至?xí)M(jìn)而放棄對(duì)網(wǎng)站的訪問(wèn)和使用。

可定制的用戶內(nèi)容

Web?2.0網(wǎng)站一個(gè)很大的特征就是用戶的參與。因此現(xiàn)在很多網(wǎng)站都可以讓用戶根據(jù)自己的需求進(jìn)行定制，用戶可以根據(jù)自己的喜好對(duì)網(wǎng)頁(yè)的顯示內(nèi)容甚至顯示風(fēng)格進(jìn)行選擇或者定制。

動(dòng)態(tài)的圖片展示效果

Web?2.0網(wǎng)站的另一個(gè)顯著的特點(diǎn)就是網(wǎng)頁(yè)不再是千篇一律的靜態(tài)頁(yè)面。它出現(xiàn)了很多以前需要使用Flash等工具才能做出來(lái)的動(dòng)態(tài)效果。例如，Dell網(wǎng)站上有一個(gè)圖片切換效果，就是使用Flash來(lái)實(shí)現(xiàn)的，如圖所示。

AJAX實(shí)時(shí)局部刷新

AJAX可以給用戶帶來(lái)很好的用戶體驗(yàn)。用戶感到的最直觀一個(gè)體驗(yàn)就是頁(yè)面的局部實(shí)時(shí)刷新。在傳統(tǒng)網(wǎng)站上，想要更新頁(yè)面內(nèi)容的某一部分，則必須將這個(gè)頁(yè)面重新刷新；使用AJAX之后，用戶會(huì)看到，只有需要改變的內(nèi)容才會(huì)重新發(fā)送數(shù)據(jù)給服務(wù)器，其他部分則保持不變。

jQuery中提供了很強(qiáng)大的AJAX功能。著名的微博客類(lèi)網(wǎng)站twitter.com就是使用的jQuery中的AJAX技術(shù)來(lái)實(shí)現(xiàn)其信息的發(fā)布的。如圖所示。

數(shù)據(jù)的可視化顯示

在日常生活中，經(jīng)常會(huì)接觸到大量的數(shù)據(jù)統(tǒng)計(jì)信息，如工作報(bào)表、消費(fèi)統(tǒng)計(jì)等。最簡(jiǎn)單的表現(xiàn)這些報(bào)表數(shù)據(jù)的方式就是直接列出一個(gè)表格。不過(guò)從某種程度上來(lái)說(shuō)，單純的一堆數(shù)字看起來(lái)不是那么的直觀易讀。因此，在Web?2.0時(shí)代，人們更愿意使用更加直觀的可視化圖表的方式對(duì)統(tǒng)計(jì)數(shù)據(jù)進(jìn)行顯示。

jquery效果 點(diǎn)擊小圖展示大圖，下面小圖是有左右按鈕的 可循環(huán)的無(wú)縫 滾動(dòng)。 上面大圖自動(dòng)播放

網(wǎng)上這類(lèi)插件非常多，無(wú)非就是自己下下來(lái)，修改下樣式就好了，其他的如動(dòng)畫(huà)輪播js是沒(méi)必要去修改的，小圖可以吧css中的按鈕改成圖片而已，沒(méi)必要自己寫(xiě)哦，費(fèi)腦子，

用jquery實(shí)現(xiàn)圖片輪播怎么寫(xiě)呢求指教

*{??

margin:?0;??

padding:?0;??

}??

ul{??

list-style:none;??

}??

.slideShow{??

width:?620px;??

height:?700px;?????/*其實(shí)就是圖片的高度*/??

border:?1px?#eeeeee?solid;??

margin:?100px?auto;??

position:?relative;??

overflow:?hidden;????/*此處需要將溢出框架的圖片部分隱藏*/??

}??

.slideShow?ul{??

width:?2500px;??

position:?relative;?????/*此處需注意relative?:?對(duì)象不可層疊，但將依據(jù)left，right，top，bottom等屬性在正常文檔流中偏移位置，如果沒(méi)有這個(gè)屬性，圖片將不可左右移動(dòng)*/??

}??

.slideShow?ul?li{??

float:?left;?????/*讓四張圖片左浮動(dòng)，形成并排的橫著布局，方便點(diǎn)擊按鈕時(shí)的左移動(dòng)*/??

width:?620px;??

}??

.slideShow?.showNav{?????/*用絕對(duì)定位給數(shù)字按鈕進(jìn)行布局*/??

position:?absolute;??

right:?10px;??

bottom:?5px;??

text-align:center;??

font-size:?12px;??????

line-height:?20px;??

}??

.slideShow?.showNav?span{??

cursor:?pointer;??

display:?block;??

float:?left;??

width:?20px;??

height:?20px;??

background:?#ff5a28;??

margin-left:?2px;??

color:?#fff;??

}??

.slideShow?.showNav?.active{??

background:?#b63e1a;??

}??

js代碼規(guī)范：

script?src="../../../jQuery/js/jquery-2.1.4.js"/script?script?type="text/javascript"??

$(document).ready(function(){??????

var?slideShow=$(".slideShow"),????????????????????????????????????????????????????????????????????//獲取最外層框架的名稱(chēng)?????

ul=slideShow.find("ul"),???????????????

showNumber=slideShow.find(".showNav?span"),??????????????????????????????????????????????//獲取按鈕??????????

oneWidth=slideShow.find("ul?li").eq(0).width();????????????????????????????????????????//獲取每個(gè)圖片的寬度??????????

var?timer=null;?????????????????????????????????????????????????????????????????????????????????????//定時(shí)器返回值，主要用于關(guān)閉定時(shí)器??????????

var?iNow=0;?????????????????????????????????????????????????????????????????????????????????????????//iNow為正在展示的圖片索引值，當(dāng)用戶打開(kāi)網(wǎng)頁(yè)時(shí)首先顯示第一張圖，即索引值為0??????????????????

showNumber.on("click",function(){??????????????????????????????????????????????????????//為每個(gè)按鈕綁定一個(gè)點(diǎn)擊事件???????????????????

$(this).addClass("active").siblings().removeClass("active");??????????????????//按鈕點(diǎn)擊時(shí)為這個(gè)按鈕添加高亮狀態(tài)，并且將其他按鈕高亮狀態(tài)去掉??????????????

var?index=$(this).index();????????????????????????????????????????????????????????????????//獲取哪個(gè)按鈕被點(diǎn)擊，也就是找到被點(diǎn)擊按鈕的索引值??????????????

iNow=index;??????????????

ul.animate({????"left":-oneWidth*iNow,???????????????????????????????//注意此處用到left屬性，所以u(píng)l的樣式里面需要設(shè)置position:?relative;?讓ul左移N個(gè)圖片大小的寬度，N根據(jù)被點(diǎn)擊的按鈕索引值iNOWx確定????????????

})????????

});?????????????????

function?autoplay(){??????

timer=setInterval(function(){??????????????????????????????????????????????//打開(kāi)定時(shí)器?????????????

iNow++;?????????????????????????????????????????????????????????????????????????//讓圖片的索引值次序加1，這樣就可以實(shí)現(xiàn)順序輪播圖片?????????????

if(iNowshowNumber.length-1){??????????????????????????????????????//當(dāng)?shù)竭_(dá)最后一張圖的時(shí)候，讓iNow賦值為第一張圖的索引值，輪播效果跳轉(zhuǎn)到第一張圖重新開(kāi)始??????????????????

iNow=0;?}??????????????

showNumber.eq(iNow).trigger("click");??????????????????????????????????//模擬觸發(fā)數(shù)字按鈕的click??????????

},2000);??????????????????????????????????????????????????????????????????????//2000為輪播的時(shí)間??

}?????

autoplay();?????

slideShow.hover(?function(){clearInterval(timer);},autoplay);?????另外注意setInterval的用法比較關(guān)鍵。??

})??

/script??

主體代碼：

[html]?view?plain?copy?print?

body??

div?class="slideShow"??

!--圖片布局開(kāi)始--??

ul??

lia?href="#"img?src="images/view/111.jpg"http://a/li??

lia?href="#"img??src="images/view/112.jpg"?//a/li??

lia?href="#"img?src="images/view/113.jpg"?//a/li??

lia?href="#"img??src="images/view/114.jpg"?//a/li??

/ul??

!--圖片布局結(jié)束--??

!--按鈕布局開(kāi)始--??

div?class="showNav"??

span?class="active"1/span??

span2/span??

span3/span??

span4/span??

/div??

!--按鈕布局結(jié)束--??

/div??

/body

網(wǎng)頁(yè)名稱(chēng)：圖片展示jquery,圖片展示網(wǎng)站搭建
轉(zhuǎn)載注明：http://chinadenli.net/article2/dsidcoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、外貿(mào)建站、移動(dòng)網(wǎng)站建設(shè)、用戶體驗(yàn)、虛擬主機(jī)、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)