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;/* 將超過(guò)這個(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í)器的開(kāi)關(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({ //通過(guò)定位的方法將第一張移到最后一張;
'position':'relative',
'left':oul.width()
});
_now=0;
}
else{
_now++; //如果沒(méi)達(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)切換圖片”;離開(kāi)則繼續(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,;松開(kāi)鼠標(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實(shí)現(xiàn)HTML表格單元格的合并功能
這篇文章主要介紹了jQuery實(shí)現(xiàn)HTML表格單元格的合并功能,可合并指定行與指定列上的單元格,涉及jQuery針對(duì)表格元素屬性的動(dòng)態(tài)操作技巧,需要的朋友可以參考下2016-04-04
在css加載完畢后自動(dòng)判斷頁(yè)面是否加入css或js文件
使用jquery ui中的dialog()來(lái)顯示消息框,為了使方法方便調(diào)用,便加入了自動(dòng)判斷頁(yè)面是否加入了ui.js和ui.css,具體實(shí)現(xiàn)代碼如下2014-09-09
Jquery動(dòng)態(tài)進(jìn)行圖片縮略的原理及實(shí)現(xiàn)
圖片縮略在某些情況下還是比較實(shí)用的,比如在做一些商品的預(yù)覽圖縮略等等,下面為大家介紹下具體的實(shí)現(xiàn)思路及代碼,有需求的朋友可以參考下2013-08-08
基于jquery的防止大圖片撐破頁(yè)面的實(shí)現(xiàn)代碼(立即縮放)
這篇文章將根據(jù)此寫一個(gè)應(yīng)用:讓圖片未加載完畢就實(shí)現(xiàn)按比例自適應(yīng),防止圖片撐破布局(尤其是外鏈圖片)2011-10-10
jQuery實(shí)現(xiàn)的簡(jiǎn)單獲取索引功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡(jiǎn)單獲取索引功能,涉及jQuery事件響應(yīng)及元素索引獲取相關(guān)操作技巧,需要的朋友可以參考下2018-06-06

