原生js图片滚动

　　　　在网页中，大图滚动的例子用到可以说非常广泛。以下是学js时，用原生js写的大图滚动的例子，写的例子可能有些简陋，但一般网页中的大致效果是这样的。此例子中，引用了tween算法。

　　　　这时，可能就有童鞋要说了，大图滚动，我用JQ写，用你四分之一的代码就能搞定了，效果还比你的炫。嗯，我想说：好像是这样吧。一方面，我这里只是介绍一种方法，一种学习过程，如果没有扎实的原生js基础，你对JQ的理解肯定也不会很深刻。只有掌握原生的js,才能在工作中解决更多新问题。另一方面，你确定用JQ写的代码真的比原生js的少吗？难道你引用的JQ就不是代码了，相对于咱这个小例子，JQ的代码其实是非常多的。浏览器在执行你的代码前，会先把JQ代码执行一遍。用JQ写的例子会比原生的耗性能、耗时间。如果是简单的效果，我是建议用原生js写，不要一写代码就用JQ，这个习惯不是很好。

　　　　具体步骤就不细说了，大家看代码吧。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>大图滚动</title>
<meta name="Keywords" content="">
<meta name="author" content="@my_programmer">
<style type="text/css">
/*重置{*/
body,td{padding:0;margin:0;}img{border:0;}table{border-collapse:collapse;border-spacing:0;}
/*}重置*/
.outer{width:600px;height:450px;margin:20px auto 0;overflow:hidden;}
img{width:600px;height:450px;float:left;}
.div2{width:600px;height:50px;margin:0 auto;}
span{float:left;width:80px;line-height:50px;text-align:center;font-size:20px;background:#ccc;font-weight:bold;cursor:pointer;}
.abc{background:#f00;}
a{width:100px;float:left;line-height:50px;text-align:center;font-size:20px;background:#999;font-weight:bold;cursor:pointer;}
</style>
</head>
<body>
    <div class="outer" id="outer">
        <table>      <!-- 用table的原因：一是为了可扩展; 二是提高用户体验。-->
            <tr>
                <td>
                    <img src="images/pobaby1.gif" alt="pobaby1"/>
                </td>
                <td>
                    <img src="images/pobaby2.gif" alt="pobaby2"/>
                </td>
                <td>
                    <img src="images/pobaby3.gif" alt="pobaby3"/>
                </td>
                <td>
                    <img src="images/pobaby4.gif" alt="pobaby4"/>
                </td>
                <td>
                    <img src="images/pobaby5.gif" alt="pobaby5"/>
                </td>
            </tr>
        </table>
    </div>
    <div class="div2">
　　　　<a>&lt;&lt;</a><span class="abc">1</span><span>2</span><span>3</span><span>4</span><span>5</span><a>&gt;&gt;</a>
　　 </div>
<script type="text/javascript">
    var outer=document.getElementById("outer");
    var imgs=document.getElementsByTagName("img");
    var spans=document.getElementsByTagName("span");
    var as=document.getElementsByTagName("a");
    var time,time1,n=0;
    var Tween = {//Tween算法
        Bounce: {
            easeIn: function(t,b,c,d){
            return c - Tween.Bounce.easeOut(d-t, 0, c, d) + b;
            },
            easeOut: function(t,b,c,d){
            if ((t/=d) < (1/2.75)) {
            return c*(7.5625*t*t) + b;
            } else if (t < (2/2.75)) {
            return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
            } else if (t < (2.5/2.75)) {
            return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
            } else {
            return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
            }
            },
            easeInOut: function(t,b,c,d){
            if (t < d/2) return Tween.Bounce.easeIn(t*2, 0, c, d) * .5 + b;
            else return Tween.Bounce.easeOut(t*2-d, 0, c, d) * .5 + c*.5 + b;
            }
        }
    }
    time1=setInterval(run1,2000);            //计时器time1
    function run1(){                        //参数的函数
        n++;
        if(n>spans.length-1){                //当图片运动到最后时，返回到第一张
            n=0;
        }
        run(n*imgs[0].offsetWidth);            //传参
    }
    function run(endv){                        //设定运动的函数
        var t=0;                            　　//初始步数
        var b=outer.scrollLeft;                //初始值
        var c=endv-b;                        　//变化量
        var d=50;                            　//总步数
        function run2(){
            outer.scrollLeft=Tween.Bounce.easeOut(t,b,c,d);        //引入tween函数
            time=setTimeout(run2,30);       //每隔30毫秒执行一次run2
            t++;
            if(t>d){                        //走d步清除计时器
                clearTimeout(time);
            }    
        }run2();
        for(i=0;i<spans.length;i++){        //使所有按钮显示原始颜色
            spans[i].className="";
        }
        spans[n].className="abc";            //当前按钮颜色随图片变化
    }
    for(var i=0;i<spans.length;i++){        //获取数字按钮事件
        spans[i].onclick=test1;
        spans[i].onmouseout=test2;
    }
    function test1(){                        //鼠标点击按钮时的函数
        clearInterval(time1); 
        clearTimeout(time); 
        for(var i=0;i<spans.length;i++){
            if(spans[i]==this){                //指定当前对象
                spans[i].className="abc";
                n=i;                        //把当前位置赋给n
            }else{
                spans[i].className="";
            }
        }
        run(n*600);
    }
    function test2(){                        //鼠标离开按钮上的函数
        clearInterval(time1);
        time1=setInterval(run1,2000);
    }
    for(var i=0;i<as.length;i++){            //获取左右按钮事件
        as[i].onclick=dest1;
        as[i].onmouseout=dest2;
    }
    function dest1(){
        if(as[0]==this){                    //鼠标点击左按钮时的函数
            clearInterval(time1);
            clearTimeout(time);
            n--;
            if(n<0){
                n=4;
            }
            run(n*600);
        }
        if(as[1]==this){                    //鼠标点击右按钮时的函数
            clearInterval(time1);
            clearTimeout(time);
            n++;
            if(n>4){
                n=0;
            }
            run(n*600);
        }
    }
    function dest2(){                        //鼠标移开时的函数
        clearInterval(time1);
        time1=setInterval(run1,2000);
    }
</script>
</body>
</html>

posted on 2012-09-23 22:01 挨踢前端阅读(1981) 评论(0) 编辑收藏举报

刷新页面返回顶部

Hello World

原生js图片滚动

公告

导航