09_JS字符串方法、$封装、无缝滚动、动画、轮播图

返回前面起第一个字符的位置

indexOf(“字符”);

它是从 前面开始数（从左边开始数）， 而且只找第一个， 然后返回改字符的位置， 索引号都是从0开始的。 返回的是个数值。

 var txt = “abcdef”;
 alert(txt.indexOf(“d”))      结果就是   3

如果找不到该字符 返回 -1

返回后面起第一个字符的位置

lastIndexOf(索引字符串)

从后面开始数，返回的索引值还是从前面开始数的

例：

var str = "adsfgh";
alert(str.indexOf("s"));//2
alert(str.lastIndexOf("s"));//2

上面两个结果都是2，但是如果str改为

var str = "adsfghsb";
alert(str.indexOf("s"));//2
alert(str.lastIndexOf("s"));//6

这个时候lastIndexOf返回的就是6了

网址编码

我们知道一个网站自己的网址， 不同页面也有自己id网址， 我们经常会做一些， 把网址送入到后台。 但是后台再处理的不认识，比如换行啊等特殊符号的？

encodeURIComponent() 函数可把字符串作为 URI 组件进行编码
decodeURIComponent() 函数可把字符串作为 URI 组件进行解码

例：

        var url =  "http://www.itast.cn?name=cz";
        var encUrl = encodeURIComponent(url);
        console.dir(encUrl);
        console.dir(decodeURIComponent(encUrl));

结果：

http%3A%2F%2Fwww.itast.cn%3Fname%3Dcz
%E7%BC%96%E8%A7%A3%E7%A0%81.html:10 http://www.itast.cn?name=cz

操作字符串

• 合并字符串
• 取字符串

concat()

连接字符串

str1.concat(str2);

var txt1 = "abc";
var txt2 = "123";
console.log(txt1.concat(txt2));// "abc123"; 

slice()

slice(“取字符串的起始位置”, [结束位置]) ;
[] 表示可选的参数

起始位置一定要有，结束位置可以省略

var txt = “abcedf”;
txt.slice(3) ;    从 txt 里面字符的 第 3（索引号）个开始取   结束位置省略， 一直取到最后一个。 

总结:

• slice(3) 从第3个开始取，一直取到最后
• slice(3,6) 3：从 第3个开始取，6：取到第6索引号的位置，注意：是从左边的第0个开始数。 但是不包 6 。
• 起始位置可以是负数 ， 如果是负数，则是从 右边往左边开始取。

var txt =”asdf”;
txt.slice(-1) ;// 结果是   f 

• slice(-1)；表示从右边第一个开始到右边最后一个
• slice(-5,-2)；表示从右边第五个开始到右边最后二个，不包括第二个

substr()

substr(起始位置,[取的个数])

同上。不写取的个数， 默认从起始位置一直取到最后 。
取的个数： 是指从起始位置开始，往后面数几个。

 var txt = “abcdefghijk”;
 txt.substr(3,4); //从第3个  （d） 开始 数 4个  defg 

• substr(-1) ;少用，因为 在IE6、7、8 报错 。 尽量少用
• 兼容性的写法 ：
  str.substr(str.length-1,1); // 兼容的写法

substring()

• substring 同slice 一样的，但是有一点不同
• substring(3,6) ，substring 始终会把 小的值作为 起始位置 大的值作为结束位置
  例如： substring(6,3) 实际中 自动变成 substring(3,6);

例：保留两位小数

        var PI = 3.1415926;
        var str = PI+"";
        var index = str.indexOf(".");
        var sub = str.substr(0,index+3);
        console.dir(sub);//3.14
        console.dir(parseFloat(sub));//3.14

例：判断文件格式

例：初步封装Jquery的$选择器

无缝滚动

原理：首先先复制 两张图片 （第一张和第二张） 放到最后面 （本质上是第 5.6张）
ul 是盒子移动的， 如果ul 的left 值 大于等于 4张图片的宽度，就应该快速复原为0 。

例：循环匀速无缝滚动

    
    
    
    


    

        

            
![](images/01.jpg)
            
![](images/02.jpg)
            
![](images/03.jpg)
            
![](images/04.jpg)
            
![](images/01.jpg)
            
![](images/02.jpg)
        
    

动画

• 匀速动画
  匀速动画，看起来效果太简单。
  等差序列 : 2 4 6 8 10
• 缓动动画公式:
  一个盒子初始值是0，要走到 400 px 的位置，假如说，初始值 leader：0 ，target：400
  box.style.left = xxxx + “px”

leader = leader + (target - leader ) /10 ;

10表示步长
例：缓动动画，先快后慢

    
    
    
    


    开始
    

例：轮播图

    
    
    
    


    

        

            

                
![](images/01.jpg)
                
![](images/02.jpg)
                
![](images/03.jpg)
                
![](images/04.jpg)
                
![](images/05.jpg)
            
        
        

            
1
            
2
            
3
            
4
            
5
        
    

例：左右点击轮播

    
    
    
    


    

        

            

                
![](images/1.jpg)
                
![](images/2.jpg)
                
![](images/3.jpg)
                
![](images/4.jpg)
                
![](images/5.jpg)
            
        
         > 
         <