原生js和jquery實(shí)現(xiàn)圖片輪播特效
更新時(shí)間：2015年04月23日 09:19:18 投稿：hebedich
本文給大家分享的是使用原生JS和JQ兩種方法分別實(shí)現(xiàn)相同的圖片輪播特效，十分的實(shí)用，也非常方便大家對比學(xué)習(xí)原生js和jQuery，有需要的小伙伴可以參考下。
（1）首先是頁面的結(jié)構(gòu)部分
對于我這種左右切換式
1.首先是個(gè)外圍部分（其實(shí)也就是最外邊的整體wrapper)
2.接著就是你設(shè)置圖片輪播的地方（也就是一個(gè)banner吧）
3.然后是一個(gè)圖片組（可以用新的div 也可以直接使用 ul-->li形式）
4.然后是圖片兩端的左箭頭和右箭頭
5.然后是一個(gè)透明背景層，放在圖片底部
6.然后是一個(gè)圖片描述info層，放在透明背景層的左下角（div 或 ul-->li)
7.然后是一個(gè)按鈕層，用來定位圖片組的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>
相對于之前，知識增多了兩個(gè)箭頭img標(biāo)簽
（2）CSS樣式部分（圖片組的處理）跟淡入淡出式就不一樣了
淡入淡出只需要顯示或者隱藏對應(yīng)序號的圖片就行了，直接通過display來設(shè)定
左右切換式則是采用圖片li 浮動，父層元素ul 總寬為總圖片寬，并設(shè)定為有限banner寬度下隱藏超出寬度的部分
然后當(dāng)想切換到某序號的圖片時(shí)，則采用其ul 定位 left樣式設(shè)定相應(yīng)屬性值實(shí)現(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.自動切換定時(shí)器處理
// 定時(shí)器自動變換2.5秒每次
var autoChange = setInterval(function(){
if(curIndex < imgLen-1){
curIndex ++;
}else{
curIndex = 0;
}
//調(diào)用變換處理函數(shù)
changeTo(curIndex);
},2500);
3.為左右箭頭添加事件處理
左箭頭
//左箭頭滑入滑出事件處理
$("#prev").hover(function(){
//滑入清除定時(shí)器
clearInterval(autoChange);
},function(){
//滑出則重置定時(shí)器
autoChangeAgain();
});
//左箭頭點(diǎn)擊處理
$("#prev").click(function(){
//根據(jù)curIndex進(jìn)行上一個(gè)圖片處理
curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
changeTo(curIndex);
});
右箭頭
//右箭頭滑入滑出事件處理
$("#next").hover(function(){
//滑入清除定時(shí)器
clearInterval(autoChange);
},function(){
//滑出則重置定時(shí)器
autoChangeAgain();
});
//右箭頭點(diǎn)擊處理
$("#next").click(function(){
curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;
changeTo(curIndex);
});
其中autoChangeAgain()就是一個(gè)重置定時(shí)器函數(shù)
//清除定時(shí)器時(shí)候的重置定時(shí)器--封裝
function autoChangeAgain(){
autoChange = setInterval(function(){
if(curIndex < imgLen-1){
curIndex ++;
}else{
curIndex = 0;
}
//調(diào)用變換處理函數(shù)
changeTo(curIndex);
},2500);
}
其中changeTo()就是一個(gè)圖片切換的處理函數(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");
}
每傳入一個(gè)圖片序號，則按理進(jìn)行g(shù)oLeft
4.為右下角的那幾個(gè)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ù)
// 定時(shí)器自動變換2.5秒每次
var autoChange = setInterval(function(){
if(curIndex < imgLen-1){
curIndex ++;
}else{
curIndex = 0;
}
//調(diào)用變換處理函數(shù)
changeTo(curIndex);
},2500);
//左箭頭滑入滑出事件處理
$("#prev").hover(function(){
//滑入清除定時(shí)器
clearInterval(autoChange);
},function(){
//滑出則重置定時(shí)器
autoChangeAgain();
});
//左箭頭點(diǎn)擊處理
$("#prev").click(function(){
//根據(jù)curIndex進(jìn)行上一個(gè)圖片處理
curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
changeTo(curIndex);
});
//右箭頭滑入滑出事件處理
$("#next").hover(function(){
//滑入清除定時(shí)器
clearInterval(autoChange);
},function(){
//滑出則重置定時(shí)器
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();
});
});
//清除定時(shí)器時(shí)候的重置定時(shí)器--封裝
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 原生實(shí)現(xiàn)
js原生大概也就是模擬jq的實(shí)現(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.自動切換定時(shí)器處理
// 定時(shí)器自動變換2.5秒每次
var autoChange = setInterval(function(){
if(curIndex < imgLen -1){
curIndex ++;
}else{
curIndex = 0;
}
//調(diào)用變換處理函數(shù)
changeTo(curIndex);
},2500);
同樣的，有一個(gè)重置定時(shí)器的函數(shù)
//清除定時(shí)器時(shí)候的重置定時(shí)器--封裝
function autoChangeAgain(){
autoChange = setInterval(function(){
if(curIndex < imgLen -1){
curIndex ++;
}else{
curIndex = 0;
}
//調(diào)用變換處理函數(shù)
changeTo(curIndex);
},2500);
}
3.因?yàn)橛幸恍ヽlass呀，所以來幾個(gè)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)行定位。因?yàn)橐幸粋€(gè)漸進(jìn)的過程，所以加上的一點(diǎn)點(diǎn)階段處理。
定位的時(shí)候left的設(shè)置也是有點(diǎn)復(fù)雜的..要考慮方向等情況
//圖片組相對原始左移dist px距離
function goLeft(elem,dist){
if(dist == 400){ //第一次時(shí)設(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樣式表里邊，就總會報(bào)錯取不到
所以直接在js中初始化或者在html中內(nèi)嵌初始化也可。
5.接下來就是切換的函數(shù)實(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)滑過則清除定時(shí)器，并作變換處理
indexArr[_i].onmouseover = function(){
clearTimeout(autoChange);
changeTo(_i);
curIndex = _i;
};
//鼠標(biāo)滑出則重置定時(shí)器處理
indexArr[_i].onmouseout = function(){
autoChangeAgain();
};
})(i);
}
//給左箭頭prev添加上一個(gè)事件
var prev = document.getElementById("prev");
prev.onmouseover = function(){
//滑入清除定時(shí)器
clearInterval(autoChange);
};
prev.onclick = function(){
//根據(jù)curIndex進(jìn)行上一個(gè)圖片處理
curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
changeTo(curIndex);
};
prev.onmouseout = function(){
//滑出則重置定時(shí)器
autoChangeAgain();
};
//給右箭頭next添加下一個(gè)事件
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)用一下下那個(gè) 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組
// 定時(shí)器自動變換2.5秒每次
var autoChange = setInterval(function(){
if(curIndex < imgLen -1){
curIndex ++;
}else{
curIndex = 0;
}
//調(diào)用變換處理函數(shù)
changeTo(curIndex);
},2500);
//清除定時(shí)器時(shí)候的重置定時(shí)器--封裝
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)滑過則清除定時(shí)器，并作變換處理
indexArr[_i].onmouseover = function(){
clearTimeout(autoChange);
changeTo(_i);
curIndex = _i;
};
//鼠標(biāo)滑出則重置定時(shí)器處理
indexArr[_i].onmouseout = function(){
autoChangeAgain();
};
})(i);
}
//給左箭頭prev添加上一個(gè)事件
var prev = document.getElementById("prev");
prev.onmouseover = function(){
//滑入清除定時(shí)器
clearInterval(autoChange);
};
prev.onclick = function(){
//根據(jù)curIndex進(jìn)行上一個(gè)圖片處理
curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
changeTo(curIndex);
};
prev.onmouseout = function(){
//滑出則重置定時(shí)器
autoChangeAgain();
};
//給右箭頭next添加下一個(gè)事件
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í)設(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獲取IE9下拉框默認(rèn)值的問題,如果下拉框沒有空默認(rèn)值會怎么樣等一系列問題，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-07-07
最近項(xiàng)目中用到類似百度的輸入框，于是自己用jquery寫了一個(gè)。希望和大家共同分享一下。存在許多bug，請各位不吝賜教。2011-04-04
jquery使用jquery.zclip插件復(fù)制對象的實(shí)例教程
這篇文章主要介紹了jquery使用jquery.zclip插件復(fù)制對象的實(shí)例教程，當(dāng)然也可以復(fù)制輸入框input、textarea等內(nèi)容，下面看代碼2013-12-12
BootStrap中按鈕點(diǎn)擊后被禁用按鈕的最佳實(shí)現(xiàn)方法
在項(xiàng)目開發(fā)中經(jīng)常會遇到這樣的功能，為了防止在Bootstrap中點(diǎn)擊按鈕多次提交，所以希望點(diǎn)擊按鈕后禁用按鈕。怎么實(shí)現(xiàn)此功能呢？今天腳本之家小編給大家分享BootStrap中按鈕點(diǎn)擊后被禁用按鈕的最佳實(shí)現(xiàn)方法，非常不錯，感興趣的朋友參考下吧2016-09-09
jquery設(shè)置text的值示例(設(shè)置文本框 DIV 表單值)
本文主要介紹了jquery設(shè)置內(nèi)容的方法，下面的例子演示如何通過 text()、html()以及val()方法來設(shè)置內(nèi)容，大家參考使用吧2014-01-01
jQuery實(shí)現(xiàn)點(diǎn)擊滾動到指定元素上的方法分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)點(diǎn)擊滾動到指定元素上的方法,結(jié)合實(shí)例形式分析了jQuery響應(yīng)鼠標(biāo)事件動態(tài)操作頁面元素屬性的相關(guān)相關(guān)使用技巧,需要的朋友可以參考下2020-03-03
Jquery Validation插件防止重復(fù)提交表單的解決方法
在項(xiàng)目開發(fā)中，測試人員報(bào)告缺陷說，即時(shí)有表單驗(yàn)證，但是如果快速點(diǎn)擊兩下“提交”按鈕，系統(tǒng)會產(chǎn)生兩條相同的記錄。2010-03-03
jquery判斷小數(shù)點(diǎn)兩位和自動刪除小數(shù)兩位后的數(shù)字
這篇文章主要介紹了jquery判斷小數(shù)點(diǎn)兩位和自動刪除小數(shù)兩位后的數(shù)字,需要的朋友可以參考下2014-03-03
Dom是Document Object Model的縮寫，意思是文檔對象模型。DOM是一種與瀏覽器、平臺、語言無關(guān)的接口，使用該接口可以輕松訪問頁面中所有的標(biāo)準(zhǔn)組件，本文給大家介紹jQuery隨手筆記之常用的jQuery操作DOM事件，需要的朋友參考下2015-11-11
jQuery Easyui Treegrid實(shí)現(xiàn)顯示checkbox功能
本文通過實(shí)例代碼給大家介紹jQuery Easyui Treegrid實(shí)現(xiàn)顯示checkbox功能的方法，代碼簡單易懂，非常不錯，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-08-08