jquery實(shí)現(xiàn)圖片輪播器
一、輪播器
1、HTML框架
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>圖片輪播器</title> <link rel="stylesheet" type="text/css" href="slider.css" rel="external nofollow" /> <script src="Jquery.js"></script> <script src="slider.js"></script> </head> <body> <div class="wrap"> <!--快捷鍵 .wrap>(ul>li*4>img[src=$.jpg])+ol>li*4 --> <ul> <li><img src="1.jpg" alt="11" /></li> <li><img src="2.jpg" alt="22" /></li> <li><img src="3.jpg" alt="33" /></li> <li><img src="4.jpg" alt="44" /></li> </ul> <ol> <li class="current">1</li> <li>2</li> <li>3</li> <li>4</li> </ol> <p class="introduce"></p> </div> </body> </html>
2、css的樣式
/*清除列表前默認(rèn)黑點(diǎn)*/ *{ margin: 0; padding: 0; } img{ border:0; } ol, ul ,li{list-style: none;} body{ margin: 50px; } .wrap{ width: 500px;/*一張圖片的高和寬*/ height: 350px; border: 1px solid red; position: relative;/*以這一張圖的邊框?yàn)榛鶞?zhǔn)位置*/ overflow: hidden;/* 將超過這個(gè)長(zhǎng)寬高的部分隱藏 */ } .wrap ul{ width: 2000px;/*列表的行是四張圖片的寬度*/ position: absolute;/* 防止圖片溢出 */ left: 0; top: 0; } .wrap ul li { float: left;/* 將四張圖片緊挨著橫著排列 */ width: 500px; } .wrap ol{ position: absolute; bottom: 10px; right:10px; } .wrap ol li{ float: left;/* 達(dá)到 橫著排列 的目的*/ width: 16px; height: 16px; line-height: 16px; text-align: center;/* 字體在列元素中舉重顯示 */ color: #fff; background: #000; border: 1px solid yellow; margin-right: 3px;/* 列與列之間的距離 */ cursor: pointer; } .wrap ol li.current{ background: #fff; color:#000; } .wrap .introduce{ width:400px ; height: 30px; line-height: 30px; background: rgba(0, 0, 0, 0.5); /* 達(dá)到透明顯示的作用;或者用“opacity:0.5 ; filter: alpha(opacity = 50);” */ color: #fff; position: absolute; bottom: 0; left: 0; }
3、JS控制
$(document).ready(function(){ var oul = $('.wrap ul'); //獲取 行; var ali = $('.wrap ul li'); //獲取 列; var numLi = $('.wrap ol li');//獲取數(shù)字的 列; var aliWidth = $('.wrap ul li').eq(0).width(); //獲取單張圖片的寬度; var _now = 0;//這個(gè)控制數(shù)字樣式的計(jì)數(shù)器 var _now2 = 0;//這個(gè)是控制圖片運(yùn)動(dòng)距離的計(jì)數(shù)器 var timeId; //定時(shí)器的開關(guān) var aimg = $('.wrap ul img');//獲取wrap中img元素 var op = $('.wrap p') //獲取wrap中p元素 numLi.click(function() { //鼠標(biāo)點(diǎn)擊觸發(fā)的函數(shù); var index = $(this).index(); //如果點(diǎn)擊第一張圖片,index=0; _now = index; //不管_now還是_now2都要和點(diǎn)擊時(shí)index同步; _now2 = index; var imgAlt = aimg.eq(_now).attr('alt');//獲取 _now時(shí)刻的的alt值 op.html(imgAlt); //并將atl值顯示 $(this).addClass('current').siblings().removeClass(); //數(shù)字樣式 的 增和刪; oul.animate({'left':-aliWidth*index},500); //圖片的移動(dòng),行元素的左側(cè)距離wrap的左側(cè)-500*index }); function slider(){ if (_now==numLi.size()-1) { //當(dāng)滾動(dòng)到第四張圖片的時(shí)候 ali.eq(0).css({ //通過定位的方法將第一張移到最后一張; 'position':'relative', 'left':oul.width() }); _now=0; } else{ _now++; //如果沒達(dá)到第四張,那就將_new+1; } _now2++; //圖片控制計(jì)數(shù)器 +1; numLi.eq(_now).addClass('current').siblings().removeClass(); //數(shù)字樣式 的 增和刪; var imgAlt = aimg.eq(_now).attr('alt'); //獲取 _now時(shí)刻的的alt值 op.html(imgAlt); //并將atl值顯示 oul.animate({'left':-aliWidth*_now2},500,function(){ //圖片的移動(dòng),行元素的左側(cè)距離wrap的左側(cè)-500*now2 if (_now==0) { ali.eq(0).css('position','static'); oul.css('left',0); _now2=0; } }); } timeId = setInterval(slider,1500); //每1500ms,自動(dòng)切換圖片 //鼠標(biāo)點(diǎn)擊圖片則停止計(jì)時(shí)器,停止“自動(dòng)切換圖片”;離開則繼續(xù)定時(shí)器切換圖片 // $('.wrap').mouseover(function(event) { // clearInterval(timeId); // }); // $('.wrap').mouseover(function(event) { // timeId = setInterval(slider,1500); // }); $('.wrap').hover(function() { clearInterval(timeId); }, function() { timeId = setInterval(slider,1500); }); });
*重要函數(shù)
1、獲取各個(gè)標(biāo)簽值并顯示
var imgAlt = aimg.eq(_now).attr('alt');//獲取 _now時(shí)刻的的alt值 op.html(imgAlt); //并將atl值顯示
2、改變數(shù)字樣式
$(this).addClass('current').siblings().removeClass(); //數(shù)字樣式 的 增和刪;
3、滾動(dòng)圖片
oul.animate({'left':-aliWidth*index},500); //圖片的移動(dòng),行元素的左側(cè)距離wrap的左側(cè)-500*index
*注意點(diǎn)
1、同步
_now = index;
//不管_now還是_now2都要和點(diǎn)擊時(shí)index同步;
//index可能在點(diǎn)擊鼠標(biāo)之后變成3,;松開鼠標(biāo)后我們希望_now變成從3變成0,但是因?yàn)閟etInterval之后_now加1,_now其實(shí)還是從0變成1;所以需要同步_now和index;
2、計(jì)數(shù)器
_now2的作用是防止父元素在第一張留出空白圖片;數(shù)字定時(shí)器和圖片運(yùn)動(dòng)控制定時(shí)器是不同步的
var _now = 0;//這個(gè)控制數(shù)字樣式的計(jì)數(shù)器 var _now2 = 0;//這個(gè)是控制圖片運(yùn)動(dòng)距離的計(jì)數(shù)器
3、去relative屬性
if (_now==0) { ali.eq(0).css('position','static');//去relative屬性 oul.css('left',0);//當(dāng)去完relative之后,要還原ul的“l(fā)eft”值為0; _now2=0;
4、去屬性的時(shí)機(jī)
Oul.animate({css屬性的設(shè)置},500,function())其中function就是在500ms執(zhí)行完之后的操作;
oul.animate({'left':-aliWidth*_now2},500,function(){ //圖片的移動(dòng),行元素的左側(cè)距離wrap的左側(cè)-500*now2 //根據(jù)一組css執(zhí)行屬性動(dòng)畫 if (_now==0) { ali.eq(0).css('position','static'); oul.css('left',0); _now2=0; //當(dāng)_now為0的時(shí)候,_now2也應(yīng)該還原回去為0; } });
*難點(diǎn)
首先,要學(xué)會(huì)獲取元素值;
其次,了解幾種函數(shù);
再則,變量的靈活使用,達(dá)到了解變量每時(shí)每刻的值;
最后,定時(shí)器的控制是最難的;
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
jquery對(duì)table做排序操作的實(shí)例演示
這篇文章主要介紹了jquery對(duì)table做排序操作的實(shí)例演示,通過添加自定義屬性data-sort-field-ftime及表頭添加onchange事件詳細(xì)講解了操作過程,需要的朋友可以參考下2017-08-08jquery實(shí)現(xiàn)二級(jí)導(dǎo)航下拉菜單效果實(shí)例
這篇文章主要介紹了jquery二級(jí)導(dǎo)航下拉菜單,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05jquery中dom操作和事件的實(shí)例學(xué)習(xí)-表單驗(yàn)證
這個(gè)demo的效果是實(shí)現(xiàn)用戶輸入時(shí)提供實(shí)時(shí)提醒,并不一定要等到元素失去焦點(diǎn)時(shí)才提醒2011-11-11跨域請(qǐng)求之jQuery的ajax jsonp的使用解惑
前天在項(xiàng)目中寫的一個(gè)ajax jsonp的使用,出現(xiàn)了問題:可以成功獲得請(qǐng)求結(jié)果,但沒有執(zhí)行success方法2011-10-10jquery用offset()方法獲得元素的xy坐標(biāo)
jquery 獲得元素的 xy坐標(biāo),用offset()方法,body屬性設(shè)置margin :0;padding:0;,需要的朋友可以參考下2014-09-09jQuery動(dòng)態(tài)追加頁面數(shù)據(jù)以及事件委托詳解
這篇文章主要為大家詳細(xì)介紹了jQuery動(dòng)態(tài)追加頁面數(shù)據(jù)以及事件委托的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05解決Jquery下拉框數(shù)據(jù)動(dòng)態(tài)獲取的問題
下面小編就為大家分享一篇解決Jquery下拉框數(shù)據(jù)動(dòng)態(tài)獲取的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-01-01jQuery實(shí)現(xiàn)彈出窗口彈出div層的實(shí)例代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)彈出窗口彈出div層的實(shí)例代碼,點(diǎn)擊頁面的鏈接,彈出一個(gè)div層,同時(shí)頁面的其他部分變灰并且不能點(diǎn)擊,,具體實(shí)現(xiàn)代碼大家參考下本文吧2017-01-01jQuery實(shí)現(xiàn)簡(jiǎn)易商城系統(tǒng)項(xiàng)目實(shí)操
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡(jiǎn)易商城系統(tǒng)項(xiàng)目實(shí)操,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,感興趣的小伙伴可以參考一下2022-06-06