原生js--大图滚动
原生js--大图滚动<div class="postText"><div id="cnblogs_post_body"> 在网页中，大图滚动的例子用到可以说非常广泛。以下是学js时，用原生js写的大图滚动的例子，写的例子可能有些简陋，但一般网页中的大致效果是这样的。此例子中，引用了tween算法。
这时，可能就有童鞋要说了，大图滚动，我用JQ写，用你四分之一的代码就能搞定了，效果还比你的炫。嗯，我想说：好像是这样吧。一方面，我这里只是介绍一种方法，一种学习过程，如果没有扎实的原生js基础，你对JQ的理解肯定也不会很深刻。只有掌握原生的js,才能在工作中解决更多新问题。另一方面，你确定用JQ写的代码真的比原生js的少吗？难道你引用的JQ就不是代码了，相对于咱这个小例子，JQ的代码其实是非常多的。浏览器在执行你的代码前，会先把JQ代码执行一遍。用JQ写的例子会比原生的耗性能、耗时间。如果是简单的效果，我是建议用原生js写，不要一写代码就用JQ，这个习惯不是很好。
具体步骤就不细说了，大家看代码吧。
<div class="cnblogs_code"><!DOCTYPE HTML><html><head><meta charset="utf-8"><title>大图滚动</title><meta name="Keywords" content=""><meta name="Description" content=""><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.className=""; } spans.className="abc"; //当前按钮颜色随图片变化 } for(var i=0;i<spans.length;i++){ //获取数字按钮事件 spans.onclick=test1; spans.onmouseout=test2; } function test1(){ //鼠标点击按钮时的函数 clearInterval(time1); clearTimeout(time); for(var i=0;i<spans.length;i++){ if(spans==this){ //指定当前对象 spans.className="abc"; n=i; //把当前位置赋给n }else{ spans.className=""; } } run(n*600); } function test2(){ //鼠标离开按钮上的函数 clearInterval(time1); time1=setInterval(run1,2000); } for(var i=0;i<as.length;i++){ //获取左右按钮事件 as.onclick=dest1; as.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>
页:
[1]