使用jquery如何實(shí)現(xiàn)圖片自動更換而且是定時(shí)的

!DOCTYPE?html

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供洛陽網(wǎng)站建設(shè)、洛陽做網(wǎng)站、洛陽網(wǎng)站設(shè)計(jì)、洛陽網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、洛陽企業(yè)網(wǎng)站模板建站服務(wù)，10余年洛陽做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

html

head

style?type="text/css"

.box?{

width:?200px;

height:?200px;

margin:?100px?auto;

border:?1px?solid?pink;

}

.box?img?{

display:?inline-block;

width:?100%;

height:?100%;

}

/style

/head

body

div?class="box"

img?src=""

/div

script?src=""/script

script?type="text/javascript"

$(function?()?{

var?imgArr?=?[

"./img/0.png",

"./img/1.png",

"./img/2.png",

"./img/3.png",

"./img/4.png",

];

$(".box?img").attr("src",?imgArr[0]);

var?i?=?0;

setInterval(function?()?{

i++;

if?(i??imgArr.length?-?1)?{

i?=?0

}

$(".box?img").attr("src",?imgArr[i]);

},?2000);

})

/script

/body

/html

上面是代碼：

實(shí)現(xiàn)原理是通過間隔定時(shí)器，每過2秒去設(shè)置img的src屬性。

imgArr是保存圖片的數(shù)組，當(dāng)每一張圖片都展示后重頭再開始

imgArr的值是一張張圖片我這里是在img文件夾下放了5張圖片，題主可以根據(jù)自己的需求選擇網(wǎng)上或者本地圖片。

代碼效果：

用jquery可以做什么好

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

Tab內(nèi)容的切換

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

人性化的提示信息

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

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

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

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

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

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

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

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

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

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

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

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

jquery 多圖片預(yù)覽

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

以下代碼在IE8和FF下測試通過。

另：程序如果有什么問題可以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("請選擇上傳文件");

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="暫無預(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;

}

});

//文件類型判斷

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實(shí)現(xiàn)圖片輪播怎么寫呢求指教

*{??

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?:?對象不可層疊，但將依據(jù)left，right，top，bottom等屬性在正常文檔流中偏移位置，如果沒有這個屬性，圖片將不可左右移動*/??

}??

.slideShow?ul?li{??

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

width:?620px;??

}??

.slideShow?.showNav{?????/*用絕對定位給數(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"),????????????????????????????????????????????????????????????????????//獲取最外層框架的名稱?????

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

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

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

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

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

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

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

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

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

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

})????????

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

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

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

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

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

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"??

!--圖片布局開始--??

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é)束--??

!--按鈕布局開始--??

div?class="showNav"??

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

span2/span??

span3/span??

span4/span??

/div??

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

/div??

/body