原生js和jquery實現(xiàn)圖片輪播特效
更新時間：2015年04月23日 09:19:18 投稿：hebedich
本文給大家分享的是使用原生JS和JQ兩種方法分別實現(xiàn)相同的圖片輪播特效，十分的實用，也非常方便大家對比學(xué)習(xí)原生js和jQuery，有需要的小伙伴可以參考下。
（1）首先是頁面的結(jié)構(gòu)部分
對于我這種左右切換式
1.首先是個外圍部分（其實也就是最外邊的整體wrapper)
2.接著就是你設(shè)置圖片輪播的地方（也就是一個banner吧）
3.然后是一個圖片組（可以用新的div 也可以直接使用 ul-->li形式）
4.然后是圖片兩端的左箭頭和右箭頭
5.然后是一個透明背景層，放在圖片底部
6.然后是一個圖片描述info層，放在透明背景層的左下角（div 或 ul-->li)
7.然后是一個按鈕層，用來定位圖片組的index吧,放在透明背景層的右下角(div 或 ul-->li)
由此，可以先構(gòu)造出html結(jié)構(gòu)
<div id="wrapper"><!-- 最外層部分 -->
<div id="banner"><!-- 輪播部分 -->
<ul class="imgList"><!-- 圖片部分 -->
<li><a href="#"><img src="./img/test1.jpg" width="400px" height="200px" alt="puss in boots1"></a></li>
<li><a href="#"><img src="./img/test2.jpg" width="400px" height="200px" alt="puss in boots2"></a></li>
<li><a href="#"><img src="./img/test3.jpg" width="400px" height="200px" alt="puss in boots3"></a></li>
<li><a href="#"><img src="./img/test4.jpg" width="400px" height="200px" alt="puss in boots4"></a></li>
<li><a href="#"><img src="./img/test5.jpg" width="400px" height="200px" alt="puss in boots5"></a></li>
</ul>
<img src="./img/prev.png" width="20px" height="40px" id="prev">
<img src="./img/next.png" width="20px" height="40px" id="next">
<div class="bg"></div> <!-- 圖片底部背景層部分-->
<ul class="infoList"><!-- 圖片左下角文字信息部分 -->
<li class="infoOn">puss in boots1</li>
<li>puss in boots2</li>
<li>puss in boots3</li>
<li>puss in boots4</li>
<li>puss in boots5</li>
</ul>
<ul class="indexList"><!-- 圖片右下角序號部分 -->
<li class="indexOn">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
相對于之前，知識增多了兩個箭頭img標(biāo)簽
（2）CSS樣式部分（圖片組的處理）跟淡入淡出式就不一樣了
淡入淡出只需要顯示或者隱藏對應(yīng)序號的圖片就行了，直接通過display來設(shè)定
左右切換式則是采用圖片li 浮動，父層元素ul 總寬為總圖片寬，并設(shè)定為有限banner寬度下隱藏超出寬度的部分
然后當(dāng)想切換到某序號的圖片時，則采用其ul 定位 left樣式設(shè)定相應(yīng)屬性值實現(xiàn)
比如顯示第一張圖片初始定位left為0px, 要想顯示第二張圖片則需要left:-400px 處理
<style type="text/css">
body,div,ul,li,a,img{margin: 0;padding: 0;}
ul,li{list-style: none;}
a{text-decoration: none;}
#wrapper{position: relative;margin: 30px auto;width: 400px;height: 200px;}
#banner{position:relative;width: 400px;height: 200px;overflow: hidden;}
.imgList{position:relative;width:2000px;height:200px;z-index: 10;overflow: hidden;}
.imgList li{float:left;display: inline;}
#prev,
#next{position: absolute;top:80px;z-index: 20;cursor: pointer;opacity: 0.2;filter:alpha(opacity=20);}
#prev{left: 10px;}
#next{right: 10px;}
#prev:hover,
#next:hover{opacity: 0.5;filter:alpha(opacity=50);}
.bg{position: absolute;bottom: 0;width: 400px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity=40);background: black;}
.infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;}
.infoList li{display: none;}
.infoList .infoOn{display: inline;color: white;}
.indexList{position: absolute;right: 10px;bottom: 5px;z-index: 30;}
.indexList li{float: left;margin-right: 5px;padding: 2px 4px;border: 2px solid black;background: grey;cursor: pointer;}
.indexList .indexOn{background: red;font-weight: bold;color: white;}
</style>
（3）頁面基本已經(jīng)構(gòu)建好久可以進(jìn)行js的處理了
一、jQuery方式
照常先說jq處理
1.全局變量等
var curIndex = 0, //當(dāng)前index
imgLen = $(".imgList li").length; //圖片總數(shù)
2.自動切換定時器處理
// 定時器自動變換2.5秒每次
var autoChange = setInterval(function(){
if(curIndex < imgLen-1){
curIndex ++;
}else{
curIndex = 0;
}
//調(diào)用變換處理函數(shù)
changeTo(curIndex);
},2500);
3.為左右箭頭添加事件處理
左箭頭
//左箭頭滑入滑出事件處理
$("#prev").hover(function(){
//滑入清除定時器
clearInterval(autoChange);
},function(){
//滑出則重置定時器
autoChangeAgain();
});
//左箭頭點(diǎn)擊處理
$("#prev").click(function(){
//根據(jù)curIndex進(jìn)行上一個圖片處理
curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
changeTo(curIndex);
});
右箭頭
//右箭頭滑入滑出事件處理
$("#next").hover(function(){
//滑入清除定時器
clearInterval(autoChange);
},function(){
//滑出則重置定時器
autoChangeAgain();
});
//右箭頭點(diǎn)擊處理
$("#next").click(function(){
curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;
changeTo(curIndex);
});
其中autoChangeAgain()就是一個重置定時器函數(shù)
//清除定時器時候的重置定時器--封裝
function autoChangeAgain(){
autoChange = setInterval(function(){
if(curIndex < imgLen-1){
curIndex ++;
}else{
curIndex = 0;
}
//調(diào)用變換處理函數(shù)
changeTo(curIndex);
},2500);
}
其中changeTo()就是一個圖片切換的處理函數(shù)
function changeTo(num){
var goLeft = num * 400;
$(".imgList").animate({left: "-" + goLeft + "px"},500);
$(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn");
$(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");
}
每傳入一個圖片序號，則按理進(jìn)行g(shù)oLeft
4.為右下角的那幾個li 按鈕綁定事件處理
//對右下角按鈕index進(jìn)行事件綁定處理等
$(".indexList").find("li").each(function(item){
$(this).hover(function(){
clearInterval(autoChange);
changeTo(item);
curIndex = item;
},function(){
autoChangeAgain();
});
});
jq就是這樣，簡便，原生代碼量就有些多了
完整代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>圖片輪播 jq(左右切換)</title>
<style type="text/css">
body,div,ul,li,a,img{margin: 0;padding: 0;}
ul,li{list-style: none;}
a{text-decoration: none;}
#wrapper{position: relative;margin: 30px auto;width: 400px;height: 200px;}
#banner{position:relative;width: 400px;height: 200px;overflow: hidden;}
.imgList{position:relative;width:2000px;height:200px;z-index: 10;overflow: hidden;}
.imgList li{float:left;display: inline;}
#prev,
#next{position: absolute;top:80px;z-index: 20;cursor: pointer;opacity: 0.2;filter:alpha(opacity=20);}
#prev{left: 10px;}
#next{right: 10px;}
#prev:hover,
#next:hover{opacity: 0.5;filter:alpha(opacity=50);}
.bg{position: absolute;bottom: 0;width: 400px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity=40);background: black;}
.infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;}
.infoList li{display: none;}
.infoList .infoOn{display: inline;color: white;}
.indexList{position: absolute;right: 10px;bottom: 5px;z-index: 30;}
.indexList li{float: left;margin-right: 5px;padding: 2px 4px;border: 2px solid black;background: grey;cursor: pointer;}
.indexList .indexOn{background: red;font-weight: bold;color: white;}
</style>
</head>
<body>
<div id="wrapper"><!-- 最外層部分 -->
<div id="banner"><!-- 輪播部分 -->
<ul class="imgList"><!-- 圖片部分 -->
<li><a href="#"><img src="./img/test1.jpg" width="400px" height="200px" alt="puss in boots1"></a></li>
<li><a href="#"><img src="./img/test2.jpg" width="400px" height="200px" alt="puss in boots2"></a></li>
<li><a href="#"><img src="./img/test3.jpg" width="400px" height="200px" alt="puss in boots3"></a></li>
<li><a href="#"><img src="./img/test4.jpg" width="400px" height="200px" alt="puss in boots4"></a></li>
<li><a href="#"><img src="./img/test5.jpg" width="400px" height="200px" alt="puss in boots5"></a></li>
</ul>
<img src="./img/prev.png" width="20px" height="40px" id="prev">
<img src="./img/next.png" width="20px" height="40px" id="next">
<div class="bg"></div> <!-- 圖片底部背景層部分-->
<ul class="infoList"><!-- 圖片左下角文字信息部分 -->
<li class="infoOn">puss in boots1</li>
<li>puss in boots2</li>
<li>puss in boots3</li>
<li>puss in boots4</li>
<li>puss in boots5</li>
</ul>
<ul class="indexList"><!-- 圖片右下角序號部分 -->
<li class="indexOn">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript">
var curIndex = 0, //當(dāng)前index
imgLen = $(".imgList li").length; //圖片總數(shù)
// 定時器自動變換2.5秒每次
var autoChange = setInterval(function(){
if(curIndex < imgLen-1){
curIndex ++;
}else{
curIndex = 0;
}
//調(diào)用變換處理函數(shù)
changeTo(curIndex);
},2500);
//左箭頭滑入滑出事件處理
$("#prev").hover(function(){
//滑入清除定時器
clearInterval(autoChange);
},function(){
//滑出則重置定時器
autoChangeAgain();
});
//左箭頭點(diǎn)擊處理
$("#prev").click(function(){
//根據(jù)curIndex進(jìn)行上一個圖片處理
curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
changeTo(curIndex);
});
//右箭頭滑入滑出事件處理
$("#next").hover(function(){
//滑入清除定時器
clearInterval(autoChange);
},function(){
//滑出則重置定時器
autoChangeAgain();
});
//右箭頭點(diǎn)擊處理
$("#next").click(function(){
curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;
changeTo(curIndex);
});
//對右下角按鈕index進(jìn)行事件綁定處理等
$(".indexList").find("li").each(function(item){
$(this).hover(function(){
clearInterval(autoChange);
changeTo(item);
curIndex = item;
},function(){
autoChangeAgain();
});
});
//清除定時器時候的重置定時器--封裝
function autoChangeAgain(){
autoChange = setInterval(function(){
if(curIndex < imgLen-1){
curIndex ++;
}else{
curIndex = 0;
}
//調(diào)用變換處理函數(shù)
changeTo(curIndex);
},2500);
}
function changeTo(num){
var goLeft = num * 400;
$(".imgList").animate({left: "-" + goLeft + "px"},500);
$(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn");
$(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");
}
</script>
</body>
</html>
二、js 原生實現(xiàn)
js原生大概也就是模擬jq的實現(xiàn)思路
1.全局變量等
var curIndex = 0, //當(dāng)前index
imgArr = getElementsByClassName("imgList")[0].getElementsByTagName("li"), //獲取圖片組
imgLen = imgArr.length,
infoArr = getElementsByClassName("infoList")[0].getElementsByTagName("li"), //獲取圖片info組
indexArr = getElementsByClassName("indexList")[0].getElementsByTagName("li"); //獲取控制index組
2.自動切換定時器處理
// 定時器自動變換2.5秒每次
var autoChange = setInterval(function(){
if(curIndex < imgLen -1){
curIndex ++;
}else{
curIndex = 0;
}
//調(diào)用變換處理函數(shù)
changeTo(curIndex);
},2500);
同樣的，有一個重置定時器的函數(shù)
//清除定時器時候的重置定時器--封裝
function autoChangeAgain(){
autoChange = setInterval(function(){
if(curIndex < imgLen -1){
curIndex ++;
}else{
curIndex = 0;
}
//調(diào)用變換處理函數(shù)
changeTo(curIndex);
},2500);
}
3.因為有一些class呀，所以來幾個class函數(shù)的模擬也是需要的
//通過class獲取節(jié)點(diǎn)
function getElementsByClassName(className){
var classArr = [];
var tags = document.getElementsByTagName('*');
for(var item in tags){
if(tags[item].nodeType == 1){
if(tags[item].getAttribute('class') == className){
classArr.push(tags[item]);
}
}
}
return classArr; //返回
}
// 判斷obj是否有此class
function hasClass(obj,cls){ //class位于單詞邊界
return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
//給 obj添加class
function addClass(obj,cls){
if(!this.hasClass(obj,cls)){
obj.className += cls;
}
}
//移除obj對應(yīng)的class
function removeClass(obj,cls){
if(hasClass(obj,cls)){
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
obj.className = obj.className.replace(reg,'');
}
}
4.要左右切換，就得模擬jq的animate-->left .
我的思路就是動態(tài)地設(shè)置element.style.left 進(jìn)行定位。因為要有一個漸進(jìn)的過程，所以加上的一點(diǎn)點(diǎn)階段處理。
定位的時候left的設(shè)置也是有點(diǎn)復(fù)雜的..要考慮方向等情況
//圖片組相對原始左移dist px距離
function goLeft(elem,dist){
if(dist == 400){ //第一次時設(shè)置left為0px 或者直接使用內(nèi)嵌法 style="left:0;"
elem.style.left = "0px";
}
var toLeft; //判斷圖片移動方向是否為左
dist = dist + parseInt(elem.style.left); //圖片組相對當(dāng)前移動距離
if(dist<0){
toLeft = false;
dist = Math.abs(dist);
}else{
toLeft = true;
}
for(var i=0;i<= dist/20;i++){ //這里設(shè)定緩慢移動，10階每階40px
(function(_i){
var pos = parseInt(elem.style.left); //獲取當(dāng)前l(fā)eft
setTimeout(function(){
pos += (toLeft)? -(_i * 20) : (_i * 20); //根據(jù)toLeft值指定圖片組位置改變
//console.log(pos);
elem.style.left = pos + "px";
},_i * 25); //每階間隔50毫秒
})(i);
}
}
上頭也看到了，我初始了left的值為0px
我試過了，如果不初始或者把初始的left值寫在行內(nèi)css樣式表里邊，就總會報錯取不到
所以直接在js中初始化或者在html中內(nèi)嵌初始化也可。
5.接下來就是切換的函數(shù)實現(xiàn)了，比如要切換到序號為num的圖片
//左右切換處理函數(shù)
function changeTo(num){
//設(shè)置image
var imgList = getElementsByClassName("imgList")[0];
goLeft(imgList,num*400); //左移一定距離
//設(shè)置image 的 info
var curInfo = getElementsByClassName("infoOn")[0];
removeClass(curInfo,"infoOn");
addClass(infoArr[num],"infoOn");
//設(shè)置image的控制下標(biāo) index
var _curIndex = getElementsByClassName("indexOn")[0];
removeClass(_curIndex,"indexOn");
addClass(indexArr[num],"indexOn");
}
6.然后再給左右箭頭還有右下角那堆index綁定事件處理
//給左右箭頭和右下角的圖片index添加事件處理
function addEvent(){
for(var i=0;i<imgLen;i++){
//閉包防止作用域內(nèi)活動對象item的影響
(function(_i){
//鼠標(biāo)滑過則清除定時器，并作變換處理
indexArr[_i].onmouseover = function(){
clearTimeout(autoChange);
changeTo(_i);
curIndex = _i;
};
//鼠標(biāo)滑出則重置定時器處理
indexArr[_i].onmouseout = function(){
autoChangeAgain();
};
})(i);
}
//給左箭頭prev添加上一個事件
var prev = document.getElementById("prev");
prev.onmouseover = function(){
//滑入清除定時器
clearInterval(autoChange);
};
prev.onclick = function(){
//根據(jù)curIndex進(jìn)行上一個圖片處理
curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
changeTo(curIndex);
};
prev.onmouseout = function(){
//滑出則重置定時器
autoChangeAgain();
};
//給右箭頭next添加下一個事件
var next = document.getElementById("next");
next.onmouseover = function(){
clearInterval(autoChange);
};
next.onclick = function(){
curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;
changeTo(curIndex);
};
next.onmouseout = function(){
autoChangeAgain();
};
}
7.最后的最后，沒啥了. 噢好像還要調(diào)用一下下那個 addEvent() ..
完整代碼 代碼量有些冗雜..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>圖片輪播 js原生(左右切換)</title>
<style type="text/css">
body,div,ul,li,a,img{margin: 0;padding: 0;}
ul,li{list-style: none;}
a{text-decoration: none;}
#wrapper{position: relative;margin: 30px auto;width: 400px;height: 200px;}
#banner{position:relative;width: 400px;height: 200px;overflow: hidden;}
.imgList{position:relative;width:2000px;height:200px;z-index: 10;overflow: hidden;}
.imgList li{float:left;display: inline;}
#prev,
#next{position: absolute;top:80px;z-index: 20;cursor: pointer;opacity: 0.2;filter:alpha(opacity=20);}
#prev{left: 10px;}
#next{right: 10px;}
#prev:hover,
#next:hover{opacity: 0.5;filter:alpha(opacity=50);}
.bg{position: absolute;bottom: 0;width: 400px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity=40);background: black;}
.infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;}
.infoList li{display: none;}
.infoList .infoOn{display: inline;color: white;}
.indexList{position: absolute;right: 10px;bottom: 5px;z-index: 30;}
.indexList li{float: left;margin-right: 5px;padding: 2px 4px;border: 2px solid black;background: grey;cursor: pointer;}
.indexList .indexOn{background: red;font-weight: bold;color: white;}
</style>
</head>
<body>
<div id="wrapper"><!-- 最外層部分 -->
<div id="banner"><!-- 輪播部分 -->
<ul class="imgList"><!-- 圖片部分 -->
<li><a href="#"><img src="./img/test1.jpg" width="400px" height="200px" alt="puss in boots1"></a></li>
<li><a href="#"><img src="./img/test2.jpg" width="400px" height="200px" alt="puss in boots2"></a></li>
<li><a href="#"><img src="./img/test3.jpg" width="400px" height="200px" alt="puss in boots3"></a></li>
<li><a href="#"><img src="./img/test4.jpg" width="400px" height="200px" alt="puss in boots4"></a></li>
<li><a href="#"><img src="./img/test5.jpg" width="400px" height="200px" alt="puss in boots5"></a></li>
</ul>
<img src="./img/prev.png" width="20px" height="40px" id="prev">
<img src="./img/next.png" width="20px" height="40px" id="next">
<div class="bg"></div> <!-- 圖片底部背景層部分-->
<ul class="infoList"><!-- 圖片左下角文字信息部分 -->
<li class="infoOn">puss in boots1</li>
<li>puss in boots2</li>
<li>puss in boots3</li>
<li>puss in boots4</li>
<li>puss in boots5</li>
</ul>
<ul class="indexList"><!-- 圖片右下角序號部分 -->
<li class="indexOn">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
<script type="text/javascript">
var curIndex = 0, //當(dāng)前index
imgArr = getElementsByClassName("imgList")[0].getElementsByTagName("li"), //獲取圖片組
imgLen = imgArr.length,
infoArr = getElementsByClassName("infoList")[0].getElementsByTagName("li"), //獲取圖片info組
indexArr = getElementsByClassName("indexList")[0].getElementsByTagName("li"); //獲取控制index組
// 定時器自動變換2.5秒每次
var autoChange = setInterval(function(){
if(curIndex < imgLen -1){
curIndex ++;
}else{
curIndex = 0;
}
//調(diào)用變換處理函數(shù)
changeTo(curIndex);
},2500);
//清除定時器時候的重置定時器--封裝
function autoChangeAgain(){
autoChange = setInterval(function(){
if(curIndex < imgLen -1){
curIndex ++;
}else{
curIndex = 0;
}
//調(diào)用變換處理函數(shù)
changeTo(curIndex);
},2500);
}
//調(diào)用添加事件處理
addEvent();
//給左右箭頭和右下角的圖片index添加事件處理
function addEvent(){
for(var i=0;i<imgLen;i++){
//閉包防止作用域內(nèi)活動對象item的影響
(function(_i){
//鼠標(biāo)滑過則清除定時器，并作變換處理
indexArr[_i].onmouseover = function(){
clearTimeout(autoChange);
changeTo(_i);
curIndex = _i;
};
//鼠標(biāo)滑出則重置定時器處理
indexArr[_i].onmouseout = function(){
autoChangeAgain();
};
})(i);
}
//給左箭頭prev添加上一個事件
var prev = document.getElementById("prev");
prev.onmouseover = function(){
//滑入清除定時器
clearInterval(autoChange);
};
prev.onclick = function(){
//根據(jù)curIndex進(jìn)行上一個圖片處理
curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
changeTo(curIndex);
};
prev.onmouseout = function(){
//滑出則重置定時器
autoChangeAgain();
};
//給右箭頭next添加下一個事件
var next = document.getElementById("next");
next.onmouseover = function(){
clearInterval(autoChange);
};
next.onclick = function(){
curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;
changeTo(curIndex);
};
next.onmouseout = function(){
autoChangeAgain();
};
}
//左右切換處理函數(shù)
function changeTo(num){
//設(shè)置image
var imgList = getElementsByClassName("imgList")[0];
goLeft(imgList,num*400); //左移一定距離
//設(shè)置image 的 info
var curInfo = getElementsByClassName("infoOn")[0];
removeClass(curInfo,"infoOn");
addClass(infoArr[num],"infoOn");
//設(shè)置image的控制下標(biāo) index
var _curIndex = getElementsByClassName("indexOn")[0];
removeClass(_curIndex,"indexOn");
addClass(indexArr[num],"indexOn");
}
//圖片組相對原始左移dist px距離
function goLeft(elem,dist){
if(dist == 400){ //第一次時設(shè)置left為0px 或者直接使用內(nèi)嵌法 style="left:0;"
elem.style.left = "0px";
}
var toLeft; //判斷圖片移動方向是否為左
dist = dist + parseInt(elem.style.left); //圖片組相對當(dāng)前移動距離
if(dist<0){
toLeft = false;
dist = Math.abs(dist);
}else{
toLeft = true;
}
for(var i=0;i<= dist/20;i++){ //這里設(shè)定緩慢移動，10階每階40px
(function(_i){
var pos = parseInt(elem.style.left); //獲取當(dāng)前l(fā)eft
setTimeout(function(){
pos += (toLeft)? -(_i * 20) : (_i * 20); //根據(jù)toLeft值指定圖片組位置改變
//console.log(pos);
elem.style.left = pos + "px";
},_i * 25); //每階間隔50毫秒
})(i);
}
}
//通過class獲取節(jié)點(diǎn)
function getElementsByClassName(className){
var classArr = [];
var tags = document.getElementsByTagName('*');
for(var item in tags){
if(tags[item].nodeType == 1){
if(tags[item].getAttribute('class') == className){
classArr.push(tags[item]);
}
}
}
return classArr; //返回
}
// 判斷obj是否有此class
function hasClass(obj,cls){ //class位于單詞邊界
return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
//給 obj添加class
function addClass(obj,cls){
if(!this.hasClass(obj,cls)){
obj.className += cls;
}
}
//移除obj對應(yīng)的class
function removeClass(obj,cls){
if(hasClass(obj,cls)){
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
obj.className = obj.className.replace(reg,'');
}
}
</script>
</body>
</html>
以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。
相關(guān)文章
本文為大家詳細(xì)介紹下使用jquery簡單實現(xiàn)封裝的對話框，具體實現(xiàn)代碼如下，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-07-07
jquery動態(tài)改變onclick屬性導(dǎo)致失效的問題解決方法
onclick屬性失效的問題，相信很多的朋友都有遇到過吧，jquery動態(tài)改變onclick屬性就會導(dǎo)致此問題的發(fā)生，解決方法如下，希望對大家有所幫助2013-12-12
這篇文章主要為大家詳細(xì)介紹了jquery validation驗證表單插件的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要是對jquery中iframe的操作進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
jQuery實現(xiàn)鼠標(biāo)響應(yīng)式透明度漸變動畫效果示例
這篇文章主要介紹了jQuery實現(xiàn)鼠標(biāo)響應(yīng)式透明度漸變動畫效果,涉及jQuery事件響應(yīng)及動態(tài)修改頁面元素屬性相關(guān)操作技巧,需要的朋友可以參考下2018-02-02
jQuery實現(xiàn)點(diǎn)擊任意位置彈出層外關(guān)閉彈出層效果
在之前做項目的時候經(jīng)常會在主頁面上點(diǎn)擊某個按鈕，右側(cè)彈出一個div輸出對應(yīng)內(nèi)容的詳細(xì)信息，怎么實現(xiàn)的呢，今天小編給大家分享通過jquery實現(xiàn)點(diǎn)擊任意位置彈出層外關(guān)閉彈出層效果，感興趣的朋友一起看看吧2016-10-10
EasyUI Combobox設(shè)置默認(rèn)值 獲取text的方法
這篇文章主要介紹了EasyUI Combobox設(shè)置默認(rèn)值 獲取text的方法,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-11-11 
deferred對象是jQuery對Promises接口的實現(xiàn)。接下來通過本文給大家詳解介紹jQuery中的deferred對象的使用（一），需要的朋友一起學(xué)習(xí)吧
2016-05-05 
Jquery Easyui驗證組件ValidateBox使用詳解（20）
這篇文章主要為大家詳細(xì)介紹了Jquery Easyui自定義下拉框組件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-12-12