changeTo(curIndex);
},2500);
}
3.因为有一些class呀，所以来几个class函数的模拟也是需要的
//通过class获取节点
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对应的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 .
我的思路就是动态地设置element.style.left 进行定位。因为要有一个渐进的过程，所以加上的一点点阶段处理。
定位的时候left的设置也是有点复杂的..要考虑方向等情况
//图片组相对原始左移dist px距离
function goLeft(elem,dist){
if(dist == 400){ //第一次时设置left为0px 或者直接使用内嵌法 style="left:0;"
elem.style.left = "0px";
}
var toLeft; //判断图片移动方向是否为左
dist = dist + parseInt(elem.style.left); //图片组相对当前移动距离
if(dist<0){
toLeft = false;
dist = Math.abs(dist);
}else{
toLeft = true;
}
for(var i=0;i<= dist/20;i++){ //这里设定缓慢移动，10阶每阶40px
(function(_i){
var pos = parseInt(elem.style.left); //获取当前left
setTimeout(function(){
pos += (toLeft)? -(_i * 20) : (_i * 20); //根据toLeft值指定图片组位置改变
//console.log(pos);
elem.style.left = pos + "px";
},_i * 25); //每阶间隔50毫秒
})(i);
}
}
上头也看到了，我初始了left的值为0px
我试过了，如果不初始或者把初始的left值写在行内css样式表里边，就总会报错取不到
所以直接在js中初始化或者在html中内嵌初始化也可。
5.接下来就是切换的函数实现了，比如要切换到序号为num的图片
//左右切换处理函数
function changeTo(num){
//设置image
