本文實(shí)例講述了jQuery實(shí)現(xiàn)的簡(jiǎn)單圖片輪播效果。分享給大家供大家參考，具體如下：
先來看看運(yùn)行效果：
具體代碼如下：
<!DOCTYPE html><html><head><title>jquery實(shí)現(xiàn)圖片輪播效果</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><style>#lunbo{width: 600px;height: 300px;margin: 0 auto;overflow: hidden;}#pics{width: 600px;height: 300px;cursor: pointer;position: relative;}ul li{width: 600px;height: 300px;list-style: none;position: absolute;top: 0;left: 0;display: none;}img{width: 600px;height: 300px;}</style></head><body><div id="lunbo"> <ul id="pics"> <li style="display: inline;"><img src="http://pic.qiantucdn.com/58pic/14/60/54/32n58PICxE6_1024.jpg"></li> <li><img src="http://pic.qiantucdn.com/58pic/19/09/94/5678b76f75315_1024.jpg"></li> <li><img src="http://pic.qiantucdn.com/58pic/19/39/22/01D58PICFx7_1024.jpg"></li> <li><img src="http://pic.qiantucdn.com/58pic/19/11/08/5679490f4892d_1024.jpg"></li> <li><img src="http://pic.qiantucdn.com/58pic/18/44/26/5620690acb188_1024.jpg"></li> </ul></div><script type="text/javascript">$(document).ready(function(){ var oLi = $("li"); var liWidth = oLi.eq(0).width(); var liHeight = oLi.eq(0).height(); //每隔3秒進(jìn)行輪播 var timer = setInterval(change,3000); //鼠標(biāo)放置在圖片上時(shí)停止輪播，移開時(shí)繼續(xù)輪播 $("div").mouseover ( function(){ clearInterval(timer); }) $("div").mouseout (function(){ timer = setInterval(change,3000); }) //輪播函數(shù) var prevIndex = 0,nextIndex = 1; function change(){ if (prevIndex == oLi.length-1 ) {//若當(dāng)前圖片是最后一張圖片，下一張出現(xiàn)首張圖片 nextIndex = 0; } var n = Math.floor(Math.random()*3); if (n == 0) { fade(prevIndex,nextIndex); } else if (n== 2) { slide(prevIndex,nextIndex); } else{ grap(prevIndex,nextIndex); } prevIndex = nextIndex; nextIndex ++; } //淡入淡出效果, function fade(prevIndex,nextIndex){ //傳入當(dāng)前顯示圖片以及下一張圖片的索引 oLi.eq(prevIndex).fadeOut(1000); oLi.eq(nextIndex).fadeIn(1000); } //向左右滑動(dòng)效果 function slide(prevIndex,nextIndex){ var rand = Math.floor(Math.random()*2); oLi.eq(nextIndex).show(); oLi.eq(nextIndex).css("z-index","-1"); if (rand) { //向左滑動(dòng) oLi.eq(prevIndex).animate({left: -liWidth},1000,fun); } else{ oLi.eq(prevIndex).animate({left: liWidth},1000,fun); } function fun(){ oLi.eq(prevIndex).css({"left":"0","display":"none"}); oLi.eq(nextIndex).css("z-index","1"); } } //收縮效果 function grap(prevIndex,nextIndex){ var rand = Math.floor(Math.random()*4); oLi.eq(nextIndex).show(); oLi.eq(nextIndex).css("z-index","-1"); switch (rand){ case 0://向左上角滑動(dòng) oLi.eq(prevIndex).animate({left: -liWidth,top: -liHeight},1000,function(){ oLi.eq(prevIndex).css({"left":"0","top": "0","display":"none"}); oLi.eq(nextIndex).css("z-index","1"); });break; case 1://向右上角滑動(dòng) oLi.eq(prevIndex).animate({left: liWidth,top: -liHeight},1000,function(){ oLi.eq(prevIndex).css({"left":'0',"top":"0","display":"none"}); oLi.eq(nextIndex).css("z-index","1"); });break; case 2://向右下角滑動(dòng) oLi.eq(prevIndex).animate({left: liWidth,top: liHeight},1000,function(){ oLi.eq(prevIndex).css({"left":'0',"top":"0","display":"none"}); oLi.eq(nextIndex).css("z-index","1"); });break; case 3://向左下角滑動(dòng) oLi.eq(prevIndex).animate({left: -liWidth,top: liHeight},1000,function(){ oLi.eq(prevIndex).css({"left":'0',"top":"0","display":"none"}); oLi.eq(nextIndex).css("z-index","1"); });break; default:break; } } });</script></body></html>更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery圖片操作技巧大全》、《jQuery切換特效與技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
